Material Theme

Artículo
12/02/2021
9 minutos para leer

Material Theme es un estilo de interfaz de usuario que determina la apariencia de las vistas y actividades a partir de Android 5.0 (Lollipop). Material Theme está integrado en Android 5.0, por lo que la interfaz de usuario del sistema y las aplicaciones lo usan. Material Theme no es un "tema" en el sentido de una opción de apariencia en todo el sistema que un usuario puede elegir dinámicamente en un menú de configuración. En su lugar, tema de material se puede pensar en como un conjunto de estilos base integrados relacionados que puede usar para personalizar la apariencia de la aplicación.

Android proporciona tres tipos de tema de material:

Theme.Material – versión oscura de Material Theme; este es el tipo predeterminado en Android 5.0.
Theme.Material.Light : versión ligera del tema de material.
Theme.Material.Light.DarkActionBar : versión ligera del tema de material, pero con una barra de acciones oscura.

Aquí se muestran ejemplos de estos tipos de tema de material:

Puede derivar de Material Theme para crear su propio tema, reemplazando algunos o todos los atributos de color. Por ejemplo, puede crear un tema que se derive de , pero invalida el color de la barra de la aplicación para que coincida con el Theme.Material.Light color de la marca. También puede crear estilos de vistas individuales; Por ejemplo, puede crear un estilo para CardView que tenga esquinas más redondeadas y use un color de fondo más oscuro.

Puede usar un solo tema para toda una aplicación o puede usar temas diferentes para distintas pantallas (actividades) en una aplicación. En las capturas de pantalla anteriores, por ejemplo, una sola aplicación usa un tema diferente para cada actividad para mostrar las esquemas de color integrados. Los botones de radio cambian la aplicación a actividades diferentes y, como resultado, muestran temas diferentes.

Dado que Material Theme solo se admite en Android 5.0 y versiones posteriores, no se puede usar (ni un tema personalizado derivado de Material Theme) para temaizar la aplicación para ejecutarla en versiones anteriores de Android. Sin embargo, puede configurar la aplicación para que use Material Theme en dispositivos Android 5.0 y volver correctamente a un tema anterior cuando se ejecuta en versiones anteriores de Android (consulte la sección Compatibilidad de este artículo para obtener más información).

Requisitos

Se requiere lo siguiente para usar las nuevas características de Tema de material de Android 5.0 en aplicaciones basadas en Xamarin:

Xamarin.Android: Xamarin.Android 4.20 o posterior debe instalarse y configurarse con Visual Studio o Visual Studio para Mac.
Android SDK: Android 5.0 (API 21) o posterior debe instalarse a través del Administrador de Android SDK.
Java JDK 1.8 – JDK 1.7 se puede usar si tiene como destino específica el nivel de API 23 y versiones anteriores. JDK 1.8 está disponible en Oracle.

Para obtener información sobre cómo configurar un proyecto de aplicación de Android 5.0, consulte Configuración de una aplicación androide 5.0 Project.

Uso de los temas integrados

La manera más fácil de usar Material Theme es configurar la aplicación para que use un tema integrado sin personalización. Si no desea configurar explícitamente un tema, la aplicación tendrá como valor predeterminado Theme.Material (el tema oscuro). Si la aplicación solo tiene una actividad, puede configurar un tema en el nivel de actividad. Si la aplicación tiene varias actividades, puede configurar un tema en el nivel de aplicación para que use el mismo tema en todas las actividades, o puede asignar temas diferentes a distintas actividades. En las secciones siguientes se explica cómo configurar temas en el nivel de aplicación y en el nivel de actividad.

Theming an Application

Para configurar una aplicación completa para que use un tipo de tema de material, establezca el atributo del nodo de aplicación android:themeandroid:theme en uno de los siguientes elementos:

@android:style/Theme.Material : tema oscuro.
@android:style/Theme.Material.Light : tema claro.
@android:style/Theme.Material.Light.DarkActionBar : tema claro con barra de acciones oscuras.

En el ejemplo siguiente se configura la aplicación MyApp para usar el tema claro:

<application android:label="MyApp" 
             android:theme="@android:style/Theme.Material.Light">
</application>

Como alternativa, puede establecer el atributo de Theme aplicación Theme (o Properties.cs). Por ejemplo:

[assembly: Application(Theme="@android:style/Theme.Material.Light")]

Cuando el tema de la aplicación se establece en , todas las actividades de @android:style/Theme.Material.Light@android:style/Theme.Material.Light se mostrarán mediante Theme.Material.Light .

Theming an Activity

Para temaizar una actividad, agregue una configuración al atributo encima de la declaración de actividad y asígnela al tipo de tema de Theme[Activity] material que desea Theme usar. En el ejemplo siguiente se tema una actividad con Theme.Material.Light :

[Activity(Theme = "@android:style/Theme.Material.Light",
          Label = "MyApp", MainLauncher = true, Icon = "@drawable/icon")]

Otras actividades de esta aplicación usarán la combinación de Theme.Material colores oscuros predeterminada (o, si está configurada, la configuración del tema de la aplicación).

Uso de temas personalizados

Puede mejorar su marca mediante la creación de un tema personalizado que estilose la aplicación con los colores de la marca. Para crear un tema personalizado, defina un nuevo estilo que se derive de un tipo de tema de material integrado, reemplazando los atributos de color que desea cambiar. Por ejemplo, puede definir un tema personalizado que deriva de y cambia el color de fondo de la pantalla a Theme.Material.Light.DarkActionBar azul en lugar de blanco.

Material Theme expone los siguientes atributos de diseño para la personalización:

colorPrimary : color de la barra de la aplicación.
colorPrimaryDark : el color de la barra de estado y las barras de aplicación contextuales; normalmente se trata de una versión oscura de colorPrimary .
colorAccent : el color de los controles de interfaz de usuario, como las casillas, los botones de radio y los cuadros de texto de edición.
windowBackground : color del fondo de la pantalla.
textColorPrimary : el color del texto de la interfaz de usuario en la barra de la aplicación.
statusBarColor : color de la barra de estado.
navigationBarColor : color de la barra de navegación.

Estas áreas de pantalla se etiquetan en el diagrama siguiente:

De forma predeterminada, statusBarColor se establece en el valor de colorPrimaryDark . Puede establecer en un color sólido o puede establecerlo en para que la statusBarColor barra de estado sea @android:color/transparent transparente. La barra de navegación también se puede hacer transparente estableciendo navigationBarColor en @android:color/transparent .

Creación de un tema de aplicación personalizado

Puede crear un tema de aplicación personalizado mediante la creación y modificación de archivos en la carpeta Recursos del proyecto de aplicación. Para dar estilo a la aplicación con un tema personalizado, siga estos pasos:

Cree un colors.xml en Recursos/valores: use este archivo para definir los colores de tema personalizados. Por ejemplo, puede pegar el código siguiente en colors.xml para ayudarle a empezar a trabajar:

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <color name="my_blue">#3498DB</color>
    <color name="my_green">#77D065</color>
    <color name="my_purple">#B455B6</color>
    <color name="my_gray">#738182</color>
</resources>

Modifique este archivo de ejemplo para definir los nombres y códigos de color de los recursos de color que usará en el tema personalizado.
Cree una carpeta Resources/values-v21. En esta carpeta, cree un styles.xml archivo:

Tenga en cuenta que Resources/values-v21 es específico de Android 5.0: las versiones anteriores de Android no leerán los archivos de esta carpeta.
Agregue un resources nodo para resources y defina un nodo con el nombre del style tema personalizado. Por ejemplo, este es un styles.xml que define MyCustomTheme (derivado del estilo de tema integrado):

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <!-- Inherit from the light Material Theme -->
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Customizations go here -->
    </style>
</resources>

En este punto, una aplicación que usa MyCustomTheme mostrará el tema de acciones sin personalizaciones:
Agregue personalizaciones de colorstyles.xml definiendo los colores de los atributos de diseño que desea cambiar. Por ejemplo, para cambiar el color de la barra de la aplicación a y cambiar el color de los controles de interfaz de usuario a , agregue invalidaciones de color astyles.xmlque hacen referencia a los recursos de color my_bluemy_purplemy_purplemy_blue :

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <!-- Inherit from the light Material Theme -->
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Override the app bar color -->
        <item name="android:colorPrimary">@color/my_blue</item>
        <!-- Override the color of UI controls -->
        <item name="android:colorAccent">@color/my_purple</item>
    </style>
</resources>

Con estos cambios en su lugar, una aplicación que usa MyCustomTheme mostrará un color de barra de aplicación en y controles de interfaz de usuario en , pero usará la combinación de colores en todas las demás my_purpleTheme.Material.Light partes:

En este ejemplo, MyCustomTheme toma prestada colores de para el color de fondo, la barra de estado y los colores de texto, pero cambia el color de la barra de la aplicación a y establece el color del botón de radio en my_bluemy_purple .

Crear un estilo de vista personalizado

Android 5.0 también permite dar estilo a una vista individual. Después de crear colors.xml y styles.xml (como se describe en la sección anterior), puede agregar un estilo de vista a styles.xml. Para dar estilo a una vista individual, siga estos pasos:

Edite Resources/values-v21/styles.xml y agregue un nodo con el nombre del estilo de vista personalizado. Establezca los atributos de color personalizados para la vista dentro de este style nodo. Por ejemplo, para crear un estilo CardView personalizado que tenga esquinas más redondeadas y use como color de fondo de tarjeta, agregue un nodo astyles.xml(dentro del nodo) y configure el color de fondo y el radio de la stylestyleresources esquina:

<!-- Theme an individual view: -->
<style name="CardView.MyBlue">

    <!-- Change the background color to Xamarin blue: -->
    <item name="cardBackgroundColor">@color/my_blue</item>

    <!-- Make the corners very round: -->
    <item name="cardCornerRadius">18dp</item>
</style>

En el diseño, establezca el atributo de esa vista para que coincida con el nombre de style estilo personalizado que eligió en el paso anterior. Por ejemplo:

<android.support.v7.widget.CardView
    style="@style/CardView.MyBlue"
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:layout_gravity="center_horizontal">

En la captura de pantalla siguiente se proporciona un ejemplo del valor predeterminado (que se muestra a la izquierda) en comparación con un elemento con estilo con el tema personalizado (que se muestra a CardViewCardView la CardView.MyBlue derecha):

En este ejemplo, el personalizado se muestra con el color de fondo y un radio de esquina de CardViewmy_blue 18dp.

Compatibilidad

Para dar estilo a la aplicación para que use Material Theme en Android 5.0, pero revierta automáticamente a un estilo compatible con la bajada en versiones anteriores de Android, siga estos pasos:

Defina un tema personalizado en Resources/values-v21/styles.xml que deriva de un estilo de tema de material. Por ejemplo:

<resources>
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Your customizations go here -->
    </style>
</resources>

Defina un tema personalizado en Resources/values/styles.xml que derive de un tema anterior, pero use el mismo nombre de tema que el anterior. Por ejemplo:

<resources>
    <style name="MyCustomTheme" parent="android:Theme.Holo.Light">
        <!-- Your customizations go here -->
    </style>
</resources>

En AndroidManifest.xml, configure la aplicación con el nombre del tema personalizado. Por ejemplo:

<application android:label="MyApp" 
             android:theme="@style/MyCustomTheme">
</application>

Como alternativa, puede cambiar el estilo de una actividad específica mediante el tema personalizado:

[Activity(Label = "MyActivity", Theme = "@style/MyCustomTheme")]

Si el tema usa colores definidos en un archivo colors.xml, asegúrese de colocar este archivo en Recursos/valores (en lugar de Recursos/valores-v21)para que ambas versiones del tema personalizado puedan acceder a las definiciones de color.

Cuando la aplicación se ejecuta en un dispositivo Android 5.0, usará la definición de tema especificada en Resources/values-v21/styles.xml. Cuando esta aplicación se ejecuta en dispositivos Android anteriores, volverá automáticamente a la definición de tema especificada en Recursos/valores/styles.xml.

Para obtener más información sobre la compatibilidad de temas con versiones anteriores de Android, vea Recursos alternativos.

Resumen

En este artículo se presentó el nuevo estilo de interfaz de usuario Tema de material incluido en Android 5.0 (Lollipop). Ha descrito los tres tipos de temas de material integrados que puede usar para dar estilo a la aplicación, ha explicado cómo crear un tema personalizado para personalizar la marca de la aplicación y ha proporcionado un ejemplo de cómo temar una vista individual. Por último, en este artículo se explica cómo usar Material Theme en la aplicación mientras se mantiene la compatibilidad descendente con versiones anteriores de Android.