web-dev-qa-db-fra.com

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

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

Si je choisis Theme.AppCompat.Light ma barre d’outils sera claire et si je choisis Theme.AppCompat il fera sombre. (Techniquement, vous devez utiliser la version .NoActionBar, mais pour autant que je sache, la seule différence est que

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

Maintenant, il n’ya pas de Theme.AppCompat.Light.DarkActionBar mais je pensais naïvement que ce serait assez bon de fabriquer mon propre

<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 ont toujours le thème Light. J'ai passé des heures à essayer différentes combinaisons de mélange du thème Dark (base) et du thème Light, mais je ne trouve pas une combinaison qui me permette d'avoir des fonds clairs sur tout sauf les barres d'outils.

Existe-t-il un moyen d'obtenir l'aspect AppCompat.Light.DarkActionBar avec l'importation Android.support.v7.widget.Toolbar?

androidandroid-appcompatandroid-themeandroid-toolbar
102
Liminal

La méthode recommandée pour attribuer un style à la barre d'outils d'un clone Light.DarkActionBar consiste à utiliser Theme.AppCompat.Light.DarkActionbar comme thème parent/application et à ajouter les attributs suivants au style afin de 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>

Ensuite, utilisez les éléments suivants 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 des modifications ultérieures, vous devez créer des styles prolongeant ThemeOverlay.AppCompat.Dark.ActionBar et ThemeOverlay.AppCompat.Light en remplaçant ceux qui se trouvent dans AppBarLayout->Android:theme et Toolbar->app:popupTheme. Notez également que cela récupérera votre ?attr/colorPrimary si vous l'avez défini dans votre style principal afin d'obtenir une couleur d'arrière-plan différente.

Vous trouverez un bon exemple de cela dans le modèle de projet en cours avec un Empty Activity sur Android Studio (1.4+).

211
oRRs

Edit: Après la mise à jour vers appcompat-v7: 22.1.1 et l'utilisation de AppCompatActivity au lieu de ActionBarActivity, mon styles.xml ressemble à ceci:

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

Note: Cela signifie que j'utilise une Toolbar fournie par le framework (non incluse 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 de 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 Barre d’outils, par exemple la couleur d’arrière-plan. L'application: thème est plutôt globale pour tous les éléments d'interface utilisateur gonflés dans la barre d'outils, par exemple la couleur du titre et des icônes.

70
LordRaydenMK

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

C'est une combinaison de facteurs.

Premièrement, n'essayez pas de faire jouer Nice à travers les thèmes dans les barres d'outils. Cela semble être impossible.

Donc, appliquez explicitement les thèmes à vos barres d’outils comme dans oRRs answer

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. Pour obtenir les couleurs de fond que j'espérais, vous devez remplacer l'attribut background dans vos thèmes de 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>

il vous suffit ensuite d'inclure la disposition de votre barre d'outils dans vos autres dispositions

<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 cette question.

(Si quelqu'un peut comprendre comment faire fonctionner cela en utilisant seulement des thèmes, c'est-à-dire ne pas avoir à appliquer les thèmes explicitement dans les fichiers de mise en page, je serai ravi de supporter leur réponse à la place)

EDIT:

Donc, apparemment, poster une réponse plus complète était un aimant à vote négatif, je vais donc 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 à voter si cela vous rend heureux.

31
Liminal

La manière la plus propre que j'ai trouvée 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"/>
17
Don

Pour personnaliser le style de la barre d’outils, commencez par créer un style personnalisé en héritant de Widget.AppCompat.Toolbar, remplacez les propriétés, puis ajoutez-le au thème de l’application personnalisée, 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>
9
Arnav Rao

Vous pouvez essayer ceci ci-dessous.

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

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

En voici d'autres: TextAppearance.Widget.AppCompat.Toolbar.Title, TextAppearance.Widget.AppCompat.Toolbar.Subtitle, Widget.AppCompat.Toolbar.Button.Navigation.

J'espère que cela peut vous aider.

6
Yong

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 d'application, vous n'avez donc pas besoin de placer de style sur chaque barre d'outils.

0
craigmj