MDC-103 Android: temas do Material Design com cor, elevação e tipo (Kotlin)

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 oferecem dezenas de componentes de interface bonitos e funcionais 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 direciona 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ê vai personalizar o Shrine para refletir a marca usando:

• Cor
• Tipografia
• Elevação
• Layout

Este é o terceiro de quatro codelabs que vão ensinar você a criar o app Shrine, um app de e-commerce 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 codelab MDC 104, você criará um app como este exemplo:

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

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

Fazer 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 receber mais ajuda, consulte Como clonar um repositório do GitHub.

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 -> shrine (ou pesquise shrine no computador) para abrir o projeto Shipping.
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 MDC Android. Provavelmente, o exemplo de código transferido por download já tem essa dependência listada, mas é recomendável seguir as etapas abaixo para garantir.

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 seguintes dependências 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 Executar / Reproduzir é 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, avance 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 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 fazer uma Build -> Clean Project no Android Studio.

Pronto. A página de login do Shrine vai aparecer no dispositivo ou emulador. Quando você 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 superior para que ela corresponda à marca Shrine.

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 na parte de cima para refletir esse esquema de cores.

Definir colorPrimaryDark e colorAccent

Em colors.xml, modifique as seguintes linhas. O atributo colorAccent controla a cor da barra de apps da parte de cima, 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 a Theme.Shrine, o tema do app do Shrine:

styles.xml

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

Dica:importe o namespace das ferramentas na tag <resource>, conforme mostrado abaixo:

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

Seus colors.xml e 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 referenciar a cor textColorPrimary.

Atualize o arquivo styles.xml para definir o

ao atributo textColorPrimary que acabamos de definir.

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

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

Seus colors.xml e 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 vai ficar assim:

Vamos mudar o estilo da tela de login para corresponder ao nosso esquema de cores.

Estilizar os campos de texto

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

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

colors.xml

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

Adicione dois novos estilos ao seu 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 em ambos os 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, estilize as cores dos botões na página de login. Adicione os seguintes estilos ao seu 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 é uma extensão 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 estende o estilo texto MaterialButton 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 elemento 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, da seguinte forma:

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

Além das mudanças de 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 na parte de cima

Defina o estilo da aparência do texto da barra de apps superior para corresponder à especificação fornecida pelo designer. Adicione o seguinte estilo de aparência de texto a styles.xml e defina a propriedade titleTextAppearance para referenciar esse estilo no seu 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>

Seus colors.xml e 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 de produto para usar a aparência de texto correta e ficar centralizados horizontalmente dentro do 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 de imagem, modifique os <TextView>s de rótulo 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 vai ficar assim:

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

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 aparecem 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 fazer com que o conteúdo pareça estar em uma folha flutuando acima da barra de apps superior, mude as elevações dela. Adicione o atributo app:elevation ao seu AppBarLayout e o atributo android:elevation aos componentes XML NestedScrollView em shr_product_grid_fragment.xml da seguinte forma:

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 o app:cardElevation em shr_product_card.xml de 2dp para 0dp. Mude também o app:cardBackgroundColor para @android:color/transparent.

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.

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

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

Usar um adaptador RecyclerView escalonado

Fornecemos um novo adaptador RecyclerView no pacote staggeredgridlayout que mostra um layout de card escalonado assimétrico, projetado para rolar na horizontal. Fique à vontade para analisar esse código por conta própria, mas não vamos explicar 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 "set up the 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 padding do NestedScrollView, da seguinte forma:

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, vamos ajustar o padding do card no RecyclerView modificando ProductGridItemDecoration.kt. Modifique o método getItemOffsets() de ProductGridItemDecoration.kt da seguinte 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 precisam estar escalonados:

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 esse novo tema no seu aplicativo:

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.

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

Para acessar o app MDC 103 concluído, faça o download do codelab finalizado ou confira a versão concluída 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ê usou os seguintes componentes do MDC: tema, tipografia e elevação. Você pode conferir mais componentes e subsistemas na [biblioteca da Web do 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