web-dev-qa-db-fra.com

Changer la conception de la matière

J'avais l'habitude de changer la couleur de la barre d'état AppCompat avec actionBarStyle et de créer un style avec un arrière-plan qui correspond à la couleur souhaitée.

Maintenant, avec Material Design AppCompat, cette méthode ne fonctionne plus.

Pouvez-vous m'aider? Merci.

androidandroid-actionbarappcompatmaterial-design
27
user3184899

Il existe un nouvel attribut appelé colorPrimary que vous pouvez définir dans votre thème. Cela vous donnera une barre unie ActionBar ou Toolbar. 

En suivant un petit exemple:

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

Remarque: Il doit s'agir uniquement de colorPrimary, pas Android:colorPrimary, dans tous les dossiers de valeurs sauf le values-v21.

Vous pouvez en savoir plus sur la personnalisation de la palette de couleurs sur developer.Android.com .

90
reVerse

Dans mon cas, @reVerse avait une réponse partielle. J'ai dû apporter quelques modifications supplémentaires pour que colorPrimary fonctionne, car je personnalisais d'autres parties de la barre d'outils ... plus précisément la couleur du texte.

Voici mon fichier styles.xml de travail, avec des commentaires indiquant ce que je faisais 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>

Ainsi, lorsque vous personnalisez plus que la couleur d'arrière-plan de la barre d'outils, vous devez vous assurer d'utiliser l'un des thèmes de ThemeOverlay ou, pour une raison quelconque, colorPrimary sera ignoré.

Pour être complet, voici le fichier de présentation que j'utilise pour ma barre d'outils, 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" />

Espérons que cela aide quelqu'un!

3
Justin

Les instructions dans la documentation pour configurer la barre d’applications recommandent de définir le thème dans le fichier Manifest Android comme suit:

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

Cependant, d'après mon expérience, cela a remplacé le style colorPrimary configuré pour AppTheme personnalisé. Ce qui a fonctionné pour moi a été de définir un thème personnalisé comme ceci:

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

Et puis utiliser ce thème dans le fichier AndroidManifest.

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

Après cela, définir la couleur d’arrière-plan de la barre d’outils dans l’activité basée sur colorPrimary fonctionnait correctement.

<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 définition de ThemeOverlay avec un thème sombre garantit que le texte est clair.)

0
Suragch
   <style name="AppTheme" parent="Theme.AppCompat.Light">

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

Voir aussi: Making Custom ActionBar

0
Half Moon