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>

16. <EditText
android:id="@+id/edtNome"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/nome_do_developer"
android:inputType="textPersonName"
android:importantForAutofill="no" />
<EditText
android:id="@+id/edtIdade"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:hint="@string/idade"
android:inputType="number"
android:importantForAutofill="no" />
<EditText
android:id="@+id/edtLinguagem"
android:layout_width="match_parent"
android:layout_marginTop="15dp"
android:layout_height="wrap_content"
android:hint="@string/linguagem_preferida"
android:text="@string/kotlin"
android:inputType="textPersonName"
android:autofillHints="" />

17. <EditText
android:id="@+id/edtUrlFoto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:hint="@string/url_da_foto_do_perfil"
android:inputType="textUri"
android:importantForAutofill="no" />
<EditText
android:id="@+id/edtBiografia"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:hint="@string/fale_um_pouco_sobre_voce"
android:inputType="textMultiLine"
android:importantForAutofill="no" />
<Button
android:id="@+id/btnVerPerfil"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="@string/ver_perfil" />

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>

21. <ImageView
android:id="@+id/imgFotoDeCapa"
android:layout_width="match_parent"
android:layout_height="200dp"
android:contentDescription="@string/app_name"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="@mipmap/ic_launcher" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/imgFotoDePerfil"
android:layout_width="100dp"
android:layout_height="100dp"
app:civ_border_width="2dp"
android:contentDescription="@string/app_name"
app:layout_constraintBottom_toBottomOf="@+id/imgFotoDeCapa"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imgFotoDeCapa"
tools:src="@mipmap/ic_launcher_round" />

22. <TextView
android:id="@+id/txtNome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:textSize="20dp"
android:textColor="@color/black"
android:textStyle="bold"
tools:text=“Exemplo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imgFotoDePerfil" />
<TextView
android:id="@+id/txtLinguagem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:textColor="@color/purple_700"
tools:text=“Exemplo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/txtNome" />

23. <TextView
android:id="@+id/txtIdade"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="16"
android:textColor="@color/teal_700"
android:textSize="30dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/imgFotoDePerfil"
app:layout_constraintTop_toBottomOf="@+id/imgFotoDeCapa" />
<TextView
android:id="@+id/txtBiografia"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/txtLinguagem"
tools:text=“Exemplo" />

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!