unknown - toolbar android example

Cambiar diseño de material AppCompat ActionBar Color

Question

Solía ​​cambiar el color de la barra de estado de AppCompat con actionBarStyle y crear un estilo con un fondo que es el color que quiero.

Ahora, con Material Design AppCompat, este método ya no funciona.

¿Me puedes ayudar? Gracias.

Answer 1

En mi caso, @reVerse tuvo una respuesta parcial. Tuve que hacer algunos cambios adicionales para hacer que colorPrimary funcionara, porque estaba personalizando otras partes de la barra de herramientas ... específicamente, el color del texto.

Aquí está mi archivo styles.xml de trabajo, con comentarios que indican lo que estaba haciendo mal:

<!-- As @reVerse mentioned, you need to use colorPrimary instead of android:colorPrimary -->
<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/my_toolbar_color</item>
</style>
<!-- I was incorrectly using @style/Theme.AppCompat.Light for the popupTheme attribute -->
<style name="MyToolbarStyle" parent="Widget.AppCompat.ActionBar">
<item name="theme">@style/MyToolbarTextStyle</item>
<item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
</style>
<!-- I was incorrectly using Them.AppCompat.Light for the parent here -->
<style name="MyToolbarTextStyle" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">@color/my_toolbar_text_color</item>
</style>

Por lo tanto, cuando personalice más que el color de fondo de la barra de herramientas, debe asegurarse de utilizar uno de los temas ThemeOverlay o, por cualquier motivo, se ignorará colorPrimary.

Para completar, aquí está el archivo de diseño que uso para mi barra de herramientas, Toolbar.xml:

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schmeas.android.com/apk/res-auto"
style="@style/MyToolbarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

Esperemos que esto ayude a alguien!

Answer 2

Hay un nuevo atributo llamado colorPrimary que puede definir en su Tema. Esto le dará a ActionBar o Toolbar un color sólido.

Siguiendo un pequeño ejemplo:

<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">@color/my_action_bar_color</item>
</style>

Tenga en cuenta: Debe ser solo colorPrimary , no android:colorPrimary , en todas las carpetas de valores, excepto la de values-v21 .

Puede leer más sobre la personalización de la paleta de colores en developer.android.com .

Answer 3

Las instrucciones en la documentación para configurar la barra de la aplicación recomiendan configurar el tema en el archivo de manifiesto de Android de esta manera:

<application
android:theme="@style/Theme.AppCompat.Light.NoActionBar"
/>

Sin embargo, en mi experiencia, esto anuló el estilo de colorPrimary configurado para el AppTheme personalizado. Lo que funcionó para mí fue definir un tema personalizado como este:

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

Y luego usar este tema en el archivo AndroidManifest.

<application
android:theme="@style/AppTheme"
/>

Después de eso, el color de fondo de la barra de herramientas en la actividad basada en colorPrimary funcionó bien.

<android.support.v7.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

(La configuración de ThemeOverlay con un tema oscuro garantiza que el texto sea claro).

Answer 4

 <style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">@color/ColorPrimary</item>
<item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
<!-- Customize your theme here. -->
</style>

También vea: Hacer ActionBar personalizado