Este documento fornece instruções sobre layouts e múltiplas activities em Android. Ele inclui informações sobre componentes básicos de layout, tipos comuns de layouts como LinearLayout e ConstraintLayout, e etapas para criar uma nova activity e passar dados entre elas.
1. This work is licensed under the Apache 2.0 License
Android Study Jams
Layouts e múltiplas Activities
2. Calleb J. Miquissene
DSC Lead, Founder – AlugAqui,
Android Engineer
Estudante de Desenvolvimento de Softwares
DSC Lead
Android Developer, Firebase App Developer
La Casa de Papel, !Game of Thrones
Tabs, !Spaces
!Animes
Sobre mim
3. This work is licensed under the Apache 2.0 License
● Activity – Manipulacao da UI da aplicacao
● Resources (layout files, images, strings, themes, etc...)
● AndroidManifest.xml – Permissoes da aplicacao
● Gradle files – Bibliotecas, e dependencias da aplicacao
Anatomia de um projecto básico Android
4. This work is licensed under the Apache 2.0 License
Layouts
5. This work is licensed under the Apache 2.0 License
TextView ImageView Button
Hello Android!
Views
6. This work is licensed under the Apache 2.0 License
TextView
TextView
Button
LinearLayout
TextView
Button
ConstraintLayout
TextView
ViewGroups
7. This work is licensed under the Apache 2.0 License
Linear Layout
LinearLayout é um grupo de visualizações que alinha todos os filhos em
uma única direção vertical ou horizontal.
Você pode especificar a direção do layout com o atributo
android:orientation
8. This work is licensed under the Apache 2.0 License
ConstraintLayout
O ConstraintLayout permite que você crie layouts grandes e complexos com
uma hierarquia de visualização plana (sem grupos de visualização
aninhados).
9. This work is licensed under the Apache 2.0 License
Hello World!
Declare layouts in XML
<TextView
android:text="Hello World!"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
10. Crie uma nova aplicação com o nome
My Developer Profile
Esta aplicação começa com uma tela com campos onde deves
preencher (nome, linguagem de programação, idade, url da foto
de perfil e biografia); e um botão, onde ao clicar, a aplicação
deve abrir uma nova tela e mostrar o perfil do developer, com
base nos dados que preencheste no formulário.
11. This work is licensed under the Apache 2.0 License
Abra o arquivo biuld.gradle a
nível da app, e adicione as
dependências das bibliotecas
como ilustrado na imagem ao
lado.
As dependências representam
as bibliotecas que serão
utilizadas na aplicação.
No caso desta aplicação
utilizaremos duas bibliotecas
externas, que são:
Adicionando as
dependências
12. This work is licensed under the Apache 2.0 License
Glide – para buscar imagens
da internet através de urls e
coloca-las em ImageViews.
E CircleImageView –
biblioteca para ImageViews
com formato circular.
Após adicionar as
dependências, conecte-se a
internet e clique em menu
File/Sync Project With
Gradle Files para baixar as
bibliotecas.
Adicionando as
dependências
13. This work is licensed under the Apache 2.0 License
De certeza o teu projecto
começou com uma nova
activity chamada
MainActivity.kt.
Va em File/Activity/Empty
Activity e crie uma nova
activity.
De o nome de PerfilActivity.
No folder
com.example.mydeveloperprofile
crie um novo pacote de nome
activities e mova as duas
activities para este pacote.
Criando uma outra Activity
14. This work is licensed under the Apache 2.0 License
Crie outro pacote no folder
com.example.mydeveloperprofile,
com nome model.
Dentro deste pacote crie um
ficheiro em Kotlin, de nome
Developer.kt.
A classe Developer tem os
atributos nome, linguagem,
idade, foto e biografia, e se
extende a classe
Serializable.
Criando a classe
“Developer”
15. This work is licensed under the Apache 2.0 License
Edite o código xml do layout
da activity_main.xml.
Use o LinearLayout, para
colocar os componentes da
sua tela/ as suas views.
Defina android:orientation =
“vertical” para que as tuas
views estejam organizadas
verticalmente.
Usando o LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="15dp"
android:gravity="center"
android:layout_height="match_parent"
tools:context=".activities.MainActivity">
// CODIGO DAS VIEWS, NAS PROXIMAS PAGINAS
</ LinearLayout>
18. This work is licensed under the Apache 2.0 License
O seu editor visual devera te
mostrar uma tela como a
ilustrada na imagem.
Esta e a primeira tela do
aplicativo, ela contem 5
EditTexts e um Button.
Usando o LinearLayout
19. This work is licensed under the Apache 2.0 License
Uma boa pratica ao criar as
tuas aplicações android é
adicionar as tuas
strings/textos em
app/res/values/strings.xml
esta pratica ajuda na
reutilização de strings e sua
tradução.
Adicionando textos ao
arquivo strings.xml
<resources>
<string name="app_name">My Developer Profile</string>
<string name="nome_do_developer">Nome do Developer</string>
<string name="linguagem_preferida">Linguagem Preferida</string>
<string name="kotlin">Kotlin</string>
<string name="idade">Idade</string>
<string name="ver_perfil">Ver perfil</string>
<string name="url_da_foto_do_perfil">URL da foto do
perfil</string>
<string name="campos_incorrectos">Campos vazios ou
invalidos!</string>
<string name="fale_um_pouco_sobre_voce">Fale um pouco sobre
voce</string>
</resources>
20. This work is licensed under the Apache 2.0 License
Edite o código xml do layout
da activity_perfil.xml.
Use o ConstraintLayout,
para colocar os componentes
da sua tela/ as suas views.
No ConstraintLayout, as views
devem apoiar-se em outras
views.
Usando o ConstraintLayout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.PerfilActivity">
// CODIGO DAS VIEWS, NAS PROXIMAS PAGINAS
</androidx.constraintlayout.widget.ConstraintLayout>
24. This work is licensed under the Apache 2.0 License
O seu editor visual devera te
mostrar uma tela como a
ilustrada na imagem.
Esta e a tela que sera
mostrada após clicar no botão
da primeira tela do aplicativo.
Esta tela contem 4 EditTexts,
1 ImageView e 1
CircleImageView.
Usando o ConstraintLayout
25. This work is licensed under the Apache 2.0 License
Na MainActivity.kt, dentro da
classe MainActivity e fora da
função onCreate(), declare as
variáveis que estarão
associadas as Views do teu
layout activity_main.xml.
MainActivity.kt
(…)
class MainActivity : AppCompatActivity() {
// Declaracao das variaveis que estarao associadas as Views
do Layout
lateinit var edtNome: EditText
lateinit var edtLinguagem: EditText
lateinit var edtIdade: EditText
lateinit var edtUrlFoto: EditText
lateinit var edtBiografia: EditText
lateinit var btnVerPerfil: Button
override fun onCreate(savedInstanceState: Bundle?) {
(…)
26. This work is licensed under the Apache 2.0 License
Dentro da função onCreate(),
associe as variáveis criadas,
as Views que definiste no teu
layout, através do
findViewById.
MainActivity.kt
(…)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Associacao das variaveis as Views do Layout
edtNome = findViewById<EditText>(R.id.edtNome)
edtIdade = findViewById<EditText>(R.id.edtIdade)
edtLinguagem = findViewById<EditText>(R.id.edtLinguagem)
edtUrlFoto = findViewById<EditText>(R.id.edtUrlFoto)
edtBiografia = findViewById<EditText>(R.id.edtBiografia)
btnVerPerfil = findViewById<Button>(R.id.btnVerPerfil)
(…)
27. This work is licensed under the Apache 2.0 License
Na MainActivity.kt, dentro da
classe MainActivity e fora da
função onCreate(), crie uma
função camposValidos() que
retorna o valor true, caso os
campos não estejam vazios.
Validando os campos na
MainActivity.kt
// Funcao que valida os campos e retorna TRUE se os campos
estiverem preenchidos
private fun camposValidos(): Boolean {
return !(edtNome.text.isNullOrEmpty() ||
edtLinguagem.text.isNullOrEmpty() ||
edtIdade.text.isNullOrEmpty() ||
edtUrlFoto.text.isNullOrEmpty() ||
edtBiografia.text.isNullOrEmpty())
}
28. This work is licensed under the Apache 2.0 License
Dentro da função onCreate(),
“escute” os eventos que
acontecem sobre o Botão
“ver perfil”, através do
método setOnClickListener()
chamado sobre a variável
associada ao botão, isto é, a
variável btnVerPerfil.
Responde aos evento do
clique
// Responde aos evento do clique no botao "btnVerPerfil"
btnVerPerfil.setOnClickListener {
(…)
}
29. This work is licensed under the Apache 2.0 License
Dentro do método
setOnClickListener()
chamado sobre a variável
btnVerPerfil, adicione o
código na imagem.
Basicamente, ele verifica se
todos os campos estão
preenchidos, caso sim, ele
inicia a activity PerfilActivity
com um objecto Developer
como EXTRA. Caso não, ele
mostra uma mensagem de
erro usando o Toast.
Responde aos evento do
clique // Verifica se os campos estao preenchidos
if (camposValidos()) {
// Busca os valores inseridos pelo usuario nos campos
val nome = edtNome.text.toString()
val linguagem = edtLinguagem.text.toString()
val idade = edtIdade.text.toString().toInt()
val foto = edtUrlFoto.text.toString()
val biografia = edtBiografia.text.toString()
// Cria um novo objecto "Developer" com os valores dos campos
val developer = Developer(nome, linguagem, idade, foto, biografia)
val intent = Intent(this, PerfilActivity::class.java)
intent.putExtra("developer", developer) // Adiciona o objecto developer ao Intent
startActivity(intent)
} else {
// Mostra uma mensagem de erro
Toast.makeText(
applicationContext,
getString(R.string.campos_incorrectos),
Toast.LENGTH_SHORT
).show()
}
30. This work is licensed under the Apache 2.0 License
Dentro da função onCreate()
1. Declare e inicialize a
variável que receberá o
EXTRA passado pela activity
anterior através do Intent.
2. Declare e inicialize as
variáveis que referenciam os
elementos/views do teu
layout.
PerfilActivity
// 1. Declara e inicializa a variavel developer que recebe o
EXTRA passado pela activity anterior
val developer = intent.getSerializableExtra("developer") as Developer
// 2. Declara e inicializa as variaveis que fazerem referencias
aos elementos do layout
val txtNome = findViewById<TextView>(R.id.txtNome)
val txtIdade = findViewById<TextView>(R.id.txtIdade)
val txtLinguagem = findViewById<TextView>(R.id.txtLinguagem)
val txtBiografia = findViewById<TextView>(R.id.txtBiografia)
val imgFotoDeCapa = findViewById<ImageView>(R.id.imgFotoDeCapa)
val imgFotoDePerfil = findViewById<CircleImageView>(R.id.imgFotoDePerfil)
31. This work is licensed under the Apache 2.0 License
Neste trecho de código
fazemos o uso da biblioteca
Glide que adicionamos as
dependências para buscar
imagens na internet através
de URLs.
A imagem buscada na internet
através do URL é colocada no
ImageView “imgFotoDeCapa”
e no CircleImageView
“imgFotoDePerfil”.
Mostrando Imagens de urls
em ImageViews
// Biblioteca Glide, coloca a imagem do URL na ImageView foto de capa
Glide.with(this)
.load(developer.foto) // URL da imagem
.placeholder(R.drawable.empty) // Caso o URL da imagem nao seja valido
.into(imgFotoDeCapa) // ImageView que recebe a imagem do url
// Biblioteca Glide, coloca a imagem do URL na ImageView foto de capa
Glide.with(this)
.load(developer.foto) // URL da imagem
.placeholder(R.drawable.empty) // Caso o URL da imagem nao seja valido
.into(imgFotoDePerfil) // ImageView que recebe a imagem do url
32. This work is licensed under the Apache 2.0 License
O trecho de código ao lado
mostra que atribuímos ao
atributo text das variáveis
txtNome, txtIdade,
txtLinguagem e txtBiografia,
os valores dos atributos do
objecto Developer recebido
como EXTRA pela activity
anterior.
Note que para o txtIdade.text
tivemos que converter o
developer.idade para String
usando o método toString()
visto que idade é um Int.
Mostrando textos em
TextViews programaticamente
// Coloca os atributos do developer nas suas devidas views
txtNome.text = developer.nome
txtIdade.text = developer.idade.toString()
txtLinguagem.text = developer.linguagem
txtBiografia.text = developer.biografia
33. This work is licensed under the Apache 2.0 License
TELA 2:
5 EditTexts e um Button.
O segundo EditText, já vem
preenchido com o texto
“Kotlin”.
Ao clicar no botão “VER
PERFIL”, a abre a tela do
perfil, caso todos os campos
estejam preenchidos.
Rode a aplicacao em seu
emulador
34. This work is licensed under the Apache 2.0 License
TELA 2:
2 ImageViews, das quais uma é circular,
criada através da biblioteca
CircleImageView.
4 TextViews para o nome, linguagem,
idade e biografia.
Caso não haja internet ou o URL da
imagem seja invalido, a aplicação irá
mostrar a imagem predefinida, que você
definiu como placeHolder, no trecho de
código em que faz-se o uso do Glide.
Rode a aplicacao em seu
emulador
35. This work is licensed under the Apache 2.0 License
Aprenda e divirta-se!
Notas do Editor
You’ll also be exploring other aspects of a basic Android app project which include a main activity, resources for your app, an Android Manifest file, and Gradle files.
An Activity is how the user interacts with your app and it takes care of creating a window to display your UI in.
Resources are the additional files and static content that your code uses, such as layout files, images, audio files, UI strings, themes, and more.
Every project also includes an AndroidManifest.xml file. It describes essential information about your app such as the app’s package name, components of the app, and permissions it needs access to.
Android uses Gradle to automate and manage the build process for your app. You can configure the build by modifying the Gradle files in your app to specify project dependencies, properties of your app, build variants, and more.
This is a quick overview of the anatomy of a basic app project. You’ll have more time to dive in and explore these files firsthand in the course.
For more info
https://developer.android.com/guide/components/activities/intro-activities
https://developer.android.com/guide/topics/resources/providing-resources
https://developer.android.com/guide/topics/manifest/manifest-intro
https://developer.android.com/studio/build
Then you’ll build an interactive Dice Roller app and learn about layouts. A layout defines the structure for the user interface in your app, and layouts in Android are made up of a hierarchy of Views and ViewGroups.
Here are some types of views that are provided by Android: TextView for displaying text, ImageView for displaying images, and Button to perform some action when tapped.
To position one or more views on screen, use a ViewGroup. Here are some examples of ViewGroups in Android. Use FrameLayout when you have one view that you want to position on the screen. Use LinearLayout to display a row of views or a column of views, as shown in the diagram. Use ConstraintLayout for more complex layouts. You may hear the ViewGroup referred to as the parent, and the views inside it as its children.
Declare layouts in Android using XML. For example, this is what a TextView element looks like in XML. The value of the android:text attribute is the text to display, which is Hello World! The layout_width and layout_height attributes are wrap_content, meaning the TextView will be as wide and as tall as the content inside it.
Defining the UI layout in XML is one aspect of your app.