Slide 1
Slide 1 text
Android
Training
Program
PORTUGAL
Aula #3
Fundações II
Slide 2
Slide 2 text
● Sejam excelentes uns para os outros
● Fale mais alto se vir ou ouvir alguma coisa
● O assédio não é tolerado
● Pratique "Sim e" um ao outro
Código de conduta
Mais informações: http://bit.ly/2IhF0l3
Slide 3
Slide 3 text
Andres-Leonardo
Martinez-Ortiz
Google
Carlos Mota
Formador
Renato Almeida
Formador
@davilagrau @cafonsomota @tallnato
Equipa
Daniela Ferreira
Gestora de
comunidades
Slide 4
Slide 4 text
● 12 aulas
● 1h30 cada aula
● ~1 aula por semana
● 14 Outubro a 16 Dezembro
● YouTube live
● Suporte assíncrono contínuo via Discord/email
● Todo o código disponível no GitHub
Photo by Arif Riyanto on Unspla
O programa
Slide 5
Slide 5 text
#0
14 de Outubro
Pronto para
começar
#1
21 de Outubro
Bem-vindos ao
Android
#2
28 de Outubro
Fundações I
#3
04 de Novembro
Fundações II
#4
11 de Novembro
Fundações III
#5
18 de Novembro
Listas, listas e
mais listas
#6
25 de Novembro
Jetpack,
Jetpack,
Jetpack!
#7 - #8
02 - 03 de Dezembro
Firebase
#9 - #10
09 - 10 de Dezembro
MLKit &
TensorFlow
#11
16 de Dezembro
Resumo
Semana Semana
Calendário
✅
Direto
✅ ✅
Slide 6
Slide 6 text
Sumário
Photo by Mika Baumeister on Unsplash
● Resumo da aula anterior
● Layouts, views, interações
● Passaporte para a Google
● Kotlin para principiantes
● Sexta-Feira negra
Slide 7
Slide 7 text
http://events.withgoogle.com/atp2020
✉ [email protected]
http://bit.ly/atp2020-youtube
http://bit.ly/atp2020-discord
Links
Slide 8
Slide 8 text
http://bit.ly/atp2020-live
Slide 9
Slide 9 text
http://bit.ly/atp2020-codelabs
Slide 10
Slide 10 text
http://bit.ly/kahoot-aula3
Slide 11
Slide 11 text
Resumo da Aula #2
Slide 12
Slide 12 text
AndroidManifest.xml
...
Slide 13
Slide 13 text
Activity
Slide 14
Slide 14 text
Fragment
Slide 15
Slide 15 text
Intents
+351990000001
Slide 16
Slide 16 text
Navegação
Slide 17
Slide 17 text
Aula #3
Slide 18
Slide 18 text
Layouts
Slide 19
Slide 19 text
● Descreve a interface gráfica
● Tipicamente declarado num XML, mas pode ser construído programaticamente
Layouts
Slide 20
Slide 20 text
● Os elementos estão alinhados numa direção
○ Horizontal
○ Vertical
● Os filhos podem ter pesos
LinearLayout
Slide 21
Slide 21 text
LinearLayout
Slide 22
Slide 22 text
LinearLayout
Slide 23
Slide 23 text
LinearLayout
Slide 24
Slide 24 text
LinearLayout
Slide 25
Slide 25 text
● Dispõe os elementos em posições relativas
○ Relativo ao pai, ou a outros elementos
○ Esquerda ou direita, cima ou baixo
● Permite ‘achatar’ o layout, melhorando a performance
RelativeLayout
Slide 26
Slide 26 text
RelativeLayout
Slide 27
Slide 27 text
RelativeLayout
Slide 28
Slide 28 text
RelativeLayout
Slide 29
Slide 29 text
● Os elementos estão dispostos numa grelha
● Os elementos podem ocupar mais do que uma coluna ou linha
GridLayout
Slide 30
Slide 30 text
GridLayout
Slide 31
Slide 31 text
● Normalmente utilizado para ocupar uma determinada área do ecrã
● Filhos posicionados através da gravidade
● Tipicamente utilizado para colocar os Fragments
FrameLayout
Slide 32
Slide 32 text
FrameLayout
Slide 33
Slide 33 text
● Permite criar layouts grandes e complexos, com uma hierarquia plana
● Relações entre os filhos e o pai definem as posições
● Muito parecido com o RelativeLayout, mas com melhor performance
ConstraintLayout
Slide 34
Slide 34 text
ConstraintLayout
...
Slide 35
Slide 35 text
ConstraintLayout
...
Slide 36
Slide 36 text
Resolução
Slide 37
Slide 37 text
Resolução
medium resolution
(mdpi)
HTC Wildfire S
high resolution
(hdpi)
Samsung Galaxy S2
extra extra extra high resolution
(xxxhdpi)
Pixel 5
Slide 38
Slide 38 text
Resolução
medium resolution
(mdpi)
HTC Wildfire S
high resolution
(hdpi)
Samsung Galaxy S2
extra extra extra high resolution
(xxxhdpi)
Pixel 5
Slide 39
Slide 39 text
Resolução
medium resolution
(mdpi)
HTC Wildfire S
high resolution
(hdpi)
Samsung Galaxy S2
extra extra extra high resolution
(xxxhdpi)
Pixel 5
2x2 pixels
Slide 40
Slide 40 text
Resolução
medium resolution
(mdpi)
HTC Wildfire S
high resolution
(hdpi)
Samsung Galaxy S2
extra extra extra high resolution
(xxxhdpi)
Pixel 5
2x2 dp’s
Slide 41
Slide 41 text
● DP vem de density-independent pixel
○ Este valor é calculado pelo sistema consoante a resolução do vosso telemóvel
○ Devem utilizar sempre dp e não px (pixel)
○ Se usarem px vão ter diferentes comportamentos em telemóveis com diferentes resoluções
Resolução
dp’s
Slide 42
Slide 42 text
● SP vem de scale-independent pixel
○ Semelhante ao dp
○ Tem em consideração o tamanho da fonte escolhida pelo utilizador
○ Deve ser utilizado em TextView (em vez de dp/px)
Resolução
sp’s
Slide 43
Slide 43 text
Views
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
● Permite-te adicionar texto
TextView
Slide 46
Slide 46 text
TextView
Slide 47
Slide 47 text
TextView
Slide 48
Slide 48 text
TextView
textSize
Slide 49
Slide 49 text
TextView
textStyle
Slide 50
Slide 50 text
TextView
android:textColor="@color/colorPrimary"/>
textColor
Slide 51
Slide 51 text
ImageView
● Permite adicionares uma imagem e/ou cor ao ecrã
● Podes fazê-lo a partir:
○ android:src
○ android:background
Slide 52
Slide 52 text
ImageView
background
Slide 53
Slide 53 text
ImageView
scaletype
Slide 54
Slide 54 text
ImageView
scaletype
Slide 55
Slide 55 text
ImageView
scaletype
Slide 56
Slide 56 text
ImageView
scaletype
Slide 57
Slide 57 text
ImageView
scaletype
Slide 58
Slide 58 text
ImageView
scaletype
Slide 59
Slide 59 text
ImageView
src vs background
Slide 60
Slide 60 text
ImageView
src vs background
Slide 61
Slide 61 text
● Permite a interacção do utilizador
● Despoleta uma acção
Button
Slide 62
Slide 62 text
Button
Slide 63
Slide 63 text
Drawable
background
res/drawable/bg_button.xml
❓
Slide 64
Slide 64 text
Button
background
Slide 65
Slide 65 text
Button
textColor
Slide 66
Slide 66 text
Button
minWidth
Slide 67
Slide 67 text
● Permite o utilizador definir um texto específico
EditText
Slide 68
Slide 68 text
EditText
Slide 69
Slide 69 text
EditText
hint
Slide 70
Slide 70 text
EditText
hint
Slide 71
Slide 71 text
EditText
inputType
Slide 72
Slide 72 text
● Permite o utilizador ativar/desativar uma opção
Checkbox
Slide 73
Slide 73 text
Checkbox
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
Interação
Slide 77
Slide 77 text
● Clique (clickListener)
● Clique longo (longClickListener)
● Tocar/deslizar (touchListener)
● Voltar para trás (back)
Interação
Slide 78
Slide 78 text
Clique
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val bobiButton = findViewById(R.id.bobi)
bobiButton.setOnClickListener {
Toast.makeText(this, "Bobi", Toast.LENGTH_SHORT).show()
}
}
}
Slide 79
Slide 79 text
Clique longo
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val bobiButton = findViewById(R.id.bobi)
bobiButton.setOnLongClickListener {
Toast.makeText(this, "Bobi Longo", Toast.LENGTH_SHORT)
.show()
true
}
}
}
Slide 80
Slide 80 text
Tocar/deslizar
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val root = findViewById(android.R.id.content)
root.setOnTouchListener { view, motionEvent ->
Toast.makeText(this, "x:${motionEvent.x} y:${motionEvent.y}",
Toast.LENGTH_SHORT).show()
true
}
}
}
Slide 81
Slide 81 text
Voltar para trás
class MainActivity : AppCompatActivity() {
override fun onBackPressed() {
Toast.makeText(this, "Bobi", Toast.LENGTH_SHORT).show()
}
}
Slide 82
Slide 82 text
Voltar para trás
class MainActivity : AppCompatActivity() {
...
override fun onBackPressed() {
showDialog()
}
}
Slide 83
Slide 83 text
Voltar para trás
class MainActivity : AppCompatActivity() {
...
override fun onBackPressed() {
showDialog()
}
}
Slide 84
Slide 84 text
Passaporte para
a Google
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
Decompondo
uma aplicação
Slide 87
Slide 87 text
Instagram
Status bar
Navigation bar
Slide 88
Slide 88 text
Instagram
Action bar
Custom layout
Custom layout
Custom layout
BottomNavigationView
LinearLayout
● RecyclerView
● TextView
● ImageView
Slide 89
Slide 89 text
Instagram
Action bar
EditText
RecyclerView
Custom layout
Slide 90
Slide 90 text
e… o código?
Slide 91
Slide 91 text
Trabalho Para Casa
Slide 92
Slide 92 text
Trabalho para casa
● Implementar a página inicial do Instagram
○ ActionBar
○ Histórias
○ Feed
○ BottomNavigationView
Slide 93
Slide 93 text
DogsO’gram
● Implementar a página inicial do Instagram
○ ActionBar
○ Histórias
○ Feed
○ BottomNavigationView
Slide 94
Slide 94 text
DogsO’gram
Slide 95
Slide 95 text
DogsO’gram
//..
res/menu/menu_action.xml
action bar
Slide 96
Slide 96 text
DogsO’gram
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
val inflater = menuInflater
inflater.inflate(R.menu.menu_action, menu)
return true
}
MainActivity.kt
action bar
Slide 97
Slide 97 text
DogsO’gram
res/layout/activity_main.xml
histórias
Slide 98
Slide 98 text
DogsO’gram
//..
res/layout/item_story.xml
histórias
Slide 99
Slide 99 text
DogsO’gram
res/layout/item_story.xml
histórias
Slide 100
Slide 100 text
DogsO’gram
//...
res/layout/item_feed.xml
feed
Slide 101
Slide 101 text
DogsO’gram
class SquareImageView @JvmOverloads
constructor(context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0) :
AppCompatImageView(context, attrs, defStyleAttr){
override fun onMeasure(width: Int, height: Int) =
super.onMeasure(width, width)
}
SquareImageView.kt
criar a tua implementação de um componente
Slide 102
Slide 102 text
DogsO’gram
res/layout/main_activity.xml
BottomNavigationView
Slide 103
Slide 103 text
DogsO’gram
//...
res/menu/menu_navigation.xml
BottomNavigationView
Slide 104
Slide 104 text
kahoot
Slide 105
Slide 105 text
Abre o Android
Studio e vamos
começar a
programar
Slide 106
Slide 106 text
VS
Ronda 3
Slide 107
Slide 107 text
class Dog {
companion object {
fun newDog(name: String){
return Dog(name)
}
}
}
public class Dog {
static Dog newDog(String name){
return new Dog(name);
}
...
}
Métodos estáticos
Slide 108
Slide 108 text
class Dog {
companion object {
const val TAG = “Dog”
}
}
public class Dog {
public static final String TAG = "Dog";
}
Static
Slide 109
Slide 109 text
val dog = Dog()
dog.apply {
name = "Bobi"
legs = 5
color = "Amarelo às pintinhas"
weight = 30
}
Dog dog = new Dog();
dog.name = "Bobi";
dog.legs = 5;
dog.color = "Amarelo às pintinhas"
dog.weight = 30
apply
Slide 110
Slide 110 text
fun petDog(dog: Dog, after: (Dog)-> Unit ){
println("Festas no $dog")
after(dog)
}
val bobi = Dog("Bobi")
petDog(bobi, { dog -> println("E depois $dog") })
// Festas no Dog(name=Bobi)
// E depois Dog(name=Bobi)
Funções como parâmetro
Slide 111
Slide 111 text
lateinit var dog : Dog
println(dog.name) //
dog = Dog("bobi")
println(dog.name) // ✅
lateinit
Slide 112
Slide 112 text
Sexta-Feira
negra
Photo by Xiaolong Wong on Unsplash
Slide 113
Slide 113 text
TextView
Slide 114
Slide 114 text
TextView
Slide 115
Slide 115 text
TextView
Slide 116
Slide 116 text
Limites dos layouts
Para ativar:
1. Definições
2. Sistema
3. Opções de programador
4. Mostrar limites do esquema
Slide 117
Slide 117 text
imeOptions
actionDone
Slide 118
Slide 118 text
imeOptions
actionSearch
Slide 119
Slide 119 text
imeOptions
actionGo
Slide 120
Slide 120 text
imeOptions
actionNext
Slide 121
Slide 121 text
imeOptions
actionPrevious
Slide 122
Slide 122 text
Trabalho Para Casa
Slide 123
Slide 123 text
Trabalho para casa
● Ao carregar no botão de ação do teclado
○ Validar se as credenciais estão corretas
○ Navegar para o ecrã principal
○ Terminar a LoginActivity
Slide 124
Slide 124 text
Trabalho para casa
● Mensagem de boas vindas no ecrã principal
○ Com o nome de utilizador introduzido
Slide 125
Slide 125 text
Trabalho para casa
● O utilizador consegue ver toda a informação no ecrã
○ Desliza o dedo sobre o ecrã
○ O resto do conteúdo passa a ser visível
Slide 126
Slide 126 text
Dúvidas?
Slide 127
Slide 127 text
Continuamos a
responder no
discord
Slide 128
Slide 128 text
Obrigado
♀
Slide 129
Slide 129 text
Android
Training
Program
PORTUGAL
Aula #4
Fundações III
Próxima aula: 11 de Novembro