MDC-103 Android: Temas de Material con color, elevación y tipo (Kotlin)

Los componentes de Material (MDC) ayudan a los desarrolladores a implementar Material Design. MDC, creado por un equipo de ingenieros y diseñadores de UX en Google, cuenta con decenas de componentes de IU atractivos y funcionales, y está disponible para Android, iOS, la Web y Flutter. material.io/develop

En los codelabs MDC-101 y MDC-102, usaste componentes de Material (MDC) a fin de compilar los aspectos básicos de una app de comercio electrónico llamada Shrine, en la que se vende ropa y artículos para el hogar. Esta app incluye un flujo de usuarios que comienza con una pantalla de acceso y lleva al usuario a la pantalla principal en la que se muestran productos.

La expansión reciente de Material Design les proporciona a los diseñadores y desarrolladores mayor flexibilidad para expresar su marca. Ahora puedes usar MDC para personalizar Shrine y reflejar su estilo único.

Qué compilarás

En este codelab, personalizarás Shrine para que refleje su marca mediante lo siguiente:

• Color
• Tipografía
• Elevación
• Diseño

Este es el tercero de 4 codelabs que te guiarán a fin de que compiles una app llamada Shrine, una app de comercio electrónico en la que se vende ropa y artículos para el hogar. Estos son los codelabs relacionados: MDC-101: Conceptos básicos sobre componentes de Material (MDC) MDC-102: Estructura y diseño de Material Design MDC-104: Componentes avanzados de Material Design Al final de MDC-104, compilarás una app con el siguiente aspecto:

Componentes y subsistemas de MDC de Android que se usan en este codelab:

• Temas
• Tipografía
• Elevación

Requisitos

• Conocimientos básicos sobre el desarrollo para Android
• Android Studio (descárgala aquí si aún no lo tienes).
• Un emulador o dispositivo Android (disponible a través de Android Studio)
• El código de muestra (consulta el siguiente paso)

¿Cómo calificarías tu nivel de experiencia con la compilación de apps para Android?

Principiante Intermedio Avanzado

¿Vienes de MDC-102?

Si completaste MDC-102, tu código debería estar listo para este codelab. Ve al paso 3: Cambia el color.

Descarga la app de inicio del codelab

Descargar app de inicio

La app de inicio se encuentra en el directorio material-components-android-codelabs-103-starter/kotlin. Asegúrate de usar cd en ese directorio antes de comenzar.

… o clónalo desde GitHub

Para clonar este codelab desde GitHub, ejecuta los siguientes comandos:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 103-starter

Obtén más ayuda: Cómo clonar un repositorio desde GitHub.

Cómo cargar el código de inicio en Android Studio

1. Una vez que finalice el asistente de configuración y aparezca la ventana Welcome to Android Studio, haz clic en Open an existing Android Studio project. Navegue al directorio en el que instaló el código de muestra y seleccione kotlin -> santuario(o busque shrine en su computadora) para abrir el proyecto de envío.
2. Espera un momento para que Android Studio compile y sincronice el proyecto, como se muestra en los indicadores de actividad de la parte inferior de la ventana de Android Studio.
3. En este punto, es posible que Android Studio genere algunos errores de compilación, ya que te faltan el SDK de Android o las herramientas de compilación, como se muestra más abajo. Sigue las instrucciones de Android Studio para instalar o actualizar estos elementos y sincronizar tu proyecto.

Cómo agregar dependencias de proyectos

El proyecto necesita una dependencia en la biblioteca de compatibilidad de MDC de Android. El código de muestra que descargaste ya debería tener esta dependencia, pero se recomienda realizar los siguientes pasos para asegurarte de que suceda.

1. Navega hasta el archivo build.gradle del módulo app y asegúrate de que el bloque dependencies incluya una dependencia en MDC para Android:

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

2. (Opcional) Si es necesario, edita el archivo build.gradle para agregar las siguientes dependencias y sincronizar el proyecto.

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

Cómo ejecutar la app de inicio

Asegúrate de que la configuración de compilación ubicada a la izquierda del botón Run/Play sea app. Presiona el botón verde Run/Play para compilar y ejecutar la app. En la ventana Select Deployment Target, si ya tienes un dispositivo Android en la lista de dispositivos disponibles, ve al Paso 8. De lo contrario, haz clic en Create New Virtual Device. En la pantalla Select Hardware, selecciona un teléfono, por ejemplo, Pixel 2, y haz clic en Next. En la pantalla System Image, selecciona una versión reciente de Android, preferentemente, el nivel de API más alto. Si no está instalada, haz clic en el vínculo Download que aparece y completa la descarga. Haga clic en Siguiente. En la pantalla Dispositivo virtual de Android (AVD), deja la configuración como está y haz clic en Finalizar. Selecciona un dispositivo Android en el cuadro de diálogo de destino de la implementación. Haga clic en OK. Android Studio compila la app, la implementa y la abre automáticamente en el dispositivo de destino.

Si no pudiste agregar la dependencia o ejecutar la app correctamente, detente y soluciona los problemas en tu entorno de desarrollador.

Si recibes un error INSTALL_fail_INVALID_APK en el momento de la compilación, prueba "Build" -> "Clean Project" en Android Studio.

¡Listo! Deberías ver la página de acceso de Shrine en tu dispositivo o emulador. Cuando presiones Siguiente, aparecerá la página principal de Shrine con una barra de la app en la parte superior y una cuadrícula de imágenes del producto debajo.

Para que la barra superior de la app coincida con la marca de Shrine, cambia su color, elevación y tipografía.

Un diseñador creó este tema con colores personalizados (consulta la imagen más abajo). Contiene colores seleccionados de la marca de Shrine que se aplicaron en Material Theme Editor, donde se expandieron para crear una paleta más completa. (Estos colores no provienen de las paletas de colores de Material de 2014).

En Material Theme Editor, se organizan por matiz y están etiquetados de forma numérica, incluidas las etiquetas 50, 100, 200, y así sucesivamente hasta el 900, de cada color. Shrine solo usa los matices 50, 100 y 300 de la muestra rosa y el 900 de la muestra marrón.

Cambiemos el color de la barra superior de la aplicación para reflejar ese esquema de colores.

Cómo configurar colorPrimaryDark y colorAccent

En colors.xml, modifica las siguientes líneas. El atributo colorAccent controla el color de la barra superior de la app, entre otras cosas, y el atributo colorPrimaryDark controla el color de la barra de estado.

colors.xml

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

Para usar íconos oscuros en la barra de estado, agrega lo siguiente al tema de la app de Theme.Shrine, Shrine:

styles.xml

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

Sugerencia: Debe importar el espacio de nombres de las herramientas en la etiqueta <resource> como se muestra a continuación:

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

Tu colors.xml y styles.xml deberían verse de la siguiente manera:

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>

En colors.xml, agrega un nuevo recurso de color textColorPrimary configurado en #442C2E y actualiza el atributo toolbarIconColor para hacer referencia al color textColorPrimary.

Actualiza tu archivo styles.xml para configurar el

al color textColorPrimary que acabamos de definir.

Una cosa más: establece el atributo android:theme del estilo Widget.Shrine.Toolbar en Theme.Shrine.

Si estableces android:textColorPrimary en Theme.Shrine, el estilo del texto se aplicará a todos los elementos, incluidas la barra superior de la aplicación y los íconos de la barra superior de la aplicación.

Tu colors.xml y styles.xml deberían verse de la siguiente manera:

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>

Compila y ejecuta. La cuadrícula de productos debería verse de la siguiente manera:

Cambiemos el estilo de la pantalla de acceso para que coincida con el esquema de colores.

Cómo aplicar estilo a los campos de texto

Cambiemos las entradas de texto de la página de acceso para destacarlas y usemos mejores colores para nuestro diseño.

Agrega el siguiente recurso de color a tu archivo colors.xml:

colors.xml

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

Agrega dos estilos nuevos en tu 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 último, configura el atributo de estilo en ambos de tus componentes XML de TextInputLayout en shr_login_fragment.xml con tu nuevo 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>

Cómo dar estilo a los colores del botón

Por último, cambia el estilo de los botones de la página de acceso. Agrega los siguientes estilos a tu 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>

El estilo Widget.Shrine.Button se extiende del estilo predeterminado MaterialButton y cambia el color del texto y el tono del fondo del botón. Widget.Shrine.Button.TextButton abarca el estilo de texto MaterialButton predeterminado y solo cambia el color del texto.

Configura el estilo de Widget.Shrine.Button en el botón Siguiente y el estilo de Widget.Shrine.Button.TextButton en el botón Cancelar, de la siguiente manera:

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>

Actualiza el color del logotipo de Shrine en la página de acceso. Esto requerirá un pequeño cambio en shr_logo.xml, la interfaz dibujable en vector. Abre el archivo del elemento de diseño y cambia la propiedad android:fillAlpha a 1. El elemento de diseño debería verse de la siguiente manera:

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>

Luego, configura el atributo android:tint del logotipo <ImageView> en shr_login_fragment.xml como ?android:attr/textColorPrimary, de la siguiente manera:

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

Compila y ejecuta. La pantalla de acceso debería verse de esta manera:

Notas sobre colores y temas:

• Puedes personalizar el color en la IU para expresar mejor tu marca.
• Crea una paleta a partir de dos colores (el primario y el secundario), con variaciones más claras y más oscuras. También puedes usar la herramienta de paletas de Material Design a fin de generar paletas.
• No olvides el color de la tipografía.
• Asegúrate de que el contraste entre el texto y el fondo tenga una proporción accesible (3:1 para tipografía grande y 4.5:1 para tipografía pequeña).

Además de los cambios de color, tu diseñador te proporcionó una tipografía específica para usar en el sitio. Agreguemos eso a la barra superior de la app.

Cómo modificar el estilo de la barra superior de la app

Cambia el estilo de la barra de la app superior para que coincida con la especificación proporcionada por el diseñador. Agrega el siguiente estilo de apariencia de texto a styles.xml y configura la propiedad titleTextAppearance para que haga referencia a este estilo en tu 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>

Tu colors.xml y styles.xml deberían verse de la siguiente manera:

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>

Cómo aplicarles estilo a las etiquetas

Estableceremos el estilo de las etiquetas de la tarjeta del producto a fin de usar la apariencia correcta del texto y para centrarlas horizontalmente en la tarjeta.

Actualiza la tipografía en tu etiqueta de título de textAppearanceHeadline6 a textAppearanceSubtitle2 de la siguiente manera:

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 centrar las etiquetas de la imagen, modifica las etiquetas <TextView> en shr_product_card.xml a fin de establecer el 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>

Compila y ejecuta. La pantalla de la cuadrícula de productos debería verse de la siguiente manera:

Cambia la tipografía de la pantalla de acceso para que coincida.

Cómo cambiar el tipo de letra de la pantalla de acceso

En styles.xml, agrega el siguiente 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>

En shr_login_fragment.xml, configura el nuevo estilo de tu título “SHRINE” <TextView> (y borra los atributos textAllCaps y textSize que están allí):

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

Compila y ejecuta. La pantalla de acceso debería verse de esta manera:

Notas sobre la tipografía:

• Cuando elijas las fuentes de texto, que se usan para las letras pequeñas o el texto del cuerpo, opta por fuentes claras, en lugar de un estilo determinado.
• Las fuentes de la pantalla, que se usan para las letras grandes y los títulos, se deben utilizar a fin de expresar o enfatizar la marca.

Ahora que aplicaste un estilo en la página con colores y tipografía específicos que combinan con Shrine, observa las tarjetas que muestran los productos de Shrine. En este momento, se encuentran en una superficie blanca debajo de la navegación de la app. Para atraer la atención a los productos, debemos darles más énfasis.

Cómo cambiar la elevación de la cuadrícula de productos

Para que parezca que el contenido está en una hoja flotante sobre la barra superior de la aplicación, cambia las elevaciones de la barra superior de la aplicación. Agrega el atributo app:elevation a tu AppBarLayout y el atributo android:elevation a tus componentes XML de NestedScrollView en shr_product_grid_fragment.xml de la siguiente manera:

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>

Cómo cambiar la elevación de la tarjeta (y el color)

Para ajustar la elevación de cada tarjeta, cambia el app:cardElevation en shr_product_card.xml de 2dp a 0dp. También cambia app:cardBackgroundColor a @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">

Disfrútalo. Ajustaste la elevación de cada tarjeta de la página de la cuadrícula del producto.

Cómo cambiar la elevación del botón Siguiente

En styles.xml, agrega la siguiente propiedad a tu estilo Widget.Shrine.Button:

styles.xml

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

Nota: Si Android Studio encuentra errores Cannot resolveAumenta cuando escribes este código, presiona Alt + Intro o, en Mac, Opción + Regresar para importar los símbolos faltantes.

Si estableces android:stateListAnimator con el estilo de Button, se establecerá el botón Siguiente para usar el animador que proporcionamos.

Compila y ejecuta. La pantalla de acceso debería verse de esta manera:

Notas sobre la elevación:

• Todas las superficies y los componentes de Material Design tienen valores de elevación.
• El límite entre el lugar donde comienza una superficie y termina otra se distingue por los bordes.
• Esta diferencia de elevación entre las superficies se puede expresar con fondos atenuados o brillosos, o bien mediante sombras.
• Las superficies que aparecen delante de otras superficies suelen incluir contenido más importante.

Cambiemos el diseño para mostrar las tarjetas en diferentes tamaños y relaciones de aspecto, de modo que cada tarjeta tenga una apariencia única.

Usa un adaptador escalonado de RecyclerView

Te proporcionamos un adaptador RecyclerView nuevo en el paquete staggeredgridlayout que muestra un diseño de tarjeta escalonado asimétrico para desplazarse horizontalmente. No dudes en profundizar en ese código, pero no veremos cómo se implementa aquí.

Para usar este adaptador nuevo, modifica tu método onCreateView() en ProductGridFragment.kt. Reemplaza el bloque de código después de configurar el comentario RecyclerView con lo siguiente:

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

Además, debemos realizar un pequeño cambio en el objeto shr_product_grid_fragment.xml para quitar los rellenos de NestedScrollView, como se indica a continuación:

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 último, modificaremos el padding de las tarjetas dentro de RecyclerView modificando ProductGridItemDecoration.kt. Modifica el método getItemOffsets() de ProductGridItemDecoration.kt de la siguiente manera:

ProductGridItemDecoration.kt;

override fun getItemOffsets(outRect: Rect, view: View,
                           parent: RecyclerView, state: RecyclerView.State?) {
   outRect.left = smallPadding
   outRect.right = largePadding
}

Compila y ejecuta. Los artículos de la cuadrícula de productos ahora deberían ser escalonados:

El color es una forma poderosa de expresar tu marca; un pequeño cambio de color puede generar un gran efecto en la experiencia del usuario. Para probarlo, observarás cómo se vería Shrine si el esquema de colores de la marca fuera completamente diferente.

Cómo modificar estilos y colores

En styles.xml, agrega el siguiente 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>

Y en AndroidManifest.xml, usa este nuevo tema en tu aplicación:

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>

Modifica el color del ícono de la barra de herramientas de colors.xml, como se muestra a continuación:

colors.xml

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

Luego, configura el atributo android:theme del estilo de nuestra barra de herramientas para hacer referencia al tema actual con el atributo &theme:,theme, en lugar de codificarlo con hard-code:

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>

A continuación, aclara el color de texto de la sugerencia en los campos de texto de la pantalla de acceso. Agrega el atributo android:textColorHint a los campos de texto (style):

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>

Compila y ejecuta. El nuevo tema debería aparecer para que puedas obtener una vista previa.

Revierte el código modificado en esta sección antes de continuar a MDC-104.

Ya creaste una app que se asemeja a las especificaciones de diseño que proporcionó el diseñador.

Para descargar la app completa de MDC 103, descarga el codelab terminado o consulta la versión completa de este codelab con git: git checkout 103-complete.

Puedes probar tu versión de la app con la versión completa.

Próximos pasos

Utilizaste los siguientes componentes de MDC: tema, tipografía y elevación. Puede explorar más componentes y subsistemas en [la biblioteca web de MDC].

¿Qué ocurre si el diseño que planificaste para tu app contiene elementos que no tienen componentes en la biblioteca de MDC? En MDC-104: Componentes avanzados de Material Design, veremos cómo crear componentes personalizados utilizando la biblioteca de MDC a fin de obtener un aspecto específico.

Pude completar este codelab con una cantidad de tiempo y esfuerzo razonables.

Totalmente de acuerdo De acuerdo Neutral En desacuerdo Totalmente en desacuerdo

Me gustaría seguir usando los componentes de Material en el futuro.

Muy de acuerdo Aceptar Neutral En desacuerdo Muy en desacuerdo