MDC-103 Android: temas do Material Design com cor, movimento e tipo (Java)

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

Nos codelabs MDC-101 e MDC-102, você usou componentes do Material Design (MDC) para criar os elementos básicos do Shrine, um app de comércio eletrônico que vende roupas e artigos domésticos. Esse app contém um fluxo do usuário que começa com uma tela de login e leva o usuário a uma tela inicial que exibe produtos.

A recente expansão do Material Design oferece aos designers e desenvolvedores uma maior flexibilidade para expressar a marca do produto. Agora você pode usar os MDC para personalizar o Shrine e refletir o estilo dele mais do que nunca.

O que você vai criar

Neste codelab, você personalizará o Shrine para refletir a marca usando:

• Cor
• Tipografia
• Elevação
• Layout

Este é o terceiro de quatro codelabs que vão guiar você na criação de um app de e-commerce chamado Shrine, que vende roupas e artigos domésticos.Os codelabs relacionados podem ser encontrados em MDC-101: noções básicas dos componentes do Material Design (MDC). MDC-102: estrutura e layout do Material Design. MDC-104: componentes avançados do Material Design. No final do MDC 104, você vai criar um app parecido com este:

Componentes e subsistemas do MDC Android usados neste codelab

• Temas
• Tipografia
• Elevação

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

Está continuando do MDC-102?

Se você concluiu o MDC-102, o código para este codelab já está pronto. Pule para a etapa 3: Mudar a cor.

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-103-starter/java. Insira cd nesse diretório antes de começar.

... 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 103-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. Navegue até o diretório em que você instalou o exemplo de código e selecione java -> santuário (ou pesquise por shrine no computador) para abrir o projeto do Shrine.
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 do Android para MDC. O exemplo de código que você baixou já deve ter essa dependência listada, mas é recomendável seguir as etapas a seguir para ter certeza.

1. Navegue até o arquivo build.gradle do módulo app e verifique se o bloco dependencies inclui uma dependência no 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), deixe as configurações como estão e clique em Finish. Selecione um dispositivo Android na caixa de diálogo de destino da 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, interrompa o ambiente para desenvolvedores e resolva os problemas dele.

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

Pronto. A página de login do Shrine será exibida no dispositivo ou emulador. Ao pressionar "Próxima", a página inicial do Shrine vai aparecer com uma barra de apps na parte de cima e uma grade de imagens de produtos abaixo.

Vamos fazer com que a barra de apps superior corresponda à marca Shrine, mudando a cor, a elevação e a tipografia.

3. Mudar a cor

Este tema de cor foi criado por um designer usando cores personalizadas, mostradas na imagem abaixo. Ele contém cores que foram selecionadas da marca do Shrine e aplicadas ao Material Theme Editor, que as usou como base para criar uma paleta mais completa. Essas cores não são das Paleta de cores do Material Design de 2014 (link em inglês).

O Material Theme Editor organizou as cores em tonalidades marcadas numericamente, incluindo as etiquetas 50, 100, 200 e assim por diante até chegar em 900 para cada cor. O Shrine usa apenas as tonalidades 50, 100 e 300 da amostra rosa e a 900 da amostra marrom.

Vamos mudar a cor da barra de apps superior para refletir esse esquema de cores.

Definir colorPrimaryDark e colorAccent

Em colors.xml, modifique as linhas a seguir. O atributo colorAccent controla a cor da barra de apps superior, entre outras coisas, e o atributo colorPrimaryDark controla a cor da barra de status.

colors.xml

<color name="colorPrimaryDark">#FBB8AC</color>
<color name="colorAccent">#FEDBD0</color>

Para usar ícones escuros na barra de status, adicione o seguinte ao Theme.Shrine, tema do app do Shrine:

styles.xml

<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>

O colors.xml e o styles.xml vão ficar assim:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="toolbarIconColor">#FFFFFF</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

Em colors.xml, adicione um novo recurso de cor textColorPrimary definido como #442C2E e atualize o atributo toolbarIconColor para fazer referência à cor textColorPrimary.

Atualize o arquivo styles.xml para definir o atributo android:textColorPrimary como a cor textColorPrimary.

Definir android:textColorPrimary em Theme.Shrine vai definir o estilo do texto em todos os elementos, incluindo a barra de apps na parte de cima e os ícones na barra de apps de cima.

Mais uma coisa: defina o atributo android:theme no estilo Widget.Shrine.Toolbar como Theme.Shrine.

Definir android:textColorPrimary em Theme.Shrine vai definir o estilo do texto em todos os elementos, incluindo a barra de apps na parte de cima e os ícones na barra de apps de cima.

O colors.xml e o styles.xml vão ficar assim:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

Crie e execute. A grade de produtos terá esta aparência:

Vamos alterar o estilo da tela de login para combinar com nosso esquema de cores.

Estilizar os campos de texto

Vamos mudar as entradas de texto na página de login para que sejam destacadas e usar cores melhores para o layout.

Adicione o seguinte recurso de cor ao seu arquivo colors.xml:

colors.xml

<color name="textInputOutlineColor">#FBB8AC</color>

Adicione dois novos estilos ao styles.xml:

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
   <item name="hintTextColor">@color/textColorPrimary</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="boxStrokeColor">@color/textInputOutlineColor</item>
</style>

<style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

Por fim, defina o atributo de estilo nos dois componentes XML TextInputLayout em shr_login_fragment.xml para o novo estilo:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_username">

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

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   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>

Estilizar as cores dos botões

Por fim, defina o estilo das cores dos botões na página de login. Adicione os estilos abaixo ao styles.xml:

styles.xml

<style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
   <item name="backgroundTint">?attr/colorPrimaryDark</item>
</style>

<style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

O estilo Widget.Shrine.Button é diferente do estilo MaterialButton padrão e muda a cor do texto e a tonalidade do plano de fundo do botão. Widget.Shrine.Button.TextButton é uma extensão do estilo MaterialButton de texto padrão e muda apenas a cor do texto.

Defina o estilo Widget.Shrine.Button no botão "Próxima" e o estilo Widget.Shrine.Button.TextButton no botão "Cancelar", da seguinte maneira:

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"
       style="@style/Widget.Shrine.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.Shrine.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>

Atualize a cor do logotipo do Shrine na página de login. Isso vai exigir uma pequena mudança no drawable vetorial, shr_logo.xml. Abra o arquivo drawable e mude a propriedade android:fillAlpha para 1. O drawable será semelhante a este:

shr_logo.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="149dp"
   android:height="152dp"
   android:tint="?attr/colorControlNormal"
   android:viewportWidth="149"
   android:viewportHeight="152">
   <path
       android:fillAlpha="1"
       android:fillColor="#DADCE0"
       android:fillType="evenOdd"
       android:pathData="M42.262,0L0,38.653L74.489,151.994L148.977,38.653L106.723,0M46.568,11.11L21.554,33.998L99.007,33.998L99.007,11.11L46.568,11.11ZM110.125,18.174L110.125,33.998L127.416,33.998L110.125,18.174ZM80.048,45.116L80.048,123.296L131.426,45.116L80.048,45.116ZM17.551,45.116L33.976,70.101L68.93,70.101L68.93,45.116L17.551,45.116ZM41.284,81.219L68.93,123.296L68.93,81.219L41.284,81.219Z"
       android:strokeWidth="1"
       android:strokeAlpha="0.4"
       android:strokeColor="#00000000" />
</vector>

Defina o atributo android:tint no logotipo <ImageView> em shr_login_fragment.xml como ?android:attr/textColorPrimary, da seguinte maneira:

shr_login_fragment.xml

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

Crie e execute. Sua tela de login ficará assim:

Observações sobre temas e cores:

• É possível personalizar a cor da sua IU para expressar melhor sua marca.
• Crie uma paleta de cores começando com duas cores (a cor primária e a secundária) com variações claras e escuras dessas cores. Ou gere paletas com a ferramenta de paleta do Material Design.
• Não se esqueça da cor usada para a tipografia.
• Verifique se o contraste da cor do texto com a cor do plano de fundo está em uma proporção acessível (3:1 para textos grandes e 4,5:1 para textos pequenos).

4. Modificar a tipografia e os estilos de etiquetas

Além das mudanças nas cores, o designer também forneceu uma tipografia específica para ser usada no site. Vamos adicionar isso à barra de apps superior também.

Estilizar a barra de apps superior

Estilize a aparência do texto da barra de apps superior de acordo com as especificações fornecidas pelo designer. Adicione o estilo de aparência de texto abaixo a styles.xml e defina a propriedade titleTextAppearance para fazer referência a esse estilo no Widget.Shrine.Toolbar.

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">@style/Theme.Shrine</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

<style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
   <item name="android:textSize">16sp</item>
</style>

O colors.xml e o styles.xml vão ficar assim:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
   <color name="textInputOutlineColor">#FBB8AC</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
       <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
       <item name="hintTextColor">@color/textColorPrimary</item>
       <item name="android:paddingBottom">8dp</item>
       <item name="boxStrokeColor">@color/textInputOutlineColor</item>
   </style>

   <style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>


   <style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
       <item name="backgroundTint">?attr/colorPrimaryDark</item>
   </style>

   <style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
       <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
   </style>

   <style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
       <item name="android:textSize">16sp</item>
   </style>

</resources>

Estilizar os rótulos

Definiremos o estilo dos rótulos do cartão de produto para que tenham a aparência de texto correta e fiquem centralizados horizontalmente no cartão.

Atualize a tipografia do rótulo de título de textAppearanceHeadline6 para textAppearanceSubtitle2 da seguinte maneira:

shr_product_card.xml

<TextView
   android:id="@+id/product_title"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="@string/shr_product_title"
   android:textAppearance="?attr/textAppearanceSubtitle2" />

Para centralizar os rótulos da imagem, modifique os rótulos <TextView> em shr_product_card.xml para definir o atributo android:textAlignment="center":

shr_product_card.xml

<LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:padding="16dp">

   <TextView
       android:id="@+id/product_title"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_title"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceSubtitle2" />

   <TextView
       android:id="@+id/product_price"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_description"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>

Crie e execute. A tela da grade de produtos terá esta aparência:

Vamos mudar a tipografia da tela de login para corresponder.

Mudar a família tipográfica da tela de login

Em styles.xml, adicione o seguinte estilo:

styles.xml

<style name="TextAppearance.Shrine.Title" parent="TextAppearance.MaterialComponents.Headline4">
   <item name="textAllCaps">true</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

Em shr_login_fragment.xml, defina o novo estilo como "SHRINE". título <TextView> (e exclua os atributos textAllCaps e textSize que estão lá):

shr_login_fragment.xml

<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:textAppearance="@style/TextAppearance.Shrine.Title" />

Crie e execute. Sua tela de login ficará assim:

Observações sobre a tipografia:

• Escolha fontes fáceis de ler para textos e tipografia pequenos, em vez de fontes de um estilo específico.
• As fontes usadas para textos e tipografia grandes precisam ser usadas para expressar ou enfatizar a marca.

5. Ajustar a elevação

Agora que você definiu o estilo da página com a cor e a tipografia específicas que combinam com o Shrine, vamos dar uma olhada nos cards que mostram os produtos do app. No momento, elas estão posicionadas em uma superfície branca, abaixo da navegação do app. Vamos dar mais ênfase aos produtos para chamar a atenção para eles.

Mudar a elevação da grade de produtos

Vamos mudar as elevações da barra de apps superior e do conteúdo para que pareça que o conteúdo está em uma página flutuando acima da barra de apps superior. Adicione o atributo app:elevation ao AppBarLayout e o atributo android:elevation aos componentes XML NestedScrollView em shr_product_grid_fragment.xml da seguinte maneira:

shr_product_grid_fragment.xml

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:elevation="0dp">

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/app_bar"
       style="@style/Widget.Shrine.Toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       app:navigationIcon="@drawable/shr_menu"
       app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   android:paddingStart="@dimen/shr_product_grid_spacing"
   android:paddingEnd="@dimen/shr_product_grid_spacing"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

   <androidx.appcompat.app.AlertController.RecycleListView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

Mudar a elevação (e a cor) do card

Você pode ajustar a elevação de cada card mudando app:cardElevation em shr_product_card.xml de 2dp para 0dp. Mude app:cardBackgroundColor para @android:color/transparent também.

shr_product_card.xml

<com.google.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:cardBackgroundColor="@android:color/transparent"
   app:cardElevation="0dp"
   app:cardPreventCornerOverlap="true">

Não perca! Você ajustou a elevação de todos os cards na página da grade de produtos.

Mudar a elevação do botão "Próxima"

Em styles.xml, adicione a seguinte propriedade ao estilo Widget.Shrine.Button:

styles.xml

<item name="android:stateListAnimator" tools:ignore="NewApi">
    @animator/shr_next_button_state_list_anim
</item>

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.

Definir android:stateListAnimator no estilo de Button define o botão "Próxima" para usar o animador fornecido.

Crie e execute. Sua tela de login ficará assim:

Observações sobre a elevação:

• Todas as superfícies e componentes do Material Design têm valores de elevação.
• A divisão entre o final de uma superfície e o começo de outra é estabelecida pelas bordas das superfícies.
• A diferença de elevação entre as superfícies pode ser expressada usando sombras ou planos de fundo escurecidos ou clareados.
• As superfícies em frente a outras normalmente têm conteúdos mais importantes.

6. Mudar o layout

Mude o layout para mostrar os cards em proporções e tamanhos diferentes, de modo que cada card tenha uma aparência única.

Usar um adaptador RecyclerView escalonado

Fornecemos um novo adaptador RecyclerView no pacote staggeredgridlayout, que exibe um layout de cartão escalonado assimétrico para rolar a tela horizontalmente. Você pode analisar esse código por conta própria, mas não vamos abordar como ele é implementado aqui.

Para usar esse novo adaptador, modifique o método onCreateView() em ProductGridFragment.java. Substitua o bloco de código depois de "configurar o RecyclerView" com o seguinte código:

ProductGridFragment.java

// Set up the RecyclerView
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 2, GridLayoutManager.HORIZONTAL, false);
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
   @Override
   public int getSpanSize(int position) {
       return position % 3 == 2 ? 2 : 1;
   }
});
recyclerView.setLayoutManager(gridLayoutManager);
StaggeredProductCardRecyclerViewAdapter adapter = new StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(getResources()));
recyclerView.setAdapter(adapter);
int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large);
int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small);
recyclerView.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));

Também será necessário fazer uma pequena mudança no product_grid_fragment.xml para remover os paddings do NestedScrollView, da seguinte maneira:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   android:elevation="6dp">

Por fim, também ajustaremos o padding do card no RecyclerView modificando ProductGridItemDecoration.java. Modifique o método getItemOffsets() do ProductGridItemDecoration.java desta maneira:

ProductGridItemDecoration.java

@Override
public void getItemOffsets(Rect outRect, View view,
                          RecyclerView parent, RecyclerView.State state) {
   outRect.left = smallPadding;
   outRect.right = largePadding;
}

Crie e execute. Os itens da grade de produtos agora estarão divididos:

7. Testar outro tema

As cores são uma maneira eficiente de expressar sua marca, e uma pequena mudança de cor pode ter um grande efeito na experiência do usuário. Para testar isso, vamos ver como o Shrine ficaria se o esquema de cores da marca fosse completamente diferente.

Modificar estilos e cores

Em styles.xml, adicione o seguinte tema novo:

styles.xml

<style name="Theme.Shrine.Autumn" parent="Theme.Shrine">
   <item name="colorPrimary">#FFCF44</item>
   <item name="colorPrimaryDark">#FD9725</item>
   <item name="colorAccent">#FD9725</item>
   <item name="colorOnPrimary">#FFFFFF</item>
   <item name="colorError">#FD9725</item>
</style>

Em AndroidManifest.xml, use este novo tema no seu app:

AndroidManifest.xml

<application
   android:allowBackup="true"
   android:icon="@mipmap/ic_launcher"
   android:label="@string/shr_app_name"
   android:roundIcon="@mipmap/ic_launcher_round"
   android:supportsRtl="true"
   android:name="com.google.codelabs.mdc.java.shrine.application.ShrineApplication"
   android:theme="@style/Theme.Shrine.Autumn">
   <activity android:name=".MainActivity">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />

           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
   </activity>
</application>

Modifique a cor do ícone da barra de ferramentas em colors.xml, conforme mostrado abaixo:

colors.xml

<color name="toolbarIconColor">#FFFFFF</color>

Em seguida, defina o atributo android:theme do estilo da barra de ferramentas para fazer referência ao tema atual usando o "?theme". em vez de codificá-lo:

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">?theme</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

Em seguida, clareie a cor do texto de dica nos campos de texto da tela de login. Adicione o atributo android:textColorHint aos campos de texto estilo:

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">
@style/TextAppearance.Shrine.TextInputLayout.HintText
</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="android:textColorHint">?attr/colorPrimaryDark</item>
</style>

Crie e execute. O novo tema deve aparecer para você visualizar.

Reverta o código alterado nesta seção antes de passar para o MDC-104.

8. Recapitulação

Agora, você já criou um app que parece seguir as especificações do seu designer.

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

Você pode testar sua versão do app em relação à versão final.

Próximas etapas

Você usou estes componentes do MDC: tema, tipografia e elevação. É possível explorar ainda mais componentes nos componentes do Catálogo MDC-Android no MDC Android.

E se o design do app planejado tiver elementos que não têm componentes na biblioteca MDC? Em MDC-104: componentes avançados do Material Design, vamos mostrar como criar componentes personalizados usando a biblioteca MDC para ter uma aparência específica.

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 Neutro Discordo Discordo totalmente