theme textappearance style studio apptheme android android-theme

android - textappearance - ¿Cuándo se debe usar Theme.AppCompat vs ThemeOverlay.AppCompat?



theme editor android studio (2)

Según esta publicación del blog Theme vs Style del creador de AppCompat:

[Las superposiciones de temas] son ​​temas especiales que se superponen al tema normal. Temas de material, que sobrescriben los atributos relevantes para que sean claros / oscuros.

ThemeOverlay + ActionBar

Los entusiastas de ustedes también habrán visto los derivados de ActionBar ThemeOverlay:

  • ThemeOverlay.Material.Light.ActionBar
  • ThemeOverlay.Material.Dark.ActionBar

Estos solo deben usarse con la Barra de acciones a través del nuevo atributo actionBarTheme , o directamente configurados en su Barra de herramientas.

Lo único que actualmente hacen de manera diferente a sus padres es que cambian el colorControlNormal para que sea android:textColorPrimary , lo que hace que cualquier texto e íconos sean opacos.

Existen las siguientes clases de Theme.AppCompat:

Theme.AppCompat Theme.AppCompat.Light Theme.AppCompat.Light.DarkActionBar Theme.AppCompat.NoActionBar Theme.AppCompat.Light.NoActionBar Theme.AppCompat.DialogWhenLarge Theme.AppCompat.Light.DialogWhenLarge Theme.AppCompat.Dialog Theme.AppCompat.Light.Dialog Theme.AppCompat.CompactMenu

y las siguientes clases ThemeOverlay.AppCompat:

ThemeOverlay.AppCompat ThemeOverlay.AppCompat.Light ThemeOverlay.AppCompat.Dark ThemeOverlay.AppCompat.ActionBar ThemeOverlay.AppCompat.Dark.ActionBar

¿Por qué uno usaría ThemeOverlay.AppCompat.light vs Theme.AppCompat.Light por ejemplo? Veo que hay muchos menos atributos definidos para ThemeOverlay. Tengo curiosidad por saber cuál es el caso de uso previsto para ThemeOverlay.


Theme.AppCompat se usa para establecer el tema global para toda la aplicación. ThemeOverlay.AppCompat se utiliza para anular (o "superponer") ese tema para vistas específicas, especialmente la barra de herramientas.

Veamos un ejemplo de por qué esto es necesario.

Temas de aplicaciones con una barra de acciones

ActionBar normalmente se muestra en una aplicación. Puedo elegir su color configurando el valor colorPrimary . Sin embargo, cambiar el tema cambia el color del texto en la Barra de acciones.

<style name="AppTheme" parent="Theme.AppCompat"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>

Como mi color primario es azul oscuro, probablemente debería usar uno de los temas que usa un color de texto claro en la barra de acción porque el texto negro es difícil de leer.

Ocultar la barra de acciones y usar una barra de herramientas

El objetivo de usar Theme.AppCompat en lugar de Theme.Material es para que podamos permitir que las versiones anteriores de Android utilicen nuestro tema de diseño de materiales. El problema es que las versiones anteriores de Android no son compatibles con ActionBar. Por lo tanto, la documentation recomienda ocultar la barra de acciones y agregar una barra de herramientas a su diseño. Para ocultar el ActionBar tenemos que usar uno de los temas de NoActionBar . Las siguientes imágenes muestran la barra de herramientas con la barra de acciones oculta.

Pero, ¿qué pasa si quiero algo como un tema ligero con un DarkActionBar? Como tengo que usar NoActionBar, esa no es una opción.

Anular el tema de la aplicación

Aquí es donde entra ThemeOverlay. Puedo especificar el tema Dark ActionBar en mi diseño XML de la barra Google.

<android.support.v7.widget.Toolbar ... android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

Esto finalmente nos permite tener el efecto que queremos. El tema Dark.ActionBar se superpone al tema de la aplicación Light para esta ocasión en particular.

  • Tema de la aplicación: Theme.AppCompat.Light.NoActionBar
  • Tema de la barra de herramientas: ThemeOverlay.AppCompat.Dark.ActionBar

Si desea que el menú emergente sea ligero, puede agregar esto:

app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

Estudio adicional

Aprendí esto a través de la experimentación y leyendo los siguientes artículos.