web-dev-qa-db-fra.com

Comment définir la couleur / le style de la barre ActionBar personnalisée?

J'utilise Android Navigation bar dans mon projet, je souhaite modifier la couleur supérieure de la barre d'action en un élément rouge. Comment puis-je faire cela? J'ai quelque chose comme ça,

top black

et je veux quelque chose comme ça,

top red

comment puis-je y arriver?

androidcolorsbackgroundandroid-actionbarnavigation-drawer
82
hemantsb

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

Modifiez simplement le fichier res/values ​​/ styles.xml 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>

Puis définissez "MyCustomTheme" comme thème de votre activité contenant le ActionBar.

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

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

Tiré d'ici: Comment changer la couleur d'arrière-plan du ActionBar d'un ActionBarActivity utilisant XML?

170
Philipp Jahoda

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ément d'interface utilisateur à Android dans son ensemble, ou à un seul Sous-classe d'activité.

Il existe donc trois "thèmes système" traditionnels Android OS, que vous pouvez spécifier dans votre fichier XML Android Manifest lorsque vous développez des applications pour la version 3.0 et les versions ultérieures.

Je parle ici de la bibliothèque de support (APPCOMPAT): - Les trois thèmes sont donc 1. Thème AppCompat Light (Theme.AppCompat.Light)

enter image description here

  1. AppCompat Dark Theme (Theme.AppCompat),

enter image description here

  1. Et un hybride entre ces deux thèmes, AppCompat Light Theme et 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 fichier Styles.xml et le thème de l'application de base y est déclaré: -

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

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

ActionBar avec un arrière-plan de couleur différente: -

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

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

Et nous devons faire référence à cette définition dans notre AppTheme, en désignant le style de barre Action redéfini comme--

@ style/MyActionBar ActionBar with pink background color

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

Donc, la définition du style serait

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

Nous allons référencer 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 système OS parent ActionBar. Donc, 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>

SO c'est la version finale de 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 With white title color Pour d'autres options de la barre d'action, appelez ce lien

52
Nicks

Pour Android 3.0 et versions supérieures uniquement

Lorsque vous ne supportez que Android 3.0 et versions supérieures 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>

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

pour plus de détails Documentaion

33
Ketan Ahir

Vous pouvez changer la couleur de la barre d’action de cette façon:

<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 la rendre plus claire. Voici un lien pour en savoir plus sur la personnalisation de la palette de couleurs.

enter image description here

31
Gjoko Bozinov

Une autre possibilité de faire.

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

7
Levi Saturnino

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

3
Half Moon

Comme j'utilisais AppCompatActivity ci-dessus, les réponses ne fonctionnaient pas pour moi. Mais la solution ci-dessous a fonctionné:

In 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é colorPrimary au lieu de Android:colorPrimary

2
zackygaurav

dans le style.xml ajouter 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>
1
Milaaaad

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.

0
chanu