Android Training Program - Portugal, Aula 3

Aula #3: Fundações II 🏘

Como é que customizamos e embelezamos a nossa aplicação? O que acontece quando o utilizador carrega num botão?

- Layouts
- Views (TextView, ImageView, Button, etc.)
- Interação com o utilizador

Transcript

1. Android
   Training
   Program
   PORTUGAL
   Aula #3
   Fundações II
   

   View Slide

2. ● 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
   

   View Slide

3. Andres-Leonardo
   Martinez-Ortiz
   Google
   Carlos Mota
   Formador
   Renato Almeida
   Formador
   @davilagrau @cafonsomota @tallnato
   Equipa
   Daniela Ferreira
   Gestora de
   comunidades
   

   View Slide

4. ● 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
   

   View Slide

5. #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
   ✅ ✅
   

   View Slide

6. 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
   

   View Slide

7. http://events.withgoogle.com/atp2020
   ✉ atp-suporte@googlegroups.com
   http://bit.ly/atp2020-youtube
   http://bit.ly/atp2020-discord
   Links
   

   View Slide

8. http://bit.ly/atp2020-live
   

   View Slide

9. http://bit.ly/atp2020-codelabs
   

   View Slide

10. http://bit.ly/kahoot-aula3
    

    View Slide

11. Resumo da Aula #2
    
    

    View Slide

12. AndroidManifest.xml
    xmlns:android="http://schemas.android.com/apk/res/android"
    package="pt.atp.bobi">
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/Theme.Bobi">
    ...
    
    
    

    View Slide

13. Activity
    

    View Slide

14. Fragment
    

    View Slide

15. Intents
    +351990000001
    

    View Slide

16. Navegação
    

    View Slide

17. Aula #3
    
    

    View Slide

18. Layouts
    

    View Slide

19. ● Descreve a interface gráfica
    ● Tipicamente declarado num XML, mas pode ser construído programaticamente
    Layouts
    

    View Slide

20. ● Os elementos estão alinhados numa direção
    ○ Horizontal
    ○ Vertical
    ● Os filhos podem ter pesos
    LinearLayout
    

    View Slide

21. LinearLayout
    android:orientation="horizontal">
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Bobi" />
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Max" />
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Rex" />
    
    

    View Slide

22. LinearLayout
    android:orientation="horizontal">
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Bobi" />
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Max" />
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Rex" />
    
    

    View Slide

23. LinearLayout
    android:orientation="vertical">
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Bobi" />
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Max" />
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Rex" />
    
    
    

    View Slide

24. LinearLayout
    android:orientation="vertical">
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Bobi" />
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Max" />
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Rex" />
    
    

    View Slide

25. ● 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
    

    View Slide

26. RelativeLayout
    
    android:id="@+id/bobi"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
    android:id="@+id/rex"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_below="@id/bobi"
    android:layout_alignParentStart="true"
    android:layout_toStartOf="@+id/max" />
    android:id="@id/max"
    android:layout_width="96dp"
    android:layout_height="wrap_content"
    android:layout_below="@id/bobi"
    android:layout_alignParentEnd="true" />
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/max"
    android:layout_centerHorizontal="true" />
    
    
    
    
    

    View Slide

27. 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:text="Bobi" />
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/bobi"
    android:layout_alignStart="@id/bobi"
    android:text="Rex" />
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/rex"
    android:layout_alignStart="@id/rex"
    android:text="Luna" />
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/luna"
    android:layout_alignStart="@id/luna"
    android:text="Max" />
    
    RelativeLayout
    

    View Slide

28. 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:text="Bobi" />
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/bobi"
    android:layout_alignStart="@id/bobi"
    android:text="Rex" />
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/rex"
    android:layout_alignStart="@id/rex"
    android:text="Luna" />
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/luna"
    android:layout_alignStart="@id/luna"
    android:text="Max" />
    
    RelativeLayout
    

    View Slide

29. ● Os elementos estão dispostos numa grelha
    ● Os elementos podem ocupar mais do que uma coluna ou linha
    GridLayout
    

    View Slide

30. GridLayout
    android:columnCount="3">
    android:layout_row="0"
    android:layout_column="0"
    android:text="Bobi" />
    android:layout_row="0"
    android:layout_column="1"
    android:text="Rex" />
    android:layout_row="0"
    android:layout_rowSpan="2"
    android:layout_column="2"
    android:layout_gravity="fill_vertical"
    android:text="Luna" />
    android:layout_row="1"
    android:layout_column="0"
    android:layout_columnSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="Max" />
    
    
    
    
    
    

    View Slide

31. ● Normalmente utilizado para ocupar uma determinada área do ecrã
    ● Filhos posicionados através da gravidade
    ● Tipicamente utilizado para colocar os Fragments
    FrameLayout
    

    View Slide

32. FrameLayout
    
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Bobi" />
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="Rex" />
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center|bottom"
    android:text="Luna" />
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top|end"
    android:text="Max" />
    
    
    
    
    

    View Slide

33. ● 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
    

    View Slide

34. ConstraintLayout
    
    android:id="@+id/bobi"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Bobi" />
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Rex"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />
    ...
    
    

    View Slide

35. ConstraintLayout
    ...
    android:id="@+id/luna"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Luna"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Max"
    app:layout_constraintBottom_toTopOf="@+id/luna"
    app:layout_constraintEnd_toStartOf="@+id/luna" />
    
    
    
    

    View Slide

36. Resolução
    
    

    View Slide

37. Resolução
    medium resolution
    (mdpi)
    HTC Wildfire S
    high resolution
    (hdpi)
    Samsung Galaxy S2
    extra extra extra high resolution
    (xxxhdpi)
    Pixel 5
    

    View Slide

38. Resolução
    medium resolution
    (mdpi)
    HTC Wildfire S
    high resolution
    (hdpi)
    Samsung Galaxy S2
    extra extra extra high resolution
    (xxxhdpi)
    Pixel 5
    

    View Slide

39. Resolução
    medium resolution
    (mdpi)
    HTC Wildfire S
    high resolution
    (hdpi)
    Samsung Galaxy S2
    extra extra extra high resolution
    (xxxhdpi)
    Pixel 5
    2x2 pixels
    

    View Slide

40. 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
    

    View Slide

41. ● 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
    

    View Slide

42. ● 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
    

    View Slide

43. Views
    
    

    View Slide

44. View Slide

45. ● Permite-te adicionar texto
    TextView
    

    View Slide

46. TextView
    
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:text="@string/say_hello"/>
    

    View Slide

47. TextView
    
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:text="@string/say_hello"/>
    

    View Slide

48. TextView
    
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:text="@string/say_hello"
    android:textSize="21sp"/>
    textSize
    

    View Slide

49. TextView
    
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:text="@string/say_hello"
    android:textSize="21sp"
    android:textStyle="bold"/>
    textStyle
    

    View Slide

50. TextView
    
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:text="@string/say_hello"
    android:textSize="21sp"
    android:textStyle="bold"/>
    android:textColor="@color/colorPrimary"/>
    textColor
    

    View Slide

51. ImageView
    ● Permite adicionares uma imagem e/ou cor ao ecrã
    ● Podes fazê-lo a partir:
    ○ android:src
    ○ android:background
    

    View Slide

52. ImageView
    background
    
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/android_logo"/>
    

    View Slide

53. ImageView
    
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitCenter"
    android:src="@drawable/android_logo"/>
    
    scaletype
    

    View Slide

54. ImageView
    
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitCenter"
    android:src="@drawable/android_logo"/>
    
    scaletype
    

    View Slide

55. ImageView
    
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitXY"
    android:src="@drawable/android_logo"/>
    scaletype
    

    View Slide

56. ImageView
    
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitEnd"
    android:src="@drawable/android_logo"/>
    scaletype
    

    View Slide

57. ImageView
    
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitStart"
    android:src="@drawable/android_logo"/>
    scaletype
    

    View Slide

58. ImageView
    
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:src="@drawable/android_logo"/>
    scaletype
    

    View Slide

59. ImageView
    
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitCenter"
    android:src="@drawable/android_logo"
    android:background="@color/colorPrimary"/>
    src vs background
    

    View Slide

60. ImageView
    
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitCenter"
    android:src="@color/colorPrimary"
    android:background="@drawable/android_logo"/>
    src vs background
    

    View Slide

61. ● Permite a interacção do utilizador
    ● Despoleta uma acção
    Button
    

    View Slide

62. Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="25dp"
    android:text="@string/app_name"/>
    

    View Slide

63. Drawable
    
    android:shape="rectangle">
    
    android:topRightRadius="25dp"
    android:topLeftRadius="25dp"
    android:bottomRightRadius="25dp"
    android:bottomLeftRadius="25dp"/>
    
    background
    res/drawable/bg_button.xml
    ❓
    

    View Slide

64. Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="25dp"
    android:text="@string/app_name"
    android:background="@drawable/bg_button"/>
    background
    

    View Slide

65. Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="25dp"
    android:text="@string/app_name"
    android:textColor="@android:color/white"
    android:background="@drawable/bg_button"/>
    textColor
    

    View Slide

66. Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="125dp"
    android:layout_marginTop="25dp"
    android:text="@string/app_name"
    android:textColor="@android:color/white"
    android:background="@drawable/bg_button"/>
    minWidth
    

    View Slide

67. ● Permite o utilizador definir um texto específico
    EditText
    

    View Slide

68. EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="25dp"/>
    

    View Slide

69. EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="25dp"
    android:hint="@string/hint_username"/>
    hint
    

    View Slide

70. EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="25dp"
    android:hint="@string/hint_username"/>
    hint
    

    View Slide

71. EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="25dp"
    android:hint="@string/hint_username"
    android:inputType="number"/>
    inputType
    

    View Slide

72. ● Permite o utilizador ativar/desativar uma opção
    Checkbox
    

    View Slide

73. Checkbox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end"
    android:text="@string/action_save_credentials"/>
    

    View Slide

74. View Slide

75. View Slide

76. Interação
    
    

    View Slide

77. ● Clique (clickListener)
    ● Clique longo (longClickListener)
    ● Tocar/deslizar (touchListener)
    ● Voltar para trás (back)
    Interação
    

    View Slide

78. 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()
    }
    }
    }
    

    View Slide

79. 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
    }
    }
    }
    

    View Slide

80. 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
    }
    }
    }
    

    View Slide

81. Voltar para trás
    class MainActivity : AppCompatActivity() {
    override fun onBackPressed() {
    Toast.makeText(this, "Bobi", Toast.LENGTH_SHORT).show()
    }
    }
    

    View Slide

82. Voltar para trás
    class MainActivity : AppCompatActivity() {
    ...
    override fun onBackPressed() {
    showDialog()
    }
    }
    

    View Slide

83. Voltar para trás
    class MainActivity : AppCompatActivity() {
    ...
    override fun onBackPressed() {
    showDialog()
    }
    }
    

    View Slide

84. Passaporte para
    a Google
    

    View Slide

85. View Slide

86. Decompondo
    uma aplicação
    
    

    View Slide

87. Instagram
    Status bar
    Navigation bar
    

    View Slide

88. Instagram
    Action bar
    Custom layout
    Custom layout
    Custom layout
    BottomNavigationView
    LinearLayout
    ● RecyclerView
    ● TextView
    ● ImageView
    

    View Slide

89. Instagram
    Action bar
    EditText
    RecyclerView
    Custom layout
    

    View Slide

90. 
    e… o código?
    

    View Slide

91. Trabalho Para Casa
    ‍‍
    

    View Slide

92. Trabalho para casa
    ● Implementar a página inicial do Instagram
    ○ ActionBar
    ○ Histórias
    ○ Feed
    ○ BottomNavigationView
    

    View Slide

93. DogsO’gram
    ● Implementar a página inicial do Instagram
    ○ ActionBar
    ○ Histórias
    ○ Feed
    ○ BottomNavigationView
    

    View Slide

94. DogsO’gram
    

    View Slide

95. DogsO’gram
    
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android" >
    android:id="@+id/action_photo"
    android:orderInCategory="100"
    android:icon="@drawable/ic_camera"
    android:title="@string/action_camera"
    app:showAsAction="always"
    tools:ignore="AlwaysShowAction"/>
    android:id="@+id/action_live"
    android:orderInCategory="100"
    android:icon="@drawable/ic_live"
    android:title="@string/action_live"
    app:showAsAction="always"
    tools:ignore="AlwaysShowAction" />
    //..
    res/menu/menu_action.xml
    action bar
    

    View Slide

96. DogsO’gram
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    val inflater = menuInflater
    inflater.inflate(R.menu.menu_action, menu)
    return true
    }
    MainActivity.kt
    action bar
    

    View Slide

97. DogsO’gram
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:orientation="horizontal">
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="@string/stories"/>
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="0"
    android:text="@string/watch_all"
    android:textSize="15sp"
    android:fontFamily="sans-serif"
    app:drawableLeftCompat="@drawable/ic_play" />
    
    res/layout/activity_main.xml
    histórias
    

    View Slide

98. DogsO’gram
    
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="8dp"
    android:orientation="vertical" >
    //..
    
    res/layout/item_story.xml
    histórias
    

    View Slide

99. DogsO’gram
    
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="8dp"
    android:orientation="vertical" >
    android:id="@+id/iv_user_image"
    android:layout_width="75dp"
    android:layout_height="75dp"
    android:contentDescription="@string/description_user_story"
    android:scaleType="centerCrop"
    android:background="@drawable/circle"
    android:src="@drawable/alan_king_unsplash"/>
    android:id="@+id/tv_user_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/app_name"
    android:textSize="15sp"
    android:textStyle="bold"
    android:fontFamily="sans-serif"/>
    
    res/layout/item_story.xml
    histórias
    

    View Slide

100. DogsO’gram
     
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical">
     //...
     android:id="@+id/iv_image"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginTop="8dp"
     android:contentDescription="@string/description_feed_photo"
     android:scaleType="centerCrop"
     android:src="@drawable/alan_king_unsplash"/>
     
     res/layout/item_feed.xml
     feed
     

     View Slide

101. 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
     

     View Slide

102. DogsO’gram
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_alignParentBottom="true"
     android:background="?android:attr/windowBackground"
     app:menu="@menu/menu_navigation" />
     res/layout/main_activity.xml
     BottomNavigationView
     

     View Slide

103. DogsO’gram
     
     
     android:id="@+id/nav_home"
     android:icon="@drawable/ic_home"
     android:title="@string/navigation_home" />
     android:id="@+id/nav_search"
     android:icon="@drawable/ic_search"
     android:title="@string/navigation_search" />
     android:id="@+id/nav_more"
     android:icon="@drawable/ic_more"
     android:title="@string/navigation_more" />
     //...
     
     res/menu/menu_navigation.xml
     BottomNavigationView
     

     View Slide

104. kahoot
     
     

     View Slide

105. Abre o Android
     Studio e vamos
     começar a
     programar
     ‍‍
     

     View Slide

106. VS
     Ronda 3
     

     View Slide

107. 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
     

     View Slide

108. class Dog {
     companion object {
     const val TAG = “Dog”
     }
     }
     public class Dog {
     public static final String TAG = "Dog";
     }
     Static
     

     View Slide

109. 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
     

     View Slide

110. 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
     

     View Slide

111. lateinit var dog : Dog
     println(dog.name) //
     dog = Dog("bobi")
     println(dog.name) // ✅
     lateinit
     

     View Slide

112. Sexta-Feira
     negra
     Photo by Xiaolong Wong on Unsplash
     

     View Slide

113. TextView
     
     
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:gravity="center">
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="@string/say_hello"
     android:textSize="21sp"
     android:textStyle="bold"
     android:textColor="@color/colorPrimary"
     app:drawableLeftCompat="@drawable/ic_favorite"/>
     
     

     View Slide

114. TextView
     
     
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:gravity="center">
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="@string/say_hello"
     android:textSize="21sp"
     android:textStyle="bold"
     android:textColor="@color/colorPrimary"
     app:drawableLeftCompat="@drawable/ic_favorite"/>
     
     

     View Slide

115. TextView
     
     
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:gravity="center">
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="@string/say_hello"
     android:textSize="21sp"
     android:textStyle="bold"
     android:textColor="@color/colorPrimary"
     app:drawableLeftCompat="@drawable/ic_favorite"
     app:drawableRightCompat="@drawable/ic_favorite"
     app:drawableTopCompat="@drawable/ic_favorite"
     app:drawableBottomCompat="@drawable/ic_favorite"/>
     
     

     View Slide

116. Limites dos layouts
     
     Para ativar:
     1. Definições
     2. Sistema
     3. Opções de programador
     4. Mostrar limites do esquema
     

     View Slide

117. imeOptions
     actionDone
     
     android:id="@+id/bobi"
     android:layout_width="200dp"
     android:layout_height="wrap_content"
     android:backgroundTint="@color/red"
     android:inputType="text"
     android:imeOptions="actionDone"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent" />
     
     

     View Slide

118. imeOptions
     actionSearch
     
     android:id="@+id/bobi"
     android:layout_width="200dp"
     android:layout_height="wrap_content"
     android:backgroundTint="@color/red"
     android:inputType="text"
     android:imeOptions="actionSearch"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent" />
     
     

     View Slide

119. imeOptions
     actionGo
     
     android:id="@+id/bobi"
     android:layout_width="200dp"
     android:layout_height="wrap_content"
     android:backgroundTint="@color/red"
     android:inputType="text"
     android:imeOptions="actionGo"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent" />
     
     

     View Slide

120. imeOptions
     actionNext
     
     android:id="@+id/bobi"
     android:layout_width="200dp"
     android:layout_height="wrap_content"
     android:backgroundTint="@color/red"
     android:inputType="text"
     android:imeOptions="actionNext"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent" />
     
     

     View Slide

121. imeOptions
     actionPrevious
     
     android:id="@+id/bobi"
     android:layout_width="200dp"
     android:layout_height="wrap_content"
     android:backgroundTint="@color/red"
     android:inputType="text"
     android:imeOptions="actionPrevious"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent" />
     
     

     View Slide

122. Trabalho Para Casa
     ‍‍
     

     View Slide

123. 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
     

     View Slide

124. Trabalho para casa
     ● Mensagem de boas vindas no ecrã principal
     ○ Com o nome de utilizador introduzido
     

     View Slide

125. 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
     

     View Slide

126. Dúvidas?
     
     

     View Slide

127. Continuamos a
     responder no
     discord
     
     

     View Slide

128. Obrigado
     ‍♀
     

     View Slide

129. Android
     Training
     Program
     PORTUGAL
     Aula #4
     Fundações III
     Próxima aula: 11 de Novembro
     

     View Slide