A template Empty Views Activity cria um atividade em branco e aplica o ConstrantLayout como o layout padrão, logo o arquivo activity_main.xml já está configurado para o projeto. Usaremos o editor de layout do Android Studio para adicionar os componentes desejados na tela e configurar seu posicionamento, configurando todas as restrições (constraint) necessárias. No próximo capítulo será mostrada a configuração individual de cada componente, por hora vamos apenas preparar o design inicial da tela.

Componente amountEditText

A primeira seção do aplicativo consiste no componente para entrada de dados: EditText. Esse componente faz a leitura do teclado virtual e recebe informações do usuário. Essa caixa de texto está localizada na paleta Text e possui diferentes versões para lidar com determinados tipos de dados. Ela é um componente versátil e serve para ler dados numéricos, textos, e-mail ou telefone. No caso do aplicativo MiniCalculadora vamos escolher a variação Number.

Para a configuração inicial da EditText siga os passos abaixo:

• Abra o arquivo activity_main.xml
• Remova o componente TextView("Hello World"), ele é criado automaticamente pela template
• Arraste um componente EditText do tipo Number como na imagem acima para a tela de design
• Defina a propriedade id como amountEditText

Com esses passos você adicionou corretamente o novo componente e poderia arrastar e soltar para fazer o posicionamento do elemento em qualquer parte da tela. No entanto, não lidamos com posições absolutas. Vamos usar as restrições (constraints) para posicionar o elemento no topo da tela. Para fazer isso observe o seguinte quadro do editor de layout.

Com o componente selecionado, você conseguirá visualizar na aba de atributos as restrições aplicadas a ele. Inicialmente não existe nada, mas se você clicar no botão azul de "+" isso fará o componente criar uma relação com o componente mais próximo naquela direção (top, fundo, esquerda, direta). Essas relações também podem ser criadas usando as "bolotas" na borda do componente e arrastando até outro componente.

Se você ligar o componente ao topo da tela isso criará a restrição TopOf em relação ao parent. Isso criará um layout onde o componente sempre estará localizado logo abaixo do topo da tela. O mesmo poderia ser feito com o fundo para criar um componente que sempre apareça na posição mais baixa da tela, independente do tamanho da tela do dispositivo (Nota: isso não é possível se fosse usado posições absolutas).

Observe também que é possível associar a uma restrição uma margem (distância) para afastar os componentes, não os deixar grudados ou simplesmente para apresentar uma estética mais agradável. Você pode fazer isso facilmente na janela de atributos na seção Layout. O valor da margem é apresentando em múltiplos de 8dp pois segue as recomendações do Material Design, mas se desejar você pode manualmente colocar qualquer valor.

Uma observação importante quanto as restrições é usar ao menos duas para conseguir posicionar o elemento corretamente no eixo horizontal e vertical. Assim, você pode usar duas, três ou quatro restrições de acordo com o necessário.

Para fazer o posicionamento correto do componente crie as seguintes restrições: topo, esquerda e direita com o parent. Use margem 16dp e defini a propriedade layout_width para 0dp (match constraint). Como resultado você terá a seguinte pré-visualização:

Componente amountTextView

Para o design de tela serão adicionadas várias TextViews. Ao todo serão criados seis novos elementos: amountTextView, percentTextView, tipLabelTextView, tipTextView, totalLabelTextView e totalTextView.

Adicione primeiramente o amountTextView e ajuste seu posicionamento para ficar embaixo do componente amountEditText. Crie as restrições topo, esquerda e direita e use margem16dp. Defina a propriedade layout_width para 0dp (match constraint). As propriedades devem ficar como na imagem abaixo.

Componentes percentSeekBar e percentTextView

A SeekBar, ou barra deslizante, é um widget para selecionar valores de um determinado intervalo, por padrão do valor 0 ao 100. Vamos usar a SeekBar no aplicativo para representar um taxa em porcentagem (%).

Siga os passos abaixo para adicionar os novos componente na tela:

• Arraste um componente SeekBar (aba Widget da paleta) para a tela
• Defina a propriedade id como percentSeekBar
• Arraste um componente TextView
• Defina a propriedade id como percentTextView
• Na percentSeekBar: crie uma restrição no topo para posicionar abaixo de amountTextView, crie uma restrição na direita em relação ao parent e a esquerda em relação a percentTextView. Configure todas as margens para 16dp
• Na percentTextView: crie uma restrição a esquerda em relação ao parent (margem 16dp) e uma restrição do topo ao topo da percentSeekBar (margem 0dp).
• Adicionalmente, crie uma restrição do fundo ao fundo da percentSeekBar (margem 0dp). Essa última restrição fará com que a TextView se alinhe centralizada verticalmente a barra deslizante.
• Por fim, define as propriedades layout_width para 0dp (match constraint) e layout_height (32dp) para a percentSeekBar. Isso fará com que ela ocupe toda a largura disponível na tela e aumente seu tamanho. Se você configurou corretamente as restrições acima, a percentTextView se encontrará alinhada verticalmente

Observe o resultado final na blueprint abaixo:

Componentes tipLabelTextView e tipTextView

Os próximos componentes são duas TextView e seguem um posicionamento padrão de rótulos (labels), isto é, um texto fixo na esquerda e um valor apresentado na direita. Para o posicionamento dos elementos faremos algo parecido com antes. A TextView à direita usará as restrições para ela ficar abaixo da percentSeekBar e a direita do parent. E a outra TextView se alinha verticalmente a mesma.

Siga os passos abaixo para adicionar os novos componente na tela:

• Arraste um componente TextView
• Defina a propriedade id como tipLabelTextView
• Arraste um componente TextView
• Defina a propriedade id como tipTextView
• Na tipTextView: crie uma restrição no topo para posicionar abaixo de percentSeekBar, crie uma restrição na direita em relação ao parent e a esquerda em relação a tipLabelTextView. Configure todas as margens para 16dp
• Na tipLabelTextView: crie uma restrição a esquerda em relação ao parent (margem16dp) e uma restrição do topo a tipTextView(margem 0dp). Adicionalmente, crie uma restrição do fundo ao fundo da tipTextView (margem 0dp). Essa última restrição fará com que a TextView se alinhe verticalmente quando aumentarmos o tamanho da tipTextView no próximo capítulo. No momento, o design não é muito afetado mas após as modificações no próximo capítulo você verá a diferença.
• Por fim, define as propriedades layout_width para 0dp (match constraint) na tipTextView.

Observe o resultado final na blueprint abaixo:

Componentes totalLabelTextView e totalTextView

Repita os passos anteriores e crie duas novas TextViews: totalLabelTextView e totalTextView. Siga o mesmo esquema. Use como referência a blueprint abaixo:

Design e Blueprint

Certifique-se do layout estar correto pois no próximo capítulo faremos a configuração apenas das características de cada elemento. Se você seguiu os passos corretamente, o resultado final será o seguinte desenho tela: