MDC-103 Android: temas do Material Design com cor, elevação e tipo (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

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 para a 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 o MDC para personalizar o Shrine e refletir o estilo único dele.

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. Ao final do MDC 104, você vai criar um app como 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)

Qual é 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/kotlin. cd para esse 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. Acesse o diretório em que você instalou o código de exemplo e selecione kotlin -> shrine (ou pesquise shrine no seu computador) para abrir o projeto de envio.
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. Se você já tiver um dispositivo Android listado entre os dispositivos disponíveis na janela Select Deployment Target, 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 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 durante a compilação, tente fazer um Build -> Clean Project no Android Studio.

Pronto. A página de login do Shrine vai aparecer no seu 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 mudar a cor, a elevação e a tipografia da barra de apps de cima para que ela combine com a marca do Shrine.

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 de cima 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, o tema do app Shrine:

styles.xml

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

Dica: é necessário importar o namespace tools na tag <resource>, conforme mostrado abaixo:

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

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 à cor textColorPrimary que acabamos de definir.

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

A definição de android:textColorPrimary em Theme.Shrine vai estilizar o texto em todos os elementos, incluindo a barra de apps na parte de cima e os ícones nela.

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. Sua grade de produtos vai ficar assim:

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

Dar estilo aos campos de texto

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

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

colors.xml

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

Adicione dois novos estilos no 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 seguintes estilos 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 vai ficar assim:

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>

Em seguida, defina o atributo android:tint no logotipo <ImageView> em shr_login_fragment.xml como ?android:attr/textColorPrimary, conforme mostrado abaixo:

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 de cor, o designer também forneceu uma tipografia específica para usar no site. Vamos adicionar isso à barra de apps superior também.

Dar estilo à barra de apps na parte de cima

Estilize a aparência do texto da barra de apps superior de acordo com as especificações fornecidas pelo designer. Adicione o seguinte estilo de aparência de texto a styles.xml e defina a propriedade titleTextAppearance para fazer referência a esse estilo no estilo 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

Vamos estilizar os rótulos do card do produto para usar a aparência correta do texto e centralizá-los horizontalmente no card.

Atualize a tipografia do rótulo do 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 para o título "SHRINE" <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 cores e tipografia específicas para combinar com o Shrine, vamos dar uma olhada nos cards que mostram os produtos no app. No momento, eles são colocados em uma superfície branca abaixo da navegação do app. Para chamar a atenção para os produtos, vamos dar mais ênfase a eles.

Mudar a elevação da grade de produtos

Para que pareça que o conteúdo está em uma página flutuando acima da barra de apps superior, mude as elevações dessa barra. 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.recyclerview.widget.RecyclerView
       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

Ajuste a elevação de cada card mudando a 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.android.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 symbol ao escrever esse código, pressione Alt + Enter ou (Option + Return no Mac) para importar os símbolos ausentes.

A definição de android:stateListAnimator no estilo de Button faz com que o botão "Próxima" use 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

Vamos mudar o layout para mostrar os cards em proporções e tamanhos diferentes, de modo que cada card seja diferente dos outros.

Usar um adaptador RecyclerView escalonado

Disponibilizamos um novo adaptador RecyclerView para você no pacote staggeredgridlayout, que exibe um layout de cartão escalonado assimétrico para rolagem horizontal. 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.kt. Substitua o bloco de código após o comentário "configurar o RecyclerView" pelo seguinte:

ProductGridFragment.kt

// Set up the RecyclerView
view.recycler_view.setHasFixedSize(true)
val gridLayoutManager = GridLayoutManager(context, 2, RecyclerView.HORIZONTAL, false)
gridLayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
   override fun getSpanSize(position: Int): Int {
       return if (position % 3 == 2) 2 else 1
   }
}
view.recycler_view.layoutManager = gridLayoutManager
val adapter = StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(resources))
view.recycler_view.adapter = adapter
val largePadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large)
val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small)
view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

Também será necessário fazer uma pequena mudança no shr_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.kt. Modifique o método getItemOffsets() do ProductGridItemDecoration.kt desta maneira:

ProductGridItemDecoration.kt

override fun getItemOffsets(outRect: Rect, view: View,
                           parent: RecyclerView, state: RecyclerView.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 conferir como o Shrine seria se o esquema de cores da marca fosse completamente diferente.

Modificar estilos e cores

Em styles.xml, adicione o seguinte tema:

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.kotlin.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 referenciar o tema atual usando o atributo "?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 ao estilo dos campos de texto:

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 vai 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.

É possível testar sua versão do app em relação à versão concluída.

Próximas etapas

Você já usou os seguintes componentes do MDC: tema, tipografia e elevação. Você pode explorar mais componentes e subsistemas na [biblioteca Web MDC].

E se o design do app planejado tiver elementos que não têm componentes na biblioteca MDC? No codelab MDC-104: componentes avançados do Material Design, vamos mostrar como criar componentes personalizados usando a biblioteca MDC para criar 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 Não concordo nem discordo Discordo Discordo totalmente