Jak ustawić niestandardowy kolor / styl ActionBar?

87

Używam Android Navigation barw moim projekcie, chcę zmienić górny kolor paska akcji na coś czerwonego, jak mogę to zrobić? Mam coś takiego

top czarny

i chcę coś takiego,

top czerwony

jak mogę to osiągnąć?

hemantsb
źródło

Odpowiedzi:

174

Możesz zdefiniować kolor ActionBar (i innych elementów), tworząc własny styl :

Po prostu edytuj plik res / values ​​/ styles.xml projektu systemu Android.

Na przykład w ten sposób:

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

Następnie ustaw „MyCustomTheme” jako motyw działania, który zawiera ActionBar.

Możesz również ustawić kolor ActionBar w następujący sposób:

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

Zaczerpnięte stąd: Jak zmienić kolor tła ActionBar ActionBarActivity przy użyciu XML?

Philipp Jahoda
źródło
2
Co masz na myśli, mówiąc „Następnie ustaw„ MyCustomTheme ”jako motyw działania, który zawiera ActionBar? Jak mogę to zrobić?
Kala J
2
W pliku XML działania musisz dodać android: theme = "@ style / MyCustomTheme" jako parametr wewnątrz tagu <android.support.v4.view.ViewPager ... />
PedroD
2
co z pozostałymi plikami valuesv14 i valuesv21 styles.xml w systemie Android
Harsha
Jak można by zmienić tytuł textStyle?
Adam Hurwitz
@KalaJ użyj setTheme(R.style.MyCustomTheme) w metodzie onCreate Twojej aktywności.
NullByte08
57

Ogólnie system operacyjny Android wykorzystuje „motyw”, aby umożliwić programistom aplikacji globalne stosowanie uniwersalnego zestawu parametrów stylizacji elementów interfejsu użytkownika do aplikacji na Androida jako całości lub alternatywnie do pojedynczej podklasy działania.

Istnieją więc trzy główne „motywy systemowe” systemu operacyjnego Android, które można określić w pliku XML manifestu systemu Android podczas opracowywania aplikacji dla wersji 3.0 i nowszych.

Odnoszę się tutaj do biblioteki wsparcia (APPCOMPAT): - Więc te trzy motywy to 1. AppCompat Light Theme (Theme.AppCompat.Light)

wprowadź opis obrazu tutaj

  1. AppCompat Dark Theme (Theme.AppCompat),

wprowadź opis obrazu tutaj

  1. I hybryda między tymi dwoma, AppCompat Light Theme z Darker ActionBar. (Theme.AppCompat.Light.DarkActionBar)

AndroidManifest.xml i zobacz tag, motyw Androida jest wymieniony jako: - android: theme = "@ style / AppTheme"

Otwórz Styles.xml i mamy tam zadeklarowany motyw bazowy aplikacji: -

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

Musimy zastąpić te elementy motywu nadrzędnego, aby stylizować pasek akcji.

ActionBar z innym kolorem tła: -

Aby to zrobić, musimy utworzyć nowy styl MyActionBar (możesz nadać dowolną nazwę) z nadrzędnym odniesieniem do @ style / Widget.AppCompat.Light.ActionBar.Solid.Inverse, który przechowuje cechy stylu dla elementu Android ActionBar UI. Taka byłaby definicja

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

I do tej definicji musimy się odwołać w naszym AppTheme, wskazując na nadpisany styl ActionBar jako -

@ style / MyActionBar ActionBar z różowym kolorem tła

Zmień kolor tekstu paska tytułu (np. Czarny na biały): -

Teraz, aby zmienić kolor tekstu tytułu, musimy zastąpić odwołanie nadrzędne parent = "@ style / TextAppearance.AppCompat.Widget.ActionBar.Title">

Więc definicja stylu byłaby

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

Będziemy odnosić się do tej definicji stylu wewnątrz definicji stylu MyActionBar , ponieważ modyfikacja TitleTextStyle jest elementem potomnym elementu interfejsu użytkownika nadrzędnego systemu operacyjnego ActionBar. Tak więc ostateczna definicja elementu stylu MyActionBar to

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

Więc to jest ostateczna wersja 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 Z białym kolorem tytułu Więcej informacji na temat stylizacji menu opcji ActionBar można znaleźć pod tym linkiem

Nicki
źródło
2
hej człowieku, to zadziałało. wątpię, co jeśli chcę zmienić kolor ikony przepełnienia menu, zmienia kolor zgodnie z naszym motywem, prawda? biała ikona ciemnego motywu i ciemna ikona jasnego motywu, jak mogę zmienić ją na białą? rozważ ostatni obraz w swojej odpowiedzi.
Ameen Maheen
33

Tylko dla Androida 3.0 i nowszych

Obsługując tylko system Android 3.0 i nowsze, możesz zdefiniować tło paska akcji w następujący sposób:

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>

Dla Androida 2.1 i nowszych

Podczas korzystania z biblioteki obsługi, twój plik XML stylu może wyglądać następująco:

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

Następnie zastosuj motyw do całej aplikacji lub poszczególnych działań:

aby uzyskać więcej informacji Documentaion

Ketan Ahir
źródło
To dziwne: dajesz Androidowi 3.0 i nowszym starszy styl (holo) niż 2.1 i wyższy (Material Design / Appcompat) ...
Roel
@DalvikVM Yeah..Appcompat jest dla starszych wersji. nie ma potrzeby używania go w wyższych wersjach. W czasie tej odpowiedzi nie opracowano materiału konstrukcyjnego.
Ketan Ahir
Pojawia się błąd: No resource found that matches the given name '@style/Widget.Holo.Light.ActionBar.Solid.Inverse'.zmiana go w celu android:style/Widget.Holo.Light.ActionBar.Solid.Inverserozwiązania problemu. Dzięki.
Annie Lagang,
@ style / Theme.AppCompat.Light.DarkActionBar nie można rozwiązać w moim przypadku (Android Studio) - czy nie powinien to być @android: style / Theme.AppCompat.Light.DarkActionBar - tj. z przedrostkiem „android” przed stylem?
AgentKnopf
32

Możesz zmienić kolor paska akcji w ten sposób:

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

To wszystko, czego potrzebujesz, aby zmienić kolor paska akcji.

Dodatkowo, jeśli chcesz zmienić kolor paska stanu, po prostu dodaj linię:

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

Oto zrzut ekranu zrobiony ze strony programistów Androida, aby był bardziej przejrzysty, a tutaj jest link, aby przeczytać więcej o dostosowywaniu palety kolorów

wprowadź opis obrazu tutaj

Gjoko Bozinov
źródło
7

Inna możliwość wykonania.

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

Levi Saturnino
źródło
5

Mogę zmienić kolor tekstu ActionBar za pomocą titleTextColor

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="titleTextColor">#333333</item>
</style>
Yigit
źródło
3

Kolor niestandardowy:

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

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

Styl niestandardowy:

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

Więcej: Android ActionBar

Pół księżyc
źródło
2

Ponieważ korzystałem z AppCompatActivitypowyższych odpowiedzi, nie działały na mnie. Ale poniższe rozwiązanie zadziałało:

W 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: colorPrimaryzamiastandroid:colorPrimary

zackygaurav
źródło
1

w style.xml dodaj ten kod

<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
źródło
0

Użyj tego - http://jgilfelt.github.io/android-actionbarstylegenerator/

Dobre narzędzie do dostosowywania paska akcji z podglądem na żywo w kilka minut.

chanu
źródło
1
Chociaż ten link może odpowiedzieć na pytanie, lepiej jest zawrzeć tutaj zasadnicze części odpowiedzi i podać link do odniesienia. Odpowiedzi zawierające tylko łącze mogą stać się nieprawidłowe, jeśli połączona strona ulegnie zmianie.
Roman Marusyk