$30 off During Our Annual Pro Sale. View Details »

Android Training Program - Portugal, Aula 3

ATP Portugal
November 04, 2020

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

ATP Portugal

November 04, 2020
Tweet

More Decks by ATP Portugal

Other Decks in Programming

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
    [email protected]
    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