# \[Aula 02] Explorando a Interface do Usuário (UI) do Android

## Agenda:

* Compreendendo a relação entre UI e UX no Android.
* Decifrando o XML: a linguagem por trás dos designs.
* Os blocos de construção da UI: botões, campos de texto e imagens.
* Entendendo os layouts e como organizam seus elementos.
* Dando vida aos elementos: adicionando interatividade.

{% embed url="<https://youtu.be/WGR76qzTV6c>" %}

## 1. Introdução à UI no desenvolvimento Android

* **O que é UI?** UI, ou Interface do Usuário, refere-se aos pontos de interação entre o usuário e um dispositivo, como botões, barras de progresso e sliders.
* **UI vs UX:** Enquanto UI foca na interface, UX, ou Experiência do Usuário, refere-se à experiência total que um usuário tem ao interagir com um produto.

{% hint style="info" %}
Um bom design de UI é intuitivo e fácil de usar, enquanto uma boa UX faz o usuário sentir-se satisfeito e realizado com a interação total.
{% endhint %}

## 2. Conhecendo o XML e sua relação com a interface

* **O que é XML?** XML é uma linguagem de marcação usada para descrever a estrutura dos dados. No Android, usamos XML para definir layouts.
* **activity\_main.xml:** Este arquivo, que você explorou na aula anterior, é escrito em XML.

{% hint style="warning" %}
XML é sensível ao caso! Tenha certeza de que está usando a capitalização correta para seus elementos e atributos.
{% endhint %}

## 3. Design básico: botões, textos e imagens

* **Botões (`Button`):** Elementos clicáveis que realizam uma ação.
* **Campos de Texto (`EditText`):** Permita que os usuários insiram texto.
* **Imagens (`ImageView`):** Mostra imagens na sua aplicação.

{% hint style="info" %}
Dica: Use o atributo \`android:onClick\` em um botão para especificar a função que será chamada quando o botão for pressionado.
{% endhint %}

## 4. Layouts no Android: Linear, Relative e Constraint

* **Linear Layout:** Organiza os elementos em uma linha ou coluna.
* **Relative Layout:** Organiza os elementos em relação uns aos outros ou ao pai.
* **Constraint Layout:** É o layout mais flexível e poderoso, permitindo que você crie interfaces complexas sem aninhar vários grupos.

{% hint style="success" %}
Constraint Layout é altamente recomendado para designs modernos devido à sua flexibilidade e otimização de desempenho.
{% endhint %}