Tema de materialesMaterial Theme

Tema de materiales es un estilo de la interfaz de usuario que determina la apariencia de las vistas y actividades a partir de Android 5.0 (Lollipop).Material Theme is a user interface style that determines the look and feel of views and activities starting with Android 5.0 (Lollipop). Tema de materiales está integrado en Android 5.0, por lo que se usa la interfaz de usuario del sistema, así como las aplicaciones.Material Theme is built into Android 5.0, so it is used by the system UI as well as by applications. Tema de materiales no es un "tema" en el sentido de una opción de la apariencia de todo el sistema que un usuario puede elegir dinámicamente desde un menú de configuración.Material Theme is not a "theme" in the sense of a system-wide appearance option that a user can dynamically choose from a settings menu. En su lugar, Material de tema puede considerarse como un conjunto de relacionados estilos bases integrados que puede usar para personalizar la apariencia de la aplicación.Rather, Material Theme can be thought of as a set of related built-in base styles that you can use to customize the look and feel of your app.

Android proporciona tres tipos de Material tema:Android provides three Material Theme flavors:

  • Theme.Material – Versión oscuro del tema de Material; Este es el tipo predeterminado en Android 5.0.Theme.Material – Dark version of Material Theme; this is the default flavor in Android 5.0.

  • Theme.Material.Light – Versión ligera de Material de tema.Theme.Material.Light – Light version of Material Theme.

  • Theme.Material.Light.DarkActionBar – Versión ligera de tema de Material, pero con una barra de acción oscuro.Theme.Material.Light.DarkActionBar – Light version of Material Theme, but with a dark action bar.

Aquí se muestran algunos ejemplos de estos tipos de Material tema:Examples of these Material Theme flavors are displayed here:

Capturas de pantalla de ejemplo del tema oscuro, claro y tema oscuro barra de accionesExample screenshots of the Dark theme, Light theme, and Dark Action Bar theme

Puede derivar del Material de tema para crear su propio tema, reemplazar algunos o todos los atributos de color.You can derive from Material Theme to create your own theme, overriding some or all color attributes. Por ejemplo, puede crear un tema que se deriva de Theme.Material.Light, pero reemplaza el color de la barra de aplicación para que coincida con el color de su marca.For example, you can create a theme that derives from Theme.Material.Light, but overrides the app bar color to match the color of your brand. También puede aplicar estilos a las vistas individuales; Por ejemplo, puede crear un estilo para CardView que más tiene esquinas redondeadas y utiliza un color de fondo más oscuro.You can also style individual views; for example, you can create a style for CardView that has more rounded corners and uses a darker background color.

Puede usar un tema único para toda una aplicación, o puede usar los diferentes temas para diferentes pantallas (actividades) en una aplicación.You can use a single theme for an entire app, or you can use different themes for different screens (activities) in an app. En las capturas de pantalla anterior, por ejemplo, una sola aplicación usa un tema diferente para cada actividad para mostrar las combinaciones de colores integrada.In the above screenshots, for example, a single app uses a different theme for each activity to demonstrate the built-in color schemes. Botones de radio cambie la aplicación a diferentes actividades y, como resultado, muestran los diferentes temas.Radio buttons switch the app to different activities, and, as a result, display different themes.

Como Material de tema es compatible solo en Android 5.0 y versiones posteriores, no puede usar (o a un tema personalizado que deriva el Material de tema) al tema de la aplicación para que se ejecutan en versiones anteriores de Android.Because Material Theme is supported only on Android 5.0 and later, you cannot use it (or a custom theme derived from Material Theme) to theme your app for running on earlier versions of Android. Sin embargo, puede configurar la aplicación para utilizar el tema de Material en los dispositivos Android 5.0 y correctamente recurrir a un tema anterior cuando se ejecuta en versiones anteriores de Android (consulte la compatibilidad sección de este artículo para obtener más información).However, you can configure your app to use Material Theme on Android 5.0 devices and gracefully fall back to an earlier theme when it runs on older versions of Android (see the Compatibility section of this article for details).

RequisitosRequirements

Para usar las nuevas características de tema de materiales de Android 5.0 en aplicaciones basadas en Xamarin, se requiere lo siguiente:The following is required to use the new Android 5.0 Material Theme features in Xamarin-based apps:

  • Xamarin.Android – Xamarin.Android 4.20 o posterior debe estar instalado y configurado con Visual Studio o Visual Studio para Mac.Xamarin.Android – Xamarin.Android 4.20 or later must be installed and configured with either Visual Studio or Visual Studio for Mac.

  • SDK de Android – Android 5.0 (API 21) o posterior debe estar instalado a través de Android SDK Manager.Android SDK – Android 5.0 (API 21) or later must be installed via the Android SDK Manager.

  • Java JDK 1.8 – JDK 1.7 puede usarse si se está específicamente dirigidos a API nivel 23 y versiones anteriores.Java JDK 1.8 – JDK 1.7 can be used if you are specifically targetting API level 23 and earlier. Está disponible en JDK 1.8 Oracle.JDK 1.8 is available from Oracle.

Para obtener información sobre cómo configurar un proyecto de aplicación de Android 5.0, consulte configuración de un proyecto de Android 5.0.To learn how to configure an Android 5.0 app project, see Setting Up an Android 5.0 Project.

Uso de los temas integradosUsing the Built-in Themes

Es la manera más fácil de usar Material de tema configurar la aplicación para usar un tema integrado sin personalización.The easiest way to use Material Theme is to configure your app to use a built-in theme without customization. Si no desea configurar explícitamente un tema, la aplicación predeterminada será Theme.Material (el tema oscuro).If you don't want to explicitly configure a theme, your app will default to Theme.Material (the dark theme). Si la aplicación tiene sólo una actividad, puede configurar un tema en el nivel de actividad.If your app has only one activity, you can configure a theme at the activity level. Si la aplicación tiene varias actividades, puede configurar un tema en el nivel de aplicación para que usa el mismo tema en todas las actividades, o puede asignar diferentes temas para actividades diferentes.If your app has multiple activities, you can configure a theme at the application level so that it uses the same theme across all activities, or you can assign different themes to different activities. Las secciones siguientes explican cómo configurar los temas en el nivel de aplicación y en el nivel de actividad.The following sections explain how to configure themes at the app level and at the activity level.

Una aplicación de creación de temasTheming an Application

Para configurar una aplicación completa para usar un tipo de tema de Material, establezca el android:theme atributo del nodo de la aplicación en AndroidManifest.xml a uno de los siguientes:To configure an entire application to use a Material Theme flavor, set the android:theme attribute of the application node in AndroidManifest.xml to one of the following:

  • @android:style/Theme.Material – Tema oscuro.@android:style/Theme.Material – Dark theme.

  • @android:style/Theme.Material.Light – Tema claro.@android:style/Theme.Material.Light – Light theme.

  • @android:style/Theme.Material.Light.DarkActionBar – Tema claro con la barra de acciones oscuro.@android:style/Theme.Material.Light.DarkActionBar – Light theme with dark action bar.

En el ejemplo siguiente se configura la aplicación MyApp para utilizar el tema claro:The following example configures the application MyApp to use the light theme:

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

Como alternativa, puede establecer la aplicación Theme atributo AssemblyInfo.cs (o Properties.cs).Alternately, you can set the application Theme attribute in AssemblyInfo.cs (or Properties.cs). Por ejemplo:For example:

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

Cuando se establece el tema de la aplicación en @android:style/Theme.Material.Light, todas las actividades en MyApp se mostrará usando Theme.Material.Light.When the application theme is set to @android:style/Theme.Material.Light, every activity in MyApp will be displayed using Theme.Material.Light.

Una actividad de creación de temasTheming an Activity

Tema una actividad, agrega un Theme si se establece en el [Activity] atributo por encima de la declaración de la actividad y asignar Theme para el tipo de tema de Material que desee usar.To theme an activity, you add a Theme setting to the [Activity] attribute above your activity declaration and assign Theme to the Material Theme flavor that you want to use. Los siguientes temas de ejemplo una actividad con Theme.Material.Light:The following example themes an activity with Theme.Material.Light:

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

Otras actividades en esta aplicación usará el valor predeterminado Theme.Material combinación de colores oscuros (o, si ha configurado, la configuración de tema de la aplicación).Other activities in this app will use the default Theme.Material dark color scheme (or, if configured, the application theme setting).

Uso de temas personalizadosUsing Custom Themes

Puede mejorar su marca mediante la creación de un tema personalizado que diseña la aplicación con su marca’colores s.You can enhance your brand by creating a custom theme that styles your app with your brand’s colors. Para crear un tema personalizado, defina un nuevo estilo que se deriva de un tipo de tema de Material integrado, reemplazando los atributos de color que desee cambiar.To create a custom theme, you define a new style that derives from a built-in Material Theme flavor, overriding the color attributes that you want to change. Por ejemplo, puede definir un tema personalizado que se derive de Theme.Material.Light.DarkActionBar y cambia el color de fondo de pantalla para beige en lugar de en blanco.For example, you can define a custom theme that derives from Theme.Material.Light.DarkActionBar and changes the screen background color to beige instead of white.

Tema de materiales expone los siguientes atributos de diseño para la personalización:Material Theme exposes the following layout attributes for customization:

  • colorPrimary – El color de la barra de la aplicación.colorPrimary – The color of the app bar.

  • colorPrimaryDark – El color de la barra de estado y las barras de la aplicación contextuales; Esto normalmente es una versión oscura de colorPrimary.colorPrimaryDark – The color of the status bar and contextual app bars; this is normally a dark version of colorPrimary.

  • colorAccent – El color de los controles de interfaz de usuario, como cuadros de edición de texto, botones de radio y casillas de verificación.colorAccent – The color of UI controls such as check boxes, radio buttons, and edit text boxes.

  • windowBackground – El color de fondo de la pantalla.windowBackground – The color of the screen background.

  • textColorPrimary – El color del texto de la interfaz de usuario en la barra de la aplicación.textColorPrimary – The color of UI text in the app bar.

  • statusBarColor – El color de la barra de estado.statusBarColor – The color of the status bar.

  • navigationBarColor – El color de la barra de navegación.navigationBarColor – The color of the navigation bar.

Estas áreas de la pantalla se etiquetan en el diagrama siguiente:These screen areas are labeled in the following diagram:

Diagrama de atributos y sus áreas de la pantalla asociadaDiagram of attributes and their associated screen areas

De forma predeterminada, statusBarColor se establece en el valor de colorPrimaryDark.By default, statusBarColor is set to the value of colorPrimaryDark. Puede establecer statusBarColor a un color sólido, o puede establecerlo en @android:color/transparent a hacer transparente la barra de estado.You can set statusBarColor to a solid color, or you can set it to @android:color/transparent to make the status bar transparent. La barra de navegación también se pueden hacer transparente estableciendo navigationBarColor a @android:color/transparent.The navigation bar can also be made transparent by setting navigationBarColor to @android:color/transparent.

Creación de un tema de la aplicación personalizadaCreating a Custom App Theme

Puede crear un tema de la aplicación personalizada mediante la creación y modificación de los archivos en el recursos carpeta del proyecto de aplicación.You can create a custom app theme by creating and modifying files in the Resources folder of your app project. Para aplicar estilo a la aplicación con un tema personalizado, siga estos pasos:To style your app with a custom theme, use the following steps:

  • Crear un colors.xml archivo recursos/valores — usar este archivo para definir los colores del tema personalizado.Create a colors.xml file in Resources/values — you use this file to define your custom theme colors. Por ejemplo, puede pegar el código siguiente en colors.xml que le ayudarán a empezar a trabajar:For example, you can paste the following code into colors.xml to help you get started:
<?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 para los recursos de color que va a utilizar en el tema personalizado.Modify this example file to define the names and color codes for color resources that you will use in your custom theme.

  • Crear un recursos, los valores-v21 carpeta.Create a Resources/values-v21 folder. En esta carpeta, cree un styles.xml archivo:In this folder, create a styles.xml file:

    Ubicación de styles.xml en la carpeta de recursos, los valores-21.xmlLocation of styles.xml in the Resources/values-21.xml folder

    Tenga en cuenta que recursos, los valores-v21 es específico de Android 5.0 – versiones anteriores de Android no leerá archivos en esta carpeta.Note that Resources/values-v21 is specific to Android 5.0 – older versions of Android will not read files in this folder.

  • Agregar un resources nodo styles.xml y definir un style nodo con el nombre del tema personalizado.Add a resources node to styles.xml and define a style node with the name of your custom theme. Por ejemplo, este es un styles.xml archivo que define MyCustomTheme (derivado de integrado Theme.Material.Light estilo de tema):For example, here is a styles.xml file that defines MyCustomTheme (derived from the built-in Theme.Material.Light theme style):

<?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 momento, una aplicación que utiliza MyCustomTheme mostrará las existencias Theme.Material.Light tema sin personalizaciones:At this point, an app that uses MyCustomTheme will display the stock Theme.Material.Light theme without customizations:

    Apariencia del tema personalizado antes de las personalizacionesCustom theme appearance before customizations

  • Agregar personalizaciones del color para styles.xml definiendo los colores de los atributos de diseño que desee cambiar.Add color customizations to styles.xml by defining the colors of layout attributes that you want to change. Por ejemplo, para cambiar el color de la barra de aplicación para my_blue y cambiar el color de los controles de interfaz de usuario a my_purple, agregar las invalidaciones de color para styles.xml que hacen referencia a recursos de color configurados en colors.xml:For example, to change the app bar color to my_blue and change the color of UI controls to my_purple, add color overrides to styles.xml that refer to color resources configured in colors.xml:

<?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 la barra de aplicación en my_blue y controles de IU en my_purple, pero usar el Theme.Material.Light combinación de colores en los demás lugares:With these changes in place, an app that uses MyCustomTheme will display an app bar color in my_blue and UI controls in my_purple, but use the Theme.Material.Light color scheme everywhere else:

Apariencia del tema personalizado después de las personalizacionesCustom theme appearance after customizations

En este ejemplo, MyCustomTheme adopta los colores de Theme.Material.Light para el fondo de color, barra de estado y los colores de texto, pero se cambia el color de la barra de aplicaciones my_blue y establece el color del botón de radio para my_purple.In this example, MyCustomTheme borrows colors from Theme.Material.Light for the background color, status bar, and text colors, but it changes the color of the app bar to my_blue and sets the color of the radio button to my_purple.

Creación de un estilo de vista personalizadaCreating a Custom View Style

Android 5.0 también hace posible para que pueda aplicar estilo a una vista individual.Android 5.0 also makes it possible for you to style an individual view. Después de crear colors.xml y styles.xml (como se describe en la sección anterior), puede agregar un estilo de vista styles.xml.After you create colors.xml and styles.xml (as described in the previous section), you can add a view style to styles.xml. Para aplicar estilo a una vista individual, siga estos pasos:To style an individual view, use the following steps:

  • Editar Resources/values-v21/styles.xml y agregue un style nodo con el nombre del estilo de vista personalizada.Edit Resources/values-v21/styles.xml and add a style node with the name of your custom view style. Establezca los atributos de color personalizado para la vista dentro de este style nodo.Set the custom color attributes for your view within this style node. Por ejemplo, para crear un personalizado CardView estilo que más tiene esquinas redondeadas y usos my_blue como el color de fondo de la tarjeta, agregue un style nodo styles.xml (dentro de la resourcesnodo) y configurar el radio de rincón y color de fondo:For example, to create a custom CardView style that has more rounded corners and uses my_blue as the card background color, add a style node to styles.xml (inside the resources node) and configure the background color and corner radius:
<!-- 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 style atributo para esa vista para que coincida con el nombre de estilo personalizado que eligió en el paso anterior.In your layout, set the style attribute for that view to match the custom style name that you chose in the previous step. Por ejemplo:For example:
<android.support.v7.widget.CardView
    style="@style/CardView.MyBlue"
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:layout_gravity="center_horizontal">

Captura de pantalla siguiente proporciona un ejemplo del valor predeterminado CardView (se muestra en la parte izquierda) en comparación con un CardView que se ha aplicado el estilo con personalizado CardView.MyBlue tema (se muestra en la parte derecha):The following screenshot provides an example of the default CardView (shown on the left) as compared to a CardView that has been styled with the custom CardView.MyBlue theme (shown on the right):

Ejemplos de predeterminado CardView y CardView personalizadoExamples of default CardView and Custom CardView

En este ejemplo, personalizado CardView se muestra con el color de fondo my_blue y un radio de redondeo 18dp.In this example, the custom CardView is displayed with the background color my_blue and an 18dp corner radius.

CompatibilidadCompatibility

Para aplicar estilo a la aplicación para que se utiliza el tema de Material en Android 5.0, pero se revierte automáticamente a un estilo hacia abajo compatible en versiones anteriores de Android, use los pasos siguientes:To style your app so that it uses Material Theme on Android 5.0 but automatically reverts to a downward-compatible style on older Android versions, use the following steps:

  • Definir un tema personalizado en Resources/values-v21/styles.xml que se deriva de un estilo de tema del Material.Define a custom theme in Resources/values-v21/styles.xml that derives from a Material Theme style. Por ejemplo:For example:
<resources>
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Your customizations go here -->
    </style>
</resources>
  • Definir un tema personalizado en Resources/values/styles.xml que deriva de un tema anterior, pero usa el mismo nombre del tema anterior.Define a custom theme in Resources/values/styles.xml that derives from an older theme, but uses the same theme name as above. Por ejemplo:For example:
<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 de tema personalizado.In AndroidManifest.xml, configure your app with the custom theme name. Por ejemplo:For example:
<application android:label="MyApp" 
             android:theme="@style/MyCustomTheme">
</application>
  • Como alternativa, puedes aplicar estilo a una actividad específica mediante su tema personalizado:Alternately, you can style a specific activity using your custom theme:
[Activity(Label = "MyActivity", Theme = "@style/MyCustomTheme")]

Si el tema que usa colores definidos en un colors.xml de archivos, asegúrese de colocar este archivo en recursos/valores (en lugar de recursos, los valores-v21) para que ambas versiones de el tema personalizado puede tener acceso a las definiciones de color.If your theme uses colors defined in a colors.xml file, be sure to place this file in Resources/values (rather than Resources/values-v21) so that both versions of your custom theme can access your color definitions.

Cuando la aplicación se ejecuta en un dispositivo Android 5.0, usará la definición del tema especificada en Resources/values-v21/styles.xml.When your app runs on an Android 5.0 device, it will use the theme definition specified in Resources/values-v21/styles.xml. Cuando esta aplicación se ejecuta en dispositivos Android más antiguos, automáticamente volverá a la definición del tema especificada en Resources/values/styles.xml.When this app runs on older Android devices, it will automatically fall back to the theme definition specified in Resources/values/styles.xml.

Para obtener más información sobre la compatibilidad con versiones anteriores de Android del tema, consulte recursos alternativos.For more information about theme compatibility with older Android versions, see Alternate Resources.

ResumenSummary

Este artículo presenta el nuevo estilo de interfaz de usuario de tema de Material incluido en Android 5.0 (Lollipop).This article introduced the new Material Theme user interface style included in Android 5.0 (Lollipop). Describen las tres variantes de Material tema integradas que puede usar para diseñar la aplicación, se ha explicado cómo crear un tema personalizado para la personalización de marca de la aplicación y proporciona un ejemplo de cómo crear un tema una vista individual.It described the three built-in Material Theme flavors that you can use to style your app, it explained how to create a custom theme for branding your app, and it provided an example of how to theme an individual view. Por último, en este artículo se explica cómo utilizar el tema de Material en la aplicación al tiempo que mantiene la compatibilidad con versiones anteriores de Android de forma descendente.Finally, this article explained how to use Material Theme in your app while maintaining downward compatibility with older versions of Android.