android - example - ¿Cómo doy estilo a la barra de herramientas de appcompat-v7 como Theme.AppCompat.Light.DarkActionBar?

toolbar android material design

Question

Estoy intentando recrear el aspecto de Theme.AppCompat.Light.DarkActionBar con la nueva barra de herramientas de la biblioteca de soporte.

Si elijo Theme.AppCompat.Light mi barra de herramientas será liviana y si elijo Theme.AppCompat , estará oscuro. (Técnicamente debes usar la versión .NoActionBar pero, por lo que puedo decir, la única diferencia es

<style name="Theme.AppCompat.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="android:windowNoTitle">true</item>
</style>

Ahora no hay Theme.AppCompat.Light.DarkActionBar pero ingenuamente pensé que sería lo suficientemente bueno como para hacer mi propio

<style name="Theme.AppCompat.Light.DarkActionBar.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="android:windowNoTitle">true</item>
</style>

Sin embargo, con esto mis barras de herramientas siguen siendo tema de Light . He pasado horas intentando diferentes combinaciones de mezclar el tema Oscuro (base) y el tema Luz, pero no puedo encontrar una combinación que me permita tener fondos claros en todo menos en las barras de herramientas.

¿Hay alguna forma de obtener la apariencia de AppCompat.Light.DarkActionBar importando android.support.v7.widget.Toolbar ''s?

Answer 1

Bien, después de haberme sumergido en este problema durante mucho tiempo, esta es la forma en que conseguí la apariencia que estaba esperando. Lo estoy convirtiendo en una respuesta por separado, así que puedo obtener todo en un solo lugar.

Es una combinación de factores.

En primer lugar, no intente hacer que las barras de herramientas jueguen bien con solo temas. Parece ser imposible.

Así que aplica los temas explícitamente a tus barras de herramientas como en la respuesta de oRRs

layout / toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_alignParentTop="true"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:theme="@style/Dark.Overlay"
    app:popupTheme="@style/Dark.Overlay.LightPopup" />

Sin embargo, esta es la salsa mágica. Para obtener realmente los colores de fondo que esperaba, debes anular el atributo de background en los temas de la barra de herramientas

values ​​/ styles.xml:

<!-- 
    I expected android:colorBackground to be what I was looking for but
    it seems you have to override android:background
-->
<style name="Dark.Overlay" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:background">?attr/colorPrimary</item>
</style>

<style name="Dark.Overlay.LightPopup" parent="ThemeOverlay.AppCompat.Light">
    <item name="android:background">@color/material_grey_200</item>
</style>

luego solo incluye el diseño de tu barra de herramientas en tus otros diseños

<include android:id="@+id/mytoolbar" layout="@layout/toolbar" />

y estás listo para irte

Espero que esto ayude a otra persona para que no tenga que gastar tanto tiempo en esto como yo.

(si alguien puede averiguar cómo hacer que esto funcione usando solo temas, es decir, sin tener que aplicar los temas explícitamente en los archivos de diseño, con mucho gusto apoyaré su respuesta)

EDITAR:

Entonces, aparentemente, publicar una respuesta más completa fue un imán negativo, así que simplemente aceptaré la respuesta incompleta anterior, pero dejo esta respuesta aquí en caso de que alguien realmente la necesite. Siéntete libre de seguir bajando si te hace feliz.

Answer 2

Editar: Después de actualizar a appcompat-v7: 22.1.1 y usar AppCompatActivity lugar de ActionBarActivity mi styles.xml se ve así:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

Nota: Esto significa que estoy usando una Toolbar proporcionada por el marco (NO incluida en un archivo XML).

Esto funcionó para mí:
archivo styles.xml:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="windowActionBar">false</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

Actualización: una cita del blog de Gabriele Mariotti .

Con la nueva barra de herramientas puede aplicar un estilo y un tema. ¡Ellos son diferentes! El estilo es local en la vista de la barra de herramientas, por ejemplo, el color de fondo. La aplicación: el tema es global para todos los elementos de la interfaz de usuario inflados en la barra de herramientas, por ejemplo, el color del título y los iconos.

Answer 3

La forma más limpia que encontré para hacer esto es crear un elemento secundario de '' ThemeOverlay.AppCompat.Dark.ActionBar ''. En el ejemplo, configuro el color de fondo de la barra de herramientas en ROJO y el color del texto en AZUL.

<style name="MyToolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:background">#FF0000</item>
    <item name="android:textColorPrimary">#0000FF</item>
</style>

A continuación, puede aplicar su tema a la barra de herramientas:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    app:theme="@style/MyToolbar"
    android:minHeight="?attr/actionBarSize"/>

Answer 4

La forma recomendada de Light.DarkActionBar estilo a la barra de herramientas para un clon Light.DarkActionBar sería usar Theme.AppCompat.Light.DarkActionbar como tema principal / de aplicación y agregar los siguientes atributos al estilo para ocultar el ActionBar predeterminado:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

Luego usa lo siguiente como tu barra de herramientas:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>

Para modificaciones adicionales, crearía estilos extendiendo ThemeOverlay.AppCompat.Dark.ActionBar y ThemeOverlay.AppCompat.Light reemplazando los de AppBarLayout->android:theme y Toolbar->app:popupTheme . También tenga en cuenta que esto seleccionará su valor de ?attr/colorPrimary si lo ha configurado en su estilo principal para que pueda obtener un color de fondo diferente.

Encontrará un buen ejemplo de esto en la plantilla de proyecto actual con una Empty Activity de Android Studio (1.4+).

Answer 5

Para personalizar el estilo de la barra de herramientas, primero cree una barra de herramientas estilo personalizado heredando Widget.AppCompat.Toolbar, anule las propiedades y luego agréguelo al tema de la aplicación personalizada como se muestra a continuación, consulte http://www.zoftino.com/android-toolbar-tutorial para más barra de herramientas de información y estilos.

   <style name="MyAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="toolbarStyle">@style/MyToolBarStyle</item>
    </style>
    <style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
        <item name="android:background">#80deea</item>
        <item name="titleTextAppearance">@style/MyTitleTextAppearance</item>
        <item name="subtitleTextAppearance">@style/MySubTitleTextAppearance</item>
    </style>
    <style name="MyTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">35dp</item>
        <item name="android:textColor">#ff3d00</item>
    </style>
    <style name="MySubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="android:textSize">30dp</item>
        <item name="android:textColor">#1976d2</item>
    </style>

Answer 6

Similar a Arnav Rao, pero con un padre diferente:

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

    <item name="toolbarStyle">@style/MyToolbar</item>
</style>

<style name="MyToolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:background">#ff0000</item>
</style>

Con este enfoque, la apariencia de la barra de herramientas se define por completo en los estilos de la aplicación, por lo que no es necesario colocar ningún estilo en cada barra de herramientas.

Answer 7

Yout puede intentar esto a continuación.

<style name="MyToolbar" parent="Widget.AppCompat.Toolbar">
    <!-- your code here -->
</style>

Y los elementos de detalle los puedes encontrar en https://developer.android.com/reference/android/support/v7/appcompat/R.styleable.html#Toolbar

Aquí hay algunos más: TextAppearance.Widget.AppCompat.Toolbar.Title , TextAppearance.Widget.AppCompat.Toolbar.Subtitle , Widget.AppCompat.Toolbar.Button.Navigation .

Espero que esto le pueda ayudar.