Skip to content

Most visited

Recently visited

navigation

Usar el tema Material

El nuevo tema material proporciona:

Puedes personalizar la apariencia del tema material según la identidad de tu marca, con una paleta de colores que esté bajo tu control. Puedes cambiar el matiz de la barra de acción y la barra de estado mediante atributos de temas, como se muestra en la figura 3.

Los widgets del sistema tienen un nuevo diseño y animaciones para respuesta táctil. Puedes personalizar tu aplicación cambiando su paleta de colores, las animaciones de la respuesta táctil y sus transiciones de actividades.

El tema material se define como:

Para obtener una lista de estilos de Material, consulta la referencia de la API para R.style.

Figura 1. Tema Material oscuro

Figura 2. Tema Material claro


Nota: El tema material solo está disponible en Android 5.0 (API nivel 21) y superior. Las Bibliotecas de soporte v7 proporcionan temas con estilos de Material Design para algunos widgets y admiten la personalización de la paleta de colores. Para más información, consulta Mantener la compatibilidad.

Personalizar la paleta de colores

Si deseas personalizar los colores base del tema para que se adapten a tu marca, define tus colores personalizados mediante los atributos de temas cuando heredes del tema material:

<resources>
  <!-- inherit from the material theme -->
  <style name="AppTheme" parent="android:Theme.Material">
    <!-- Main theme colors -->
    <!--   your app branding color for the app bar -->
    <item name="android:colorPrimary">@color/primary</item>
    <!--   darker variant for the status bar and contextual app bars -->
    <item name="android:colorPrimaryDark">@color/primary_dark</item>
    <!--   theme UI controls like checkboxes and text fields -->
    <item name="android:colorAccent">@color/accent</item>
  </style>
</resources>

Figura 3. Personalizar el tema material.

Personalizar la barra de estado

El tema material te permite personalizar fácilmente la barra de estado, especifica un color que se adapte a tu marca y proporciona suficiente contraste para mostrar los íconos de estado en blanco. Si quieres establecer un color personalizado para la barra de estado, usa el atributo android:statusBarColor cuando extiendas el tema material. android:statusBarColor hereda el valor de android:colorPrimaryDark en forma predeterminada.

También puedes dibujar por detrás de la barra de estado. Por ejemplo, si quieres que la barra de estado se muestre en forma transparente sobre una foto, aplica un sutil degradado oscuro para garantizar que los íconos de estado blancos sigan visibles. Para hacerlo, establece el atributo android:statusBarColor en @android:color/transparent y ajusta los indicadores de la ventana según lo requerido. También puedes usar el método Window.setStatusBarColor() para las animaciones o el difuminado.

Nota: La barra de estado casi siempre debe estar delimitada claramente de la barra de herramientas principal, excepto para los casos en donde muestres imágenes de un extremo a otro o contenido multimedia detrás de estas barras, y también cuando uses un degradado para garantizar que los íconos aún sean visibles.

Cuando personalizas la barra de navegación y la barra de estado, haz que ambas sean transparentes o modifica solo la barra de estado. La barra de navegación debe permanecer de color negro en todos los otros casos.

Vistas individuales del tema

Los elementos en las definiciones de diseño XML pueden especificar el atributo android:theme, que hace referencia al recurso del tema. Este atributo modifica el tema para el elemento y cualquier elemento secundario, y esto es útil para modificar las paletas de colores de los temas en una porción específica de una interfaz.

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

Follow Google Developers on WeChat

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience.
(Sep 2017 survey)