Como faço para estilizar a barra de ferramentas appcompat-v7 como Theme.AppCompat.Light.DarkActionBar?

Estou tentando recriar a aparência Theme.AppCompat.Light.DarkActionBarcom a nova barra de ferramentas da biblioteca de suporte.

Se eu escolher Theme.AppCompat.Lightminha barra de ferramentas ficará clara e se eu escolher, Theme.AppCompatela ficará escura. (Tecnicamente, você tem que usar a .NoActionBarversão, mas tanto quanto posso dizer a única diferença é

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

Agora não há, Theme.AppCompat.Light.DarkActionBarmas ingenuamente pensei que seria bom o suficiente apenas para fazer o meu

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

No entanto, com isso, minhas barras de ferramentas ainda são Lighttemáticas. Passei horas tentando diferentes combinações de mixagem do tema Escuro (base) e do tema Claro, mas simplesmente não consigo encontrar uma combinação que me permita ter fundos claros em tudo, exceto nas barras de ferramentas.

Existe uma maneira de obter a AppCompat.Light.DarkActionBaraparência com importação android.support.v7.widget.Toolbar?

A maneira recomendada de estilizar a Barra de Ferramentas para um Light.DarkActionBarclone seria usar Theme.AppCompat.Light.DarkActionbarcomo tema pai / aplicativo e adicionar os seguintes atributos ao estilo para ocultar a ActionBar padrão:

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

Em seguida, use o seguinte como sua barra de ferramentas:

<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 modificações posteriores, você criaria estilos estendendo ThemeOverlay.AppCompat.Dark.ActionBare ThemeOverlay.AppCompat.Lightsubstituindo os de AppBarLayout->android:themee Toolbar->app:popupTheme. Observe também que isso irá pegar seu ?attr/colorPrimaryse você o tiver definido em seu estilo principal, de forma que você possa obter uma cor de fundo diferente.

Você encontrará um bom exemplo disso no modelo de projeto atual com um Empty Activitydo Android Studio (1.4+).

Editar: depois de atualizar para appcompat-v7: 22.1.1 e usar em AppCompatActivityvez de ActionBarActivitymy styles.xml fica assim:

<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: Isso significa que estou usando um Toolbarfornecido pela estrutura (NÃO incluído em um arquivo XML).

Isso funcionou para mim:
arquivo 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>

Atualização: Citação do blog de Gabriele Mariotti .

Com a nova barra de ferramentas, você pode aplicar um estilo e um tema. Eles são diferentes! O estilo é local para a visualização da Barra de Ferramentas, por exemplo, a cor de fundo. Em vez disso, o app: theme é global para todos os elementos de interface do usuário aumentados na barra de ferramentas, por exemplo, a cor do título e dos ícones.

Ok, depois de ter mergulhado muito tempo nesse problema, esta é a maneira que consegui obter a aparência que estava esperando. Estou criando uma resposta separada para que possa colocar tudo em um só lugar.

É uma combinação de fatores.

Em primeiro lugar, não tente fazer com que as barras de ferramentas funcionem bem apenas por meio de temas. Parece impossível.

Portanto, aplique os temas explicitamente às suas barras de ferramentas, como na resposta 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" />

No entanto, este é o molho mágico. Para realmente obter as cores de fundo que esperava, você deve substituir o backgroundatributo nos temas da barra de ferramentas

valores / estilos.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>

em seguida, basta incluir o layout da barra de ferramentas em seus outros layouts

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

e você está pronto para ir.

Espero que isso ajude alguém, para que você não tenha que gastar tanto tempo com isso quanto eu.

(se alguém puder descobrir como fazer isso funcionar usando apenas temas, ou seja, não ter que aplicar os temas explicitamente nos arquivos de layout, ficarei feliz em apoiar sua resposta)

EDITAR:

Então, aparentemente, postar uma resposta mais completa foi um ímã de votos negativos, então aceitarei a resposta incompleta acima, mas deixarei esta resposta aqui, caso alguém realmente precise. Sinta-se à vontade para continuar votando negativamente se isso te deixar feliz.

A maneira mais limpa que descobri de fazer isso é criar um filho de ' ThemeOverlay.AppCompat.Dark.ActionBar '. No exemplo, eu defini a cor de fundo da barra de ferramentas como VERMELHO e a cor do texto como AZUL.

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

Você pode então aplicar seu tema à barra de ferramentas:

<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"/>

Para personalizar o estilo da barra de ferramentas, primeiro crie o estilo personalizado da barra de ferramentas herdando Widget.AppCompat.Toolbar, substitua as propriedades e, em seguida, adicione-o ao tema do aplicativo personalizado conforme mostrado abaixo, consulte http://www.zoftino.com/android-toolbar-tutorial para mais informações sobre a barra de ferramentas e 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>

Você pode tentar isso abaixo.

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

E os elementos de detalhe você pode encontrá-los em https://developer.android.com/reference/android/support/v7/appcompat/R.styleable.html#Toolbar

Aqui estão mais algumas: TextAppearance.Widget.AppCompat.Toolbar.Title, TextAppearance.Widget.AppCompat.Toolbar.Subtitle, Widget.AppCompat.Toolbar.Button.Navigation.

Espero que isso possa ajudá-lo.

Semelhante ao de Arnav Rao, mas com um pai 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>

Com essa abordagem, a aparência da barra de ferramentas é totalmente definida nos estilos do aplicativo, portanto, você não precisa colocar nenhum estilo em cada barra de ferramentas.