MDC-101 Android: noções básicas dos componentes do Material Design (MDC) (Kotlin)

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

O que são o Material Design e os componentes dele para Android?

O Material Design é um sistema para criar produtos digitais bonitos e arrojados. Ao combinar estilo, branding, interação e movimento em um conjunto consistente de princípios e componentes, as equipes de produto podem atingir o maior potencial de design.

Para aplicativos Android, os componentes do Material Design para Android (MDC Android) unem design e engenharia com uma biblioteca de componentes para criar consistência em todo o app. Conforme o sistema do Material Design evolui, esses componentes são atualizados para garantir uma implementação consistente com perfeição de pixels e adesão aos padrões de desenvolvimento de front-end do Google. Os MDC também estão disponíveis para Web, iOS e Flutter.

Neste codelab, você vai criar uma página de login usando vários componentes do MDC para Android.

O que você vai criar

Este é o primeiro de quatro codelabs que vão ensinar você a criar o app Shrine, um app de e-commerce para Android que vende roupas e artigos domésticos. Ele demonstrará como você pode personalizar componentes para refletir qualquer marca ou estilo usando os MDC do Android.

Neste codelab, você criará uma página de login para o Shrine que contém:

• Dois campos de texto: um para inserir um nome de usuário e outro para uma senha.
• Dois botões, um para "Cancelar" e outro para "Próxima"
• O nome do app (Shrine).
• A imagem do logotipo do Shrine.

Os codelabs relacionados podem ser encontrados em:

• MDC 102: estrutura e layout do Material Design
• MDC 103: temas do Material Design com cores, formas, elevação e tipo
• MDC 104: componentes avançados do Material Design

Ao final do MDC 104, você vai criar um app Android como este:

Componentes do MDC para Android neste codelab

• Campo de texto
• Botão

Neste codelab, você vai usar os componentes padrão fornecidos pelo MDC Android. Você vai aprender a personalizá-los em MDC 103: temas do Material Design usando cor, forma, elevação e tipo.

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?

Iniciante Intermediário Proficiente

2. Configurar o ambiente de desenvolvimento

Iniciar o Android Studio

Ao abrir o Android Studio, você verá uma janela com o título "Welcome to Android Studio". No entanto, se você estiver iniciando essa ferramenta pela primeira vez, siga as etapas do assistente de configuração do Android Studio com os valores padrão. O sistema pode demorar vários minutos para fazer o download e instalar os arquivos necessários, então você pode deixar o programa em execução em segundo plano enquanto acompanha a próxima seção.

Faça o download do app inicial do codelab

Faça o download do app inicial

O app inicial está localizado no diretório material-components-android-codelabs-101-starter/kotlin.

... 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 101-starter

Para mais ajuda, consulte Como clonar um repositório do GitHub (link em inglês).

Carregar o código inicial no Android Studio

1. 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 kotlin -> Temple (ou procure shrine no computador) para abrir o projeto de frete.
2. Aguarde um pouco enquanto o Android Studio cria e sincroniza o projeto, conforme mostrado nos indicadores de atividade na parte inferior da janela.
3. 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.

Adicionar dependências do projeto

O projeto precisa de uma dependência na biblioteca de suporte MDC Android. O exemplo de código transferido por download já tem essa dependência listada, mas é uma boa prática seguir as etapas abaixo para ter certeza.

1. Navegue até o arquivo build.gradle do módulo app e confira se o bloco dependencies inclui uma dependência do MDC Android:

api 'com.google.android.material:material:1.1.0-alpha06'

2. (Opcional) Se necessário, edite o arquivo build.gradle para adicionar as dependências a seguir e sincronizar o projeto.

dependencies {
    api 'com.google.android.material:material:1.1.0-alpha06'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.android.volley:volley:1.1.1'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:core:1.1.0'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}

Executar o app inicial

Confira se a configuração do build à esquerda do botão Run / Play é app. Pressione o botão verde Run / Play para criar e executar o app. Na janela Select Deployment Target, se você já tiver um dispositivo Android listado entre os dispositivos disponíveis, pule para a Etapa 8. Caso contrário, clique em Create New Virtual Device. Na tela Select Hardware, selecione um smartphone, como o Pixel 2, e clique em Next. Na tela System Image, selecione uma versão recente do Android, de preferência o nível da API mais alto. Se ele não estiver instalado, clique no link Download exibido e faça o download. Clique em Next. Na tela Android Virtual Device (AVD), mantenha as configurações como estão e clique em Finish. Selecione um dispositivo Android na caixa de diálogo de destino de implantação. Clique em OK. O Android Studio cria o app, faz a implantação e o abre automaticamente no dispositivo de destino.

Se não for possível adicionar a dependência ou executar o app, resolva os problemas do ambiente para desenvolvedores antes de continuar.

Se você receber um erro INSTALL_FAILED_INVALID_APK ao criar, tente executar Build -> Clean Project no Android Studio.

Pronto. O código inicial da página de login do Shrine será executado no emulador. O nome "Shrine" e o logotipo do app serão mostrados logo abaixo dele.

Vamos analisar o código. Disponibilizamos um framework de navegação Fragment simples no exemplo de código para mostrar fragmentos e navegar entre eles.

Abra MainActivity.kt no diretório shrine -> app -> src -> main -> java -> com.google.codelabs.mdc.kotlin.shrine. Ele conterá o código a seguir:

Observação: para saber mais sobre a navegação, a criação e a manutenção de caminhos de navegação usando o Android Studio, consulte o exercício Fundamentos do Kotlin para Android 03.2: definir caminhos de navegação.

MainActivity.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment

class MainActivity : AppCompatActivity(), NavigationHost {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.shr_main_activity)

       if (savedInstanceState == null) {
           supportFragmentManager
                   .beginTransaction()
                   .add(R.id.container, LoginFragment())
                   .commit()
       }
   }

   override fun navigateTo(fragment: Fragment, addToBackstack: Boolean) {
       val transaction = supportFragmentManager
               .beginTransaction()
               .replace(R.id.container, fragment)

       if (addToBackstack) {
           transaction.addToBackStack(null)
       }

       transaction.commit()
   }
}

Essa atividade mostra o arquivo de layout R.layout.shr_main_activity, definido em shr_main_activity.xml.

Em onCreate(),, MainActivity.kt inicia uma transação Fragment para mostrar o LoginFragment. Neste codelab, vamos modificar LoginFragment. A atividade também implementa um método navigateTo(Fragment), definido em NavigationHost, que permite que qualquer fragmento navegue para outro fragmento.

Command + Click (ou Control + Click) shr_main_activity no arquivo de atividade para abrir o arquivo de layout, ou navegue até o arquivo de layout em app -> res -> layout -> shr_main_activity.xml.

Observação: se aparecer uma visualização do aplicativo em vez de um arquivo XML ao abrir o shr_main_activity.xml, alterne da guia "Design" para a guia "Text" no canto inferior esquerdo do painel. Vamos trabalhar na guia Text durante este codelab.

shr_main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity"/>

Aqui, vemos um <FrameLayout> simples, que atua como um contêiner para todos os fragmentos exibidos pela atividade.

A seguir, vamos abrir LoginFragment.kt.

LoginFragment.kt

package com.google.codelabs.mdc.kotlin.shrine

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class LoginFragment : Fragment() {

   override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment
       val view = inflater.inflate(R.layout.shr_login_fragment, container, false)

       return view
   }
}

LoginFragment infla o arquivo de layout shr_login_fragment e o exibe em onCreateView().

Agora, vamos dar uma olhada no arquivo de layout shr_login_fragment.xml para ver a aparência da página de login.

shr_login_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@color/loginPageBackgroundColor"
   tools:context=".LoginFragment">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:clipChildren="false"
       android:clipToPadding="false"
       android:orientation="vertical"
       android:padding="24dp"
       android:paddingTop="16dp">

       <ImageView
           android:layout_width="64dp"
           android:layout_height="64dp"
           android:layout_gravity="center_horizontal"
           android:layout_marginTop="48dp"
           android:layout_marginBottom="16dp"
           app:srcCompat="@drawable/shr_logo" />

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center_horizontal"
           android:layout_marginBottom="132dp"
           android:text="@string/shr_app_name"
           android:textAllCaps="true"
           android:textSize="16sp" />
   </LinearLayout>
</ScrollView>

Aqui, podemos ver um <LinearLayout> com um <ImageView> na parte de cima, representando o logotipo do Shrine.

Em seguida, há uma tag <TextView> representando o rótulo do Shrine abaixo do logotipo. O texto desse rótulo é um recurso de string chamado @string/shr_app_name. Se você clicar com Command + Click (ou Control + Click) no nome do recurso de string ou abrir app -> res -> values -> strings.xml, vai encontrar o arquivo strings.xml em que os recursos de string são definidos. Quando mais recursos de string forem adicionados no futuro, eles serão definidos aqui. Todos os recursos nesse arquivo precisam ter um prefixo shr_ para indicar que fazem parte do app Shrine.

Agora que você já conhece o código inicial, vamos implementar nosso primeiro componente.

3. Adicionar campos de texto

Para começar, vamos adicionar dois campos de texto à página de login para as pessoas digitarem o nome de usuário e a senha. Usaremos o componente campo de texto dos MDC, que inclui uma funcionalidade integrada que exibe um rótulo flutuante e mensagens de erro.

Os campos de texto do Material Design foram bastante aprimorados para oferecer mais opções de personalização para apoiar sua marca, com melhorias baseadas em uma extensa pesquisa sobre a experiência do usuário (UX) para melhorar a usabilidade e o design visual.

Saiba mais sobre os novos campos de texto no artigo (em inglês) das diretrizes do Material Design.

Adicionar o XML

Em shr_login_fragment.xml, adicione dois elementos TextInputLayout com um TextInputEditText filho dentro de <LinearLayout>, abaixo do rótulo "SHRINE" <TextView>:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_password">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

Dica: para abrir rapidamente um arquivo no Android Studio, toque duas vezes na tecla Shift para abrir uma barra de pesquisa flutuante e digite o nome do arquivo que você quer abrir.

O snippet acima representa dois campos de texto, cada um consistindo em um elemento <TextInputLayout> e um filho <TextInputEditText>. O texto de dica para cada campo de texto é especificado no atributo android:hint.

Incluímos dois novos recursos de string para o campo de texto: @string/shr_hint_username e @string/shr_hint_password. Abra strings.xml para conferir esses recursos de string.

strings.xml

<string name="shr_hint_username">Username</string>
<string name="shr_hint_password">Password</string>

Adicionar validação de entrada

Os componentes TextInputLayout oferecem funcionalidade integrada de feedback de erros.

Para mostrar o feedback de erro, faça as seguintes mudanças em shr_login_fragment.xml:

• Defina o atributo app:errorEnabled como true no elemento Senha TextInputLayout. Isso vai adicionar padding extra para a mensagem de erro abaixo do campo de texto.
• Defina o atributo android:inputType como "textPassword" no elemento Senha TextInputEditText. Isso vai ocultar o texto de entrada no campo de senha.

Com essas mudanças, os campos de texto em shr_login_fragment.xml ficarão assim:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

Agora tente executar o app. Você vai ver uma página com dois campos de texto para "Username" e "Password".

Veja a animação de etiquetas flutuantes:

Os recursos do campo de texto do MDC incluem:

• Mostrar feedback de erro integrado
• Compatibilidade com um botão de alternância para visibilidade de senhas usando app:passwordToggleEnabled
• Como oferecer a funcionalidade de texto auxiliar integrado usando app:helperText
• Como mostrar a contagem total e máxima de caracteres usando app:counterEnabled e app:counterMaxLength

4. Adicionar botões

Em seguida, adicionaremos dois botões à página de login: "Cancel" e "Next". Vamos usar o componente Botão MDC, que vem com o icônico efeito de ondulação de tinta do Material Design integrado.

Adicionar o XML

No shr_login_fragment.xml, adicione um <RelativeLayout> ao <LinearLayout>, abaixo dos elementos TextInputLayout. Em seguida, adicione dois elementos <MaterialButton> ao <RelativeLayout>.

O arquivo XML resultante vai ficar assim:

shr_login_fragment.xml

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

   <com.google.android.material.button.MaterialButton
       android:id="@+id/cancel_button"
       style="@style/Widget.MaterialComponents.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginEnd="12dp"
       android:layout_marginRight="12dp"
       android:layout_toStartOf="@id/next_button"
       android:layout_toLeftOf="@id/next_button"
       android:text="@string/shr_button_cancel" />

</RelativeLayout>

Observação: o componente MaterialButton tem um estilo padrão de um botão colorido elevado. No entanto, para este botão "Cancelar", queremos um botão não elevado e não preenchido. Para isso, aplicamos um atributo style: @style/Widget.MaterialComponents.Button.TextButton.

Pronto! Ao executar o app, uma ondulação de tinta vai aparecer quando você tocar em cada botão.

Os recursos do botão MDC incluem:

• Feedback de toque integrado (chamado de ondulação do MDC) por padrão
• Elevação padrão
• Traço e raio dos cantos personalizáveis

5. Navegar para o próximo fragmento

Por fim, vamos adicionar um código Kotlin a LoginFragment.kt para conectar o botão "PRÓXIMO" à transição para outro fragmento.

Vamos adicionar um método booleano privado isPasswordValid em LoginFragment.kt abaixo de onCreateView(), com uma lógica para determinar se a senha é válida ou não. Para esta demonstração, vamos verificar se a senha tem pelo menos oito caracteres:

LoginFragment.kt

private fun isPasswordValid(text: Editable?): Boolean {
   return text != null && text.length >= 8
}

Em seguida, adicione um listener de clique ao botão "Next", que define e limpa o erro com base no método isPasswordValid() que acabamos de criar. Em onCreateView(), esse listener de clique precisa ser colocado entre a linha de inflação e a linha return view.

Agora, vamos adicionar um listener de tecla à senha TextInputEditText para detectar eventos de tecla que limpariam o erro. Esse listener também precisa usar isPasswordValid() para verificar se a senha é válida ou não. Você pode adicionar isso diretamente abaixo do listener de clique em onCreateView().

O método onCreateView() vai ficar assim:

LoginFragment.kt

override fun onCreateView(
           inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       // Inflate the layout for this fragment.
       val view = inflater.inflate(R.layout.shr_login_fragment, container, false)

       // Set an error if the password is less than 8 characters.
       view.next_button.setOnClickListener({
           if (!isPasswordValid(password_edit_text.text!!)) {
               password_text_input.error = getString(R.string.shr_error_password)
           } else {
               // Clear the error.
               password_text_input.error = null
           }
       })

       // Clear the error once more than 8 characters are typed.
       view.password_edit_text.setOnKeyListener({ _, _, _ ->
           if (isPasswordValid(password_edit_text.text!!)) {
               // Clear the error.
               password_text_input.error = null
           }
           false
       })

       return view
   }
}

Observação: se o Android Studio encontrar erros Cannot resolve Cymbal ao escrever esse código, pressione Alt + Enter ou (Option + Return no Mac) para importar os símbolos ausentes.

Agora, podemos navegar para outro fragmento. Em onCreateView(), atualize o OnClickListener para navegar até outro fragmento quando a validação de erro for bem-sucedida. O código clickListener será semelhante a este:

LoginFragment.kt

// Set an error if the password is less than 8 characters.
view.next_button.setOnClickListener({
   if (!isPasswordValid(password_edit_text.text!!)) {
       password_text_input.error = getString(R.string.shr_error_password)
   } else {
       // Clear the error.
       password_text_input.error = null
       // Navigate to the next Fragment.
       (activity as NavigationHost).navigateTo(ProductGridFragment(), false)
   }
})

Adicionamos a linha (activity as NavigationHost).navigateTo(ProductGridFragment(), false) ao caso else do listener de clique. Essa linha chama o método navigateTo() de MainActivity para navegar até um novo fragmento, ProductGridFragment. No momento, esta é uma página vazia em que você vai trabalhar no MDC-102.

O parâmetro false em navigateTo() instrui a atividade a não adicionar o fragmento atual à backstack para que o usuário não possa retornar à tela de login usando a tecla "Voltar".

Agora, crie o app. Pressione o botão "Próxima".

Você conseguiu! Essa tela será o ponto de partida do nosso próximo codelab, o MDC-102.

6. Tudo pronto

Com a marcação XML básica e cerca de 30 linhas de Kotlin, a biblioteca Material Components para Android ajudou você a criar uma bela página de login em conformidade com as diretrizes do Material Design, além de ter uma aparência e um comportamento consistentes em todos os dispositivos.

Para acessar o app completo do MDC 101, faça o download do codelab concluído ou confira o 101-complete com git: git checkout 101-complete.

Para testar sua versão da página em relação à versão concluída, abra o projeto shrine nesse diretório com o Android Studio e execute o app.

Próximas etapas

O campo de texto e o botão são dois componentes principais da biblioteca Android MDC, mas há muito mais. Confira os outros componentes no MDC Android. Como alternativa, consulte MDC 102: estrutura e layout do Material Design para saber mais sobre a barra de apps superior, a visualização de card e o layout de grade. Agradecemos por testar os componentes do Material Design. Esperamos que tenha gostado deste codelab.

Este codelab exigiu esforço e tempo normais para ser concluído

Concordo totalmente Concordo Não concordo nem discordo Discordo Discordo totalmente

Quero continuar usando componentes do Material Design no futuro

Concordo totalmente Concordo Não concordo nem discordo Discordo Discordo totalmente