Livro 4 - Aplicativo Previsão do Tempo

2.5. Novos componentes gráficos

No desenvolvimento do aplicativo vamos introduzir os seguintes novos componentes gráficos.

TextInputLayout

O TextInputLayout é um componente importante para melhorar a experiência do usuário ao lidar com caixas de texto (EditText) em um aplicativo Android. Ele faz parte da Android Design Support Library e tem várias funcionalidades úteis, incluindo o tratamento de dicas, animações e interações de forma elegante. Aqui estão algumas das características do TextInputLayout:

1. Dicas animadas: O TextInputLayout permite que você defina dicas para as caixas de texto (EditText) que são exibidas de maneira especial. Quando o elemento EditText recebe foco, a dica é animada e move-se para a parte superior da caixa de texto, ficando visível ao usuário. Isso ajuda o usuário a entender claramente o propósito da caixa de texto e o que deve ser inserido.

2. Visibilidade contínua: Ao contrário das dicas tradicionais que desaparecem quando o usuário começa a digitar, as dicas no TextInputLayout permanecem visíveis mesmo após o usuário começar a digitar. Isso é útil para que o usuário possa sempre se referir à dica, se necessário.

3. Espaço para erro: Além das dicas, o TextInputLayout fornece espaço para exibir mensagens de erro. Isso é útil para fornecer feedback imediato ao usuário quando ocorrem erros de validação ou entrada incorreta.

4. Personalização: Você pode personalizar o TextInputLayout para se adequar ao design do seu aplicativo, como alterar cores, fontes e tamanhos.

Aqui está um exemplo de como usar o TextInputLayout em seu layout XML:

Neste exemplo, você envolve a caixa de texto (EditText) com o TextInputLayout. A propriedade hint no TextInputLayout define a dica que será exibida animadamente.

Para exibir uma mensagem de erro, você pode usar o método setError no TextInputLayout.

O TextInputLayout é uma adição valiosa ao desenvolvimento de aplicativos Android, pois ajuda a tornar as caixas de texto mais informativas e interativas, melhorando a usabilidade e a experiência geral do usuário.

FloatActionButton

Os botões de ação flutuantes (Floating Action Buttons ou FABs) são elementos de interface de usuário que desempenham um papel importante no Material Design, um conjunto de diretrizes de design do Google para criar aplicativos Android atraentes e coesos. Aqui estão alguns pontos importantes sobre os FABs:

1. Elevação e Flutuação: Os FABs têm uma elevação maior em comparação com outros elementos da interface do usuário, criando a sensação de flutuação. Isso ajuda a destacar a ação principal que o  representa.

2. Ações Importantes: Os FABs são projetados para representar uma ação única e importante no contexto do aplicativo. Eles geralmente executam a ação primária ou mais frequente que um usuário pode realizar em uma tela.

3. Uso de Ícones: Os FABs geralmente contêm ícones em vez de texto. Isso economiza espaço na interface do usuário e torna a ação mais reconhecível visualmente.

4. Posicionamento: As diretrizes do Material Design recomendam que os FABs sejam posicionados a pelo menos 16dp das margens do dispositivo em uma tela de telefone e a pelo menos 24dp nas margens em uma tela de tablet. Isso ajuda a garantir que os FABs sejam facilmente acessíveis e não se sobreponham a outros elementos da interface do usuário.

5. Tamanho e Cores: Os FABs devem ser de um tamanho suficiente para serem facilmente tocados em dispositivos móveis. Além disso, as cores e animações dos FABs devem seguir as diretrizes de cores e animações do Material Design para criar uma experiência de usuário consistente.

6. Android Design Support Library: Os FABs foram introduzidos no Android 6.0 (API de nível 23) e estão disponíveis por meio da Android Design Support Library. Isso permite que os desenvolvedores usem FABs em versões mais antigas do Android, garantindo uma experiência consistente em diferentes dispositivos.

7. Ações Contextuais: Dependendo do contexto, os FABs podem ter ações diferentes. Por exemplo, em um aplicativo de e-mail, um FAB pode ser usado para compor um novo e-mail, enquanto em um aplicativo de câmera, o mesmo FAB pode ser usado para tirar uma foto.

No contexto do aplicativo WeatherApp, o uso de um FAB para acionar a busca das condições climáticas de uma cidade é apropriado, pois representa uma ação principal do aplicativo. Os FABs são uma parte importante do Material Design e ajudam os desenvolvedores a criar interfaces de usuário atraentes e intuitivas em aplicativos Android.

SnackBar

O Snackbar é uma componente importante no Material Design que pode ser usado para fornecer mensagens informativas e interativas aos usuários do seu aplicativo Android. Aqui estão algumas características essenciais do Snackbar:

1. Semelhante a um Toast: O Snackbar é conceitualmente semelhante a um Toast, pois exibe mensagens temporárias na tela. No entanto, ele segue as diretrizes do Material Design e oferece recursos adicionais em comparação com um Toast padrão.

2. Interativo: Uma das vantagens do Snackbar é a sua interatividade. Os usuários podem interagir com ele de várias maneiras:

   • Deslizar para descartar: Os usuários podem descartar o Snackbar rapidamente deslizando-o para fora da tela.
   • Toque para ação: Além da mensagem informativa, o Snackbar pode incluir uma ação. Quando os usuários tocam no Snackbar, a ação é acionada. Isso é útil para permitir que os usuários tomem medidas com base na mensagem exibida.

3. Tempo limitado: O Snackbar é exibido na tela por um tempo limitado e, após esse período, desaparece automaticamente. Normalmente, ele não requer intervenção do usuário para ser fechado.

4. Uso para mensagens informativas: O Snackbar é frequentemente usado para exibir mensagens curtas e informativas, como confirmações de ação, erros ou feedback. Por exemplo, você pode usar um Snackbar para confirmar que uma ação foi executada com sucesso ou para informar ao usuário que ocorreu um erro.

Aqui está um exemplo de como usar um Snackbar em seu aplicativo:

Neste exemplo:

• view: É a visualização associada ao contexto onde o Snackbar será exibido. Pode ser a raiz da atividade ou qualquer outra visualização apropriada.
• "Mensagem informativa": É a mensagem que você deseja exibir no Snackbar.
• Snackbar.LENGTH_SHORT: Define o tempo de exibição do Snackbar. Você pode usar Snackbar.LENGTH_LONG se preferir um tempo mais longo.

A ação é definida usando o método setAction, que permite especificar o texto da ação e o código a ser executado quando a ação é acionada.

Em resumo, o Snackbar é uma maneira eficaz e interativa de fornecer feedback e informações aos usuários do seu aplicativo, seguindo as diretrizes de design do Material Design. Ele é útil para melhorar a experiência do usuário e tornar o aplicativo mais informativo e envolvente.