1. Introdução
Os componentes do Material Design (MDC, na sigla em inglês) ajudam os desenvolvedores a implementar o Material Design. Criados por uma equipe de engenheiros e designers de UX do Google, os MDC apresentam dezenas de componentes de interface bonitos e funcionais e estão disponíveis para Android, iOS, Web e Flutter.material.io/develop |
Os componentes do Material Design para Android (MDC Android) não são um novo sistema ou framework que exige uma mudança de paradigma no seu app. O MDC Android é criado nas mesmas classes e APIs que você já conhece no Android, como botões e campos de texto do AppCompat. Os componentes fornecidos pelo MDC Android podem ser usados conforme necessário e melhoram imediatamente o design do seu app.
O que você vai criar
Neste codelab, você vai substituir alguns componentes atuais em um formulário por novos do MDC.
Componentes do MDC-Android neste codelab
- Campos de texto
- Botões
- Menus
O que é necessário
- Conhecimento básico de desenvolvimento para Android.
- Android Studio (faça o download dele aqui, caso ainda não tenha feito)
- Um dispositivo ou emulador Android (disponível no Android Studio)
- O exemplo de código (confira a próxima etapa)
Como você classificaria seu nível de experiência na criação de apps Android?
2. Configurar o ambiente de desenvolvimento
Faça o download do app inicial do codelab
O app inicial está localizado no diretório material-components-android-codelabs-111-starter/java. Verifique se você está nesse diretório antes de começar.cd
...ou clone-o do GitHub
Para clonar este codelab do GitHub, execute estes comandos:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 111-starter
Carregar o código inicial no Android Studio
- Quando o assistente de configuração for concluído e a janela Welcome to Android Studio for exibida, clique em Open an existing Android Studio project. Acesse o diretório em que você instalou o exemplo de código e selecione java -> shipping (ou pesquise shipping no computador) para abrir o projeto de envio.
- Aguarde um pouco enquanto o Android Studio cria e sincroniza o projeto, conforme mostrado nos indicadores de atividade na parte inferior da janela.
- Como o SDK do Android ou as ferramentas de compilação não estão presentes, o Android Studio poderá encontrar alguns erros de compilação. Veja um exemplo a seguir. Siga as instruções no Android Studio para instalar/atualizar essas ferramentas e sincronizar o projeto.
Importar o MDC-Android
Navegue até o arquivo build.gradle do módulo app e confira se o bloco dependencies inclui uma dependência no MDC Android:
api 'com.google.android.material:material:1.1.0-alpha06'
Executar o app inicial
|
|
Pronto. O app e o formulário serão exibidos.
3. Atualizar os campos de texto
Os campos de texto do Material Design têm um grande ganho de usabilidade em relação aos campos de texto simples. Ao definir a zona de toque com um contorno ou um preenchimento de plano de fundo, os usuários têm mais chances de interagir com o formulário ou identificar campos de texto em conteúdo mais complicado.
Substituir estilos de campo de texto
Em shipping_info_activity.xml, adicione o seguinte estilo a todos os componentes XML TextInputLayout:
shipping_info_activity.xml
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
Cada TextInputLayout precisa ter esta aparência:
shipping_info_activity.xml
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_text_input"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/label_name" />
</com.google.android.material.textfield.TextInputLayout>
Criar e executar:
Os campos de texto são atualizados para usar os designs mais recentes no MDC.
Adicionar um erro
Os campos de texto do MDC têm apresentação de erros integrada. O MDC adiciona texto vermelho abaixo da caixa de texto e atualiza as decorações para também serem vermelhas.
Em ShippingInfoActivity.java, atualize o método onCreate() para que ele tenha esta aparência:
ShippingInfoActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.shipping_info_activity);
View rootView = findViewById(android.R.id.content);
final List<TextInputLayout> textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout.class);
Button button = findViewById(R.id.save_button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
boolean noErrors = true;
for (TextInputLayout textInputLayout : textInputLayouts) {
String editTextString = textInputLayout.getEditText().getText().toString();
if (editTextString.isEmpty()) {
textInputLayout.setError(getResources().getString(R.string.error_string));
noErrors = false;
} else {
textInputLayout.setError(null);
}
}
if (noErrors) {
// All fields are valid!
}
}
});
}
Criar e executar. Pressione "SAVE", mas deixe pelo menos um campo de texto vazio:
Os campos de texto vazios são vermelhos e têm texto de erro abaixo deles.
4. Atualizar o botão
O MDC tem botões com:
- Ondulações de tinta
- Bordas arredondadas
- Suporte a temas
- Layout e tipografia perfeitos
- Criado no AppCompatButton (a classe de botão padrão do Android), para que você saiba como usá-los no código.
Opcionalmente, substitua a classe de botão
Por padrão, a biblioteca do Material Design infla automaticamente os botões normais para botões do MDC. No entanto, você pode substituir opcionalmente todas as referências ao botão por MaterialButton para acessar outros métodos que estão disponíveis apenas em um MaterialButton, como mudar o raio do canto. Os botões do MDC são um componente simples de plug-and-play. Basta substituir o nome do componente XML Button por MaterialButton e aplicar o estilo MaterialButton padrão ao MaterialButton.
Em shipping_info_activity.xml, mude o botão de:
shipping_info_activity.xml
<Button
android:id="@+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
Para:
shipping_info_activity.xml
<com.google.android.material.button.MaterialButton
android:id="@+id/save_button"
style="@style/Widget.MaterialComponents.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
Criar e executar:
5. Adicionar card
MaterialCardView é um componente criado no CardView com:
- Elevação e estilo corretos
- Atributos de largura e cor do traço
Conteúdo de encapsulamento em um card
Encapsule o LinearLayout que contém seu conteúdo em shipping_info_activity.xml com um componente MaterialCardView, da seguinte maneira:
shipping_info_activity.xml
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:contentPadding="16dp">
<!-- LinearLayout goes here -->
</com.google.android.material.card.MaterialCardView>
Criar e executar. O formulário inteiro precisa ser encapsulado em um card:
O componente Material Card View é uma maneira familiar, mas nova, de encapsular facilmente seu conteúdo em um card.
6. Recapitulação
Você substituiu alguns componentes comuns para mostrar valor imediato: campos de texto, botões e cards, e não precisou fazer uma reformulação completa do app. Outros componentes também podem fazer uma grande diferença, como a barra de apps superior e o TabLayout.
Próximas etapas
Para aprender sobre mais componentes no MDC-Android, acesse o catálogo de widgets do Android (link em inglês).