Wie stelle ich die Farbe / den Stil einer benutzerdefinierten ActionBar ein?

86

Ich verwende Android Navigation barin meinem Projekt, ich möchte die obere Farbe in der Aktionsleiste in etwas Rotes ändern. Wie kann ich das tun? Ich habe so etwas,

Top schwarz

und ich will so etwas,

oben rot

Wie kann ich das erreichen?

hemantsb
quelle

Antworten:

173

Sie können die Farbe der ActionBar (und anderer Elemente) definieren, indem Sie einen benutzerdefinierten Stil erstellen :

Bearbeiten Sie einfach die Datei res / values ​​/ styles.xml Ihres Android-Projekts.

Zum Beispiel so:

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

Legen Sie dann "MyCustomTheme" als Thema Ihrer Aktivität fest, das die Aktionsleiste enthält.

Sie können auch eine Farbe für die ActionBar festlegen:

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

Von hier aus: Wie ändere ich die Hintergrundfarbe der ActionBar einer ActionBarActivity mithilfe von XML?

Philipp Jahoda
quelle
2
Was meinst du mit "Dann setze" MyCustomTheme "als Thema deiner Aktivität, das die ActionBar enthält." Wie mache ich das?
Kala J
2
In Ihrem Aktivitäts-XML müssen Sie android: theme = "@ style / MyCustomTheme" als Paremeter innerhalb des <android.support.v4.view.ViewPager ... /> -Tags
hinzufügen
2
Was ist mit den verbleibenden Dateien valuesv14 und valuesv21 styles.xml in Android
Harsha
Wie würde man den Titel textStyle ändern?
Adam Hurwitz
@KalaJ Verwendung setTheme(R.style.MyCustomTheme) in der onCreate-Methode Ihrer Aktivität.
NullByte08
57

Im Allgemeinen nutzt das Android-Betriebssystem ein „Thema“, damit App-Entwickler einen universellen Satz von UI-Element-Styling-Parametern global auf Android-Anwendungen als Ganzes oder alternativ auf eine einzelne Aktivitäts-Unterklasse anwenden können.

Daher gibt es drei gängige Android-Betriebssystem-Systemthemen, die Sie in Ihrer Android Manifest XML-Datei angeben können, wenn Sie Apps für Version 3.0 und spätere Versionen entwickeln

Ich beziehe mich hier auf die Support-Bibliothek (APPCOMPAT): - Die drei Themen sind also 1. AppCompat Light Theme (Theme.AppCompat.Light)

Geben Sie hier die Bildbeschreibung ein

  1. AppCompat Dark Theme (Theme.AppCompat),

Geben Sie hier die Bildbeschreibung ein

  1. Und eine Mischung aus diesen beiden, AppCompat Light Theme mit der Darker ActionBar. (Theme.AppCompat.Light.DarkActionBar)

AndroidManifest.xml und sehen Sie das Tag, das Android-Thema wird erwähnt als: - android: theme = "@ style / AppTheme"

Öffnen Sie die Datei Styles.xml und wir haben dort das Basisanwendungsthema deklariert: -

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

Wir müssen diese übergeordneten Themenelemente überschreiben, um die Aktionsleiste zu gestalten.

ActionBar mit unterschiedlichem Hintergrund: -

Dazu müssen wir einen neuen Stil MyActionBar (Sie können einen beliebigen Namen angeben) mit einem übergeordneten Verweis auf @ style / Widget.AppCompat.Light.ActionBar.Solid.Inverse erstellen , der die Stileigenschaften für das Android ActionBar-UI-Element enthält. So wäre die Definition

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

Und auf diese Definition müssen wir in unserem AppTheme verweisen und auf das überschriebene ActionBar-Styling als-- verweisen.

@ style / MyActionBar ActionBar mit rosa Hintergrundfarbe

Ändern Sie die Textfarbe der Titelleiste (z. B. Schwarz zu Weiß): -

Um nun die Titeltextfarbe zu ändern, müssen wir die übergeordnete Referenz parent = "@ style / TextAppearance.AppCompat.Widget.ActionBar.Title"> überschreiben

Die Stildefinition wäre also

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

Wir werden diese Stildefinition in der MyActionBar-Stildefinition referenzieren , da die TitleTextStyle-Änderung ein untergeordnetes Element eines übergeordneten ActionBar-Betriebssystem-UI-Elements ist. Die endgültige Definition des MyActionBar-Stilelements lautet also

<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 ist dies die endgültige 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 Mit weißer Titelfarbe Weitere Informationen zum Menüstil der ActionBar-Optionen finden Sie unter diesem Link

Nicks
quelle
2
Hey Mann, es hat funktioniert. Ein Zweifel, was ist, wenn ich die Farbe des Menüüberlaufsymbols ändern möchte, ändert es die Farbe entsprechend unserem Thema, oder? weißes Symbol für dunkles Thema und dunkles Symbol für helles Thema, wie kann ich es in Weiß ändern? Betrachten Sie das letzte Bild in Ihrer Antwort.
Ameen Maheen
33

Nur für Android 3.0 und höher

Wenn Sie nur Android 3.0 und höher unterstützen, können Sie den Hintergrund der Aktionsleiste folgendermaßen definieren:

res / values ​​/ theme.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>

Für Android 2.1 und höher

Wenn Sie die Support-Bibliothek verwenden, sieht Ihre XML-Stildatei möglicherweise folgendermaßen aus:

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

Wenden Sie dann Ihr Thema auf Ihre gesamte App oder einzelne Aktivitäten an:

Weitere Details Documentaion

Ketan Ahir
quelle
Das ist seltsam: Sie geben Android 3.0 und höher einen älteren Stil (Holo) als 2.1 und höher (Material Design / Appcompat) ...
Roel
@ DalvikVM Yeah..Appcompat ist für ältere Versionen. Keine Notwendigkeit, es für höhere Versionen zu verwenden. Zum Zeitpunkt dieser Antwort wurde kein Materialdesign eingeführt.
Ketan Ahir
Ich erhalte die Fehlermeldung: No resource found that matches the given name '@style/Widget.Holo.Light.ActionBar.Solid.Inverse'.Ändern, um android:style/Widget.Holo.Light.ActionBar.Solid.Inversedas Problem zu lösen. Vielen Dank.
Annie Lagang
@ style / Theme.AppCompat.Light.DarkActionBar kann in meinem Fall nicht aufgelöst werden (Android Studio) - sollte es nicht @android: style / Theme.AppCompat.Light.DarkActionBar sein - dh mit einem vorangestellten "android" vor dem Stil?
AgentKnopf
32

Sie können die Farbe der Aktionsleiste folgendermaßen ändern:

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

Das ist alles, was Sie zum Ändern der Farbe der Aktionsleiste benötigen.

Wenn Sie die Farbe der Statusleiste ändern möchten, fügen Sie einfach die folgende Zeile hinzu:

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

Hier ist ein Screenshot von der Entwickler-Android-Site, um es klarer zu machen, und hier ist ein Link , um mehr über das Anpassen der Farbpalette zu erfahren

Geben Sie hier die Bildbeschreibung ein

Gjoko Bozinov
quelle
7

Eine andere Möglichkeit zu machen.

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

Levi Saturnino
quelle
4

Ich kann die ActionBar-Textfarbe mithilfe von titleTextColor ändern

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

Freiwählbare Farbe:

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

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

Benutzerdefinierter Stil:

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

Für mehr: Android ActionBar

Halbmond
quelle
2

Da ich die AppCompatActivityobigen Antworten verwendet habe, hat es bei mir nicht funktioniert. Aber die folgende Lösung hat funktioniert:

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: Ich habe colorPrimarystatt verwendetandroid:colorPrimary

zackygaurav
quelle
1

Fügen Sie in der Datei style.xml diesen Code hinzu

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

Verwenden Sie dies - http://jgilfelt.github.io/android-actionbarstylegenerator/

Gutes Tool, um Ihre Aktionsleiste mit einer Live-Vorschau in wenigen Minuten anzupassen.

Chanu
quelle
1
Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen. Nur-Link-Antworten können ungültig werden, wenn sich die verknüpfte Seite ändert.
Roman Marusyk