Comment définir une couleur / un style ActionBar personnalisé?

87

J'utilise Android Navigation bardans mon projet, je veux changer la couleur supérieure de la barre d'action en quelque chose de rouge, comment puis-je faire cela? J'ai quelque chose comme ça,

top noir

et je veux quelque chose comme ça,

top rouge

comment puis-je y parvenir?

android  colors  background  android-actionbar  navigation-drawer 
— Hemantsb
source

Réponses:

174

Vous pouvez définir la couleur de l'ActionBar (et d'autres éléments) en créant un style personnalisé :

Il suffit de modifier la résolution / valeurs / styles.xml fichier de votre projet Android.

Par exemple comme ceci:

<resources>
    <style name="MyCustomTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/MyActionBarTheme</item>
    </style>

    <style name="MyActionBarTheme" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">ANY_HEX_COLOR_CODE</item>
    </style>
</resources>

Définissez ensuite "MyCustomTheme" comme thème de votre activité qui contient l'ActionBar.

Vous pouvez également définir une couleur pour l'ActionBar comme ceci:

ActionBar actionBar = getActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable(Color.RED)); // set your desired color

Tiré de là: Comment changer la couleur d'arrière-plan de l'ActionBar d'un ActionBarActivity à l'aide de XML?

— Philipp Jahoda
source
2
Qu'entendez-vous par "Ensuite, définissez" MyCustomTheme "comme thème de votre activité qui contient l'ActionBar?" Comment je fais ça?
— Kala J
2
Dans votre activité XML, vous devez ajouter android: theme = "@ style / MyCustomTheme" en tant que paramètre dans la balise <android.support.v4.view.ViewPager ... />
— PedroD
2
qu'en est-il des valeurs restantesv14 et des fichiers valuesv21 styles.xml dans Android
— Harsha
Comment changer le style de texte du titre?
— Adam Hurwitz
@KalaJ utilise setTheme(R.style.MyCustomTheme) dans la méthode onCreate de votre activité.
— NullByte08
57

En général, Android OS exploite un «thème» pour permettre aux développeurs d'applications d'appliquer globalement un ensemble universel de paramètres de style d'éléments d'interface utilisateur aux applications Android dans leur ensemble, ou, en variante, à une seule sous-classe d'activité.

Il existe donc trois «thèmes système» courants du système d'exploitation Android, que vous pouvez spécifier dans votre fichier XML de manifeste Android lorsque vous développez des applications pour la version 3.0 et les versions ultérieures.

Je fais référence à la bibliothèque de support (APPCOMPAT) ici: - Donc, les trois thèmes sont 1. Thème AppCompat Light (Theme.AppCompat.Light)

entrez la description de l'image ici

  1. Thème sombre AppCompat (Theme.AppCompat),

entrez la description de l'image ici

  1. Et un hybride entre ces deux, AppCompat Light Theme avec Darker ActionBar. (Theme.AppCompat.Light.DarkActionBar)

AndroidManifest.xml et voir la balise, le thème Android est mentionné comme suit : - android: theme = "@ style / AppTheme"

Ouvrez le Styles.xml et nous y avons déclaré le thème d'application de base: -

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  </style>

Nous devons remplacer ces éléments de thème parent pour styliser la barre d'action.

ActionBar avec fond de couleur différente: -

Pour ce faire, nous devons créer un nouveau style MyActionBar (vous pouvez donner n'importe quel nom) avec une référence parent à @ style / Widget.AppCompat.Light.ActionBar.Solid.Inverse qui contient les caractéristiques de style de l'élément d'interface utilisateur Android ActionBar. Donc la définition serait

<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="background">@color/red</item>
</style>

Et cette définition que nous devons référencer dans notre AppTheme, pointant vers le style ActionBar remplacé comme--

@ style / MyActionBar ActionBar avec une couleur de fond rose

Changez la couleur du texte de la barre de titre (par exemple du noir au blanc): -

Maintenant, pour changer la couleur du texte du titre, nous devons remplacer la référence parent parent = "@ style / TextAppearance.AppCompat.Widget.ActionBar.Title">

La définition du style serait donc

<style name="MyActionBarTitle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
    <item name="android:textColor">@color/white</item>
</style>

Nous référencerons cette définition de style dans la définition de style MyActionBar , car la modification TitleTextStyle est un élément enfant d'un élément d'interface utilisateur du système d'exploitation parent ActionBar. Ainsi, la définition finale de l'élément de style MyActionBar sera

<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="background">@color/red</item>
    <item name="titleTextStyle">@style/MyActionBarTitle</item>
</style>

Donc c'est le final Styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- This is the styling for action bar -->
        <item name="actionBarStyle">@style/MyActionBar</item>
    </style>

    <style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="background">@color/red</item>
        <item name="titleTextStyle">@style/MyActionBarTitle</item>
    </style>

    <style name="MyActionBarTitle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/white</item>
    </style>
</resources>

ActionBar Avec couleur de titre blanche Pour d'autres options ActionBar Style de menu, reportez - vous à ce lien

— Entailles
source
2
hey man ça a marché. un doute que si je veux changer la couleur de l'icône de débordement de menu, cela change la couleur en fonction de notre thème, n'est-ce pas?. icône blanche pour le thème sombre et icône sombre pour le thème clair, comment puis-je le changer en blanc? considérez la dernière image de votre réponse.
— Ameen Maheen
33

Pour Android 3.0 et supérieur uniquement

Lorsque vous prenez en charge Android 3.0 et supérieur uniquement, vous pouvez définir l'arrière-plan de la barre d'action comme suit:

res / values ​​/ themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme" parent="@style/Theme.Holo.Light.DarkActionBar">
       <item name="android:actionBarStyle">@style/MyActionBar</item>
    </style>

<!-- ActionBar styles -->
  <style name="MyActionBar" parent="@style/Widget.Holo.Light.ActionBar.Solid.Inverse">
       <item name="android:background">#ff0000</item>
  </style>
</resources>

Pour Android 2.1 et supérieur

Lorsque vous utilisez la bibliothèque de support, votre fichier XML de style peut ressembler à ceci:

<?xml version="1.0" encoding="utf-8"?>
  <resources>
  <!-- the theme applied to the application or activity -->
 <style name="CustomActionBarTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/MyActionBar</item>

    <!-- Support library compatibility -->
    <item name="actionBarStyle">@style/MyActionBar</item>
</style>

<!-- ActionBar styles -->
<style name="MyActionBar"
       parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="android:background">@drawable/actionbar_background</item>

    <!-- Support library compatibility -->
    <item name="background">@drawable/actionbar_background</item>
  </style>
 </resources>

Ensuite, appliquez votre thème à l'ensemble de votre application ou à des activités individuelles:

pour plus de détails Documentaion

— Ketan Ahir
source
C'est étrange: vous donnez à Android 3.0 et supérieur un style plus ancien (holo) que 2.1 et supérieur (Material Design / Appcompat) ...
— Roel
@DalvikVM Ouais..Appcompat est pour les anciennes versions. pas besoin de l'utiliser pour les versions supérieures. Au moment de cette réponse, la conception du matériel n'a pas été introduite.
— Ketan Ahir
J'obtiens une erreur: le No resource found that matches the given name '@style/Widget.Holo.Light.ActionBar.Solid.Inverse'.modifier pour android:style/Widget.Holo.Light.ActionBar.Solid.Inverserésoudre le problème. Merci.
— Annie Lagang
@ style / Theme.AppCompat.Light.DarkActionBar ne peut pas être résolu dans mon cas (Android Studio) - ne devrait-il pas être @android: style / Theme.AppCompat.Light.DarkActionBar - c'est-à-dire avec un "android" ajouté avant le style?
— AgentKnopf
32

Vous pouvez changer la couleur de la barre d'action de cette manière:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/green_action_bar</item>
</style>

C'est tout ce dont vous avez besoin pour changer la couleur de la barre d'action.

De plus, si vous souhaitez modifier la couleur de la barre d'état, ajoutez simplement la ligne:

 <item name="android:colorPrimaryDark">@color/green_dark_action_bar</item>

Voici une capture d'écran prise sur le site Android du développeur pour le rendre plus clair, et voici un lien pour en savoir plus sur la personnalisation de la palette de couleurs

entrez la description de l'image ici

— Gjoko Bozinov
source
7

Une autre possibilité de faire.

actionBar.setBackgroundDrawable (nouveau ColorDrawable (Color.parseColor ("# 0000ff")));

— Levi Saturnino
source
5

Je peux changer la couleur du texte ActionBar en utilisant titleTextColor

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="titleTextColor">#333333</item>
</style>
— Yigit
source
3

Couleur personnalisée:

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

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

Style personnalisé:

 <style name="Theme.AndroidDevelopers" parent="android:style/Theme.Holo.Light">
        <item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>
        <item name="android:popupMenuStyle">@style/MyPopupMenu</item>
        <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>
        <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
        <item name="android:actionDropDownStyle">@style/MyDropDownNav</item>
        <item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item>
        <item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item>
    </style>

Pour plus: Android ActionBar

— Demi Lune
source
2

Comme j'utilisais les AppCompatActivityréponses ci-dessus, cela n'a pas fonctionné pour moi. Mais la solution ci-dessous a fonctionné:

Dans res / styles.xml

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


PS: j'ai utilisé colorPrimaryau lieu deandroid:colorPrimary

— zackygaurav
source
1

dans le style.xml ajoutez ce code

<resources>
    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/MyAction</item>
    </style>

    <style name="MyActionBarTheme" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">#333333</item>
    </style>
</resources>
— Milaaaad
source
0

Utilisez ceci - http://jgilfelt.github.io/android-actionbarstylegenerator/

Bon outil pour personnaliser votre barre d'action avec un aperçu en direct en quelques minutes.

— chanu
source
1
Bien que ce lien puisse répondre à la question, il est préférable d'inclure les parties essentielles de la réponse ici et de fournir le lien pour référence. Les réponses aux liens uniquement peuvent devenir invalides si la page liée change.
— Roman Marusyk
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.