Comment puis-je styliser la barre d'outils appcompat-v7 comme Theme.AppCompat.Light.DarkActionBar?

J'essaie de recréer l'apparence de Theme.AppCompat.Light.DarkActionBaravec la nouvelle barre d'outils de la bibliothèque de support.

Si je choisis Theme.AppCompat.Lightma barre d'outils sera claire et si je choisis, Theme.AppCompatelle sera sombre. (Techniquement, vous devez utiliser la .NoActionBarversion, mais pour autant que je sache, la seule différence est

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

Maintenant il n'y a pas Theme.AppCompat.Light.DarkActionBarmais naïvement je pensais que ce serait assez bien de faire le mien

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

Cependant, avec cela, mes barres d'outils sont toujours Lightthématiques. J'ai passé des heures à essayer différentes combinaisons de mélange du thème Dark (de base) et du thème Light, mais je ne trouve tout simplement pas de combinaison qui me permette d'avoir des arrière-plans clairs sur tout sauf les barres d'outils.

Existe-t-il un moyen d'obtenir le AppCompat.Light.DarkActionBarlook avec les importations android.support.v7.widget.Toolbar?

La méthode recommandée pour styliser la barre d'outils pour un Light.DarkActionBarclone serait de l'utiliser Theme.AppCompat.Light.DarkActionbarcomme thème parent / d'application et d'ajouter les attributs suivants au style pour masquer la barre d'action par défaut:

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

Utilisez ensuite ce qui suit comme barre d'outils:

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

Pour d'autres modifications, vous créeriez des styles étendant ThemeOverlay.AppCompat.Dark.ActionBaret ThemeOverlay.AppCompat.Lightremplaçant ceux dans AppBarLayout->android:themeet Toolbar->app:popupTheme. Notez également que cela ramassera votre?attr/colorPrimary si vous l'avez défini dans votre style principal afin que vous puissiez obtenir une couleur d'arrière-plan différente.

Vous en trouverez un bon exemple dans le modèle de projet actuel avec Empty ActivityAndroid Studio (1.4+).

Edit: Après la mise à jour vers appcompat-v7: 22.1.1 et l'utilisation à la AppCompatActivityplace de ActionBarActivitymon styles.xml ressemble à:

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

Remarque: cela signifie que j'utilise un Toolbar fourni par le framework (NON inclus dans un fichier XML).

Cela a fonctionné pour moi:
fichier 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>

Mise à jour: Une citation du blog de Gabriele Mariotti .

Avec la nouvelle barre d'outils, vous pouvez appliquer un style et un thème. Ils sont différents! Le style est local dans la vue de la barre d'outils, par exemple la couleur d'arrière-plan. Le thème app: est plutôt global à tous les éléments de l'interface utilisateur gonflés dans la barre d'outils, par exemple la couleur du titre et des icônes.

Ok, après avoir passé beaucoup de temps dans ce problème, c'est ainsi que j'ai réussi à obtenir l'apparence que j'espérais. J'en fais une réponse distincte pour que je puisse tout rassembler au même endroit.

C'est une combinaison de facteurs.

Tout d'abord, n'essayez pas de faire en sorte que les barres d'outils fonctionnent correctement à travers uniquement des thèmes. Cela semble impossible.

Appliquez donc les thèmes explicitement à vos barres d'outils comme dans la réponse 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" />

Cependant, c'est la sauce magique. Afin d'obtenir les couleurs d'arrière-plan que j'espérais, vous devez remplacer l' backgroundattribut dans les thèmes de votre barre d'outils

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>

puis incluez simplement votre disposition de barre d'outils dans vos autres mises en page

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

et vous êtes prêt à partir.

J'espère que cela aide quelqu'un d'autre pour que vous n'ayez pas à passer autant de temps que moi sur ce sujet.

(si quelqu'un peut comprendre comment faire ce travail en utilisant uniquement des thèmes, c'est-à-dire ne pas avoir à appliquer les thèmes explicitement dans les fichiers de mise en page, je soutiendrai volontiers leur réponse à la place)

ÉDITER:

Donc, apparemment, publier une réponse plus complète était un aimant pour un vote défavorable, je vais donc simplement accepter la réponse incomplète ci-dessus, mais laissez cette réponse ici au cas où quelqu'un en aurait réellement besoin. N'hésitez pas à continuer de voter si cela vous rend heureux.

Le moyen le plus propre que j'ai trouvé pour le faire est de créer un enfant de « ThemeOverlay.AppCompat.Dark.ActionBar ». Dans l'exemple, j'ai défini la couleur d'arrière-plan de la barre d'outils sur ROUGE et la couleur du texte sur BLEU.

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

Vous pouvez ensuite appliquer votre thème à la barre d'outils:

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

Pour personnaliser le style de la barre d'outils, créez d'abord un style personnalisé de la barre d'outils héritant de Widget.AppCompat.Toolbar, remplacez les propriétés, puis ajoutez-le au thème d'application personnalisé comme indiqué ci-dessous, voir http://www.zoftino.com/android-toolbar-tutorial pour plus d'informations sur la barre d'outils et les styles.

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

Vous pouvez essayer ceci ci-dessous.

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

Et les éléments de détail, vous pouvez les trouver dans https://developer.android.com/reference/android/support/v7/appcompat/R.styleable.html#Toolbar

Voici encore plus: TextAppearance.Widget.AppCompat.Toolbar.Title, TextAppearance.Widget.AppCompat.Toolbar.Subtitle, Widget.AppCompat.Toolbar.Button.Navigation.

J'espère que cela peut vous aider.

Similaire à Arnav Rao, mais avec un parent différent:

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

Avec cette approche, l'apparence de la barre d'outils est entièrement définie dans les styles de l'application, vous n'avez donc pas besoin de placer de style sur chaque barre d'outils.