MDC-103 Android: temas do Material Design com cores, 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 IU 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 de usuários 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 os MDC para personalizar o Shrine e refletir o estilo exclusivo 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 ensinarão você a criar um app chamado Shrine, um app de comércio eletrônico 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ê criará um app com esta aparência:

Componentes e subsistemas do Android MDC 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 (veja 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 antes do início.

... 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. Navegue até o diretório em que você instalou o exemplo de código 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 Android MDC. O exemplo de código transferido por download já precisa ter essa dependência listada, mas recomendamos seguir as etapas abaixo para garantir isso.

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

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

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 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 nos seus 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 Próxima. 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, pare e resolva problemas do ambiente para desenvolvedores.

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

Pronto. Você verá a página de login do Shrine em execução no dispositivo ou emulador. Quando você pressionar "Próxima", a página inicial do Shrine será exibida com uma barra de apps na parte superior e uma grade de imagens de produtos abaixo.

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

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

styles.xml

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

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

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

O colors.xml e o styles.xml ficarão 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 seu arquivo styles.xml para definir o

para a cor 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 definirá o estilo do texto em todos os elementos, incluindo a barra de apps superior e os ícones dela.

O colors.xml e o styles.xml ficarão 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 alterar o estilo da tela de login para combinar com nosso esquema de cores.

Definir o estilo dos campos de texto

Vamos alterar as entradas de texto na página de login que serão delineadas e usar cores melhores no nosso layout.

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

colors.xml

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

Adicione dois novos estilos à 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>

Definir o estilo das cores do botão

Por fim, defina o estilo das cores dos botões na página de login. Adicione os seguintes estilos a 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 é estendido 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 se estende do estilo padrão de texto MaterialButton e muda apenas a cor do texto.

Defina o estilo Widget.Shrine.Button no botão "Next" e o estilo Widget.Shrine.Button.TextButton no botão "Cancel" 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 exigirá uma pequena mudança no drawable vetorial, shr_logo.xml. Abra o arquivo de drawable e altere a propriedade android:fillAlpha para 1. O drawable será semelhante a este:

shr_logo.xml (link em inglês)

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

Além das alterações de cor, o designer também forneceu uma tipografia específica para ser usada no site. Vamos adicionar isso à barra de apps superior também.

Aplicar estilo à barra de apps superior

Defina o estilo da parte superior do texto da barra do app 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 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 ficarão 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>

Aplicar estilo aos rótulos

Os estilos do rótulo do card de produto serão usados de acordo com a aparência correta do texto e serão centralizados horizontalmente no card.

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

shr_product_card.xml (link em inglês)

<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>s em shr_product_card.xml para definir o atributo android:textAlignment="center":

shr_product_card.xml (link em inglês)

<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 produto vai ficar assim:

Vamos alterar a tipografia da tela de login para corresponder.

Mudar a fonte 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.

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, elas são colocadas em uma superfície branca sob a navegação do app. Para dar atenção aos 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 página flutuando acima da barra de apps superior, mude as elevações 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.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 do cartão (e cor)

Ajuste a elevação de cada card alterando a app:cardElevation na shr_product_card.xml de 2dp para 0dp. Mude app:cardBackgroundColor para @android:color/transparent também.

shr_product_card.xml (link em inglês)

<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 cada card na página da grade de produtos.

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

Em styles.xml, adicione a seguinte propriedade ao seu 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 Não é possível resolver o símbolo 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 que fornecemos.

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 para você no pacote staggeredgridlayout, que exibe um layout de cartão escalonado de forma assimétrica, destinado à rolagem horizontal. Você pode analisar o 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() na ProductGridFragment.kt. Substitua o bloco de código após o comentário ""configurar o RecyclerView" pelo seguinte:

ProductGridFragment.kt (link em inglês)

// 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 precisaremos 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 preenchimento do cartão 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 serão 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 ver como seria o Shrine 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>

No AndroidManifest.xml, use este novo tema no 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 no colors.xml, conforme mostrado abaixo:

colors.xml

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

Em seguida, defina o atributo android:theme do nosso estilo de 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 aos 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 será exibido para você ver.

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 usar o app MDC 103 concluído, faça o download do codelab concluído 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 completa.

Próximas etapas

Você usou os seguintes componentes do MDC: tema, tipografia e elevação. Você pode ver 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, veremos como criar componentes personalizados usando a biblioteca MDC para criar uma aparência específica para o app.

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