Ändern Sie die Farbe der Symbolleiste in Appcompat 21


92

Ich teste die neuen Funktionen von Appcompat 21 Material Design. Deshalb habe ich eine Symbolleiste wie folgt erstellt:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>

und in meine Hauptlayoutdatei aufgenommen.

Dann habe ich es so als supportActionBar eingestellt:

Toolbar toolBar = (Toolbar)findViewById(R.id.activity_my_toolbar);
setSupportActionBar(toolBar);

Es funktioniert, aber irgendwie kann ich nicht genau herausfinden, wie ich die Symbolleiste anpassen kann. Es ist grau und der Text darauf ist schwarz. Wie soll ich Hintergrund und Textfarbe ändern?

Ich habe diese Anleitung durchgesehen:

http://android-developers.blogspot.de/2014/10/appcompat-v21-material-design-for-pre.html

Was habe ich überwacht, um die Farben zu ändern?

 <style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="android:windowActionBar" tools:ignore="NewApi">false</item>
    <item name="windowActionBar">false</item>
</style>

EDIT :

Ich konnte die Hintergrundfarbe ändern, indem ich dem Thema folgende Codezeilen hinzufügte:

<item name="colorPrimary">@color/actionbar</item>
<item name="colorPrimaryDark">@color/actionbar_dark</item>

Die Textfarbe wird jedoch nicht beeinflusst. Was vermisse ich? Anstelle des schwarzen Textes und der schwarzen Menüschaltfläche würde ich lieber einen weißen Text und weiße Menüschaltflächen bevorzugen:

Geben Sie hier die Bildbeschreibung ein


Wie sieht Ihr Thema für die Aktivität aus? Haben Sie dort Ihre Farbe für die Symbolleiste so festgelegt, wie Sie es sollten?
Tyczj

@tyczj Ich füge das Thema meinem Beitrag hinzu
user2410644

ok gut da ist du antwortest du
stellst

@tyczj, Ja, ich habe meinen Beitrag erneut bearbeitet. Ich habe Primärfarbe und Primärfarbe hinzugefügt, aber welches Attribut ändert die Textfarbe?
user2410644

Antworten:


185

Auch dies ist alles in dem von Ihnen angegebenen Link

Um den Text in Weiß zu ändern, müssen Sie nur das Thema ändern.

Verwenden Sie dieses Thema

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

4
Ja, habe gerade das Gleiche bemerkt, es war plötzlich verwirrend, dass die dunkle Aktionsleiste hellen Text und die helle Aktionsleiste dunklen Text hatte ... Danke!
user2410644

4
Ich habe das so gemacht, aber immer noch die schwarze Schrift, habe ich etwas vermisst?
Alijandro

6
Es scheint also so, als ob die @ style / ThemeOverlay.AppCompat.Dark.ActionBar in der App: theme den Text der Symbolleiste in Weiß und @ style / ThemeOverlay.AppCompat.Light in Schwarz ändert. Die Hintergrundfarbe wird aus dem Android: Hintergrundattribut ausgewählt. Während in der App: popupTheme: @ style / ThemeOverlay.AppCompat.Dark weißen Text und schwarzen Hintergrund und @ style / ThemeOverlay.AppCompat.Light schwarzen Text und weißen Hintergrund liefert. gist.github.com/mnemonicflow/7cba09f6461ec86b22b7
Bitek

1
Vielen Dank! : D Google hat das Styling der Symbolleiste auf Android wirklich durcheinander gebracht. Die Tatsache, dass diese Frage 50 positive Stimmen und 22 Starts hat, ist ein Beweis dafür.
FRR

1
Wenn der Titel nach dem Festlegen der Stile immer noch schwarz bleibt. Stellen Sie sicher , verlängern AppCompatActivitystatt Activity.
Stefana

59

UPDATE 12/11/2019: Materialkomponentenbibliothek

Mit den Material Components- und Androidx-Bibliotheken können Sie Folgendes verwenden:

  • das android:backgroundAttribut im Layout:

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
  • Wenden Sie den Standardstil an: style="@style/Widget.MaterialComponents.Toolbar.Primary"oder passen Sie den von ihm geerbten Stil an:

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
  • Überschreiben Sie die Standardfarbe mit dem android:themeAttribut:

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/MyThemeOverlay_Toolbar"

mit:

  <style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <item name="android:textColorPrimary">....</item>
    <item name="colorPrimary">@color/.....
    <item name="colorOnPrimary">@color/....</item>
  </style>

ALT: Unterstützungsbibliotheken:
Sie können ein app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"Thema verwenden, wie in anderen Antworten vorgeschlagen, aber Sie können auch eine Lösung wie die folgende verwenden:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/HeaderBar"
    app:theme="@style/ActionBarThemeOverlay"
    app:popupTheme="@style/ActionBarPopupThemeOverlay"/>

Mit diesen Stilen haben Sie die volle Kontrolle über Ihre UI-Elemente:

<style name="ActionBarThemeOverlay" parent="">
    <item name="android:textColorPrimary">#fff</item>
    <item name="colorControlNormal">#fff</item>
    <item name="colorControlHighlight">#3fff</item>
</style>

<style name="HeaderBar">
    <item name="android:background">?colorPrimary</item>
</style>

<style name="ActionBarPopupThemeOverlay" parent="ThemeOverlay.AppCompat.Light" >
    <item name="android:background">@android:color/white</item>
    <item name="android:textColor">#000</item>
</style>

Das funktioniert bei mir nicht. Popup-Menü ist immer noch schwarzer Hintergrund mit weißem Text
Sunkas

1
Nicht hilfreich. Es erfordert eine
minimale

3
@ VaibhavGupta Appcompat erfordert minSdk = 7 nicht 21.
Gabriele Mariotti

10

Hey, wenn Sie Material Theme nur für Android 5.0 anwenden möchten, können Sie dieses Theme hinzufügen

<style name="AppHomeTheme" parent="@android:style/Theme.Material.Light">

        <!-- customize the color palette -->
        <item name="android:colorPrimary">@color/blue_dark_bg</item>
        <item name="android:colorPrimaryDark">@color/blue_status_bar</item>
        <item name="android:colorAccent">@color/blue_color_accent</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textColorPrimary">@android:color/white</item>
        <item name="android:actionMenuTextColor">@android:color/black</item>
    </style> 

Hier unten ist die Zeile für die Textfarbe der Aktionsleiste des Materialdesigns verantwortlich.

<item name="android:textColorPrimary">@android:color/white</item>

6

Sie können eine benutzerdefinierte Symbolleistenelementfarbe dynamisch festlegen, indem Sie eine benutzerdefinierte Symbolleistenklasse erstellen:

package view;

import android.app.Activity;
import android.content.Context;
import android.graphics.ColorFilter;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffColorFilter;
import android.support.v7.internal.view.menu.ActionMenuItemView;
import android.support.v7.widget.ActionMenuView;
import android.support.v7.widget.Toolbar;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AutoCompleteTextView;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomToolbar extends Toolbar{

    public CustomToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // TODO Auto-generated constructor stub
    }

    public CustomToolbar(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    public CustomToolbar(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        ctxt = context;
    }

    int itemColor;
    Context ctxt;

    @Override 
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        Log.d("LL", "onLayout");
        super.onLayout(changed, l, t, r, b);
        colorizeToolbar(this, itemColor, (Activity) ctxt);
    } 

    public void setItemColor(int color){
        itemColor = color;
        colorizeToolbar(this, itemColor, (Activity) ctxt);
    }



    /**
     * Use this method to colorize toolbar icons to the desired target color
     * @param toolbarView toolbar view being colored
     * @param toolbarIconsColor the target color of toolbar icons
     * @param activity reference to activity needed to register observers
     */
    public static void colorizeToolbar(Toolbar toolbarView, int toolbarIconsColor, Activity activity) {
        final PorterDuffColorFilter colorFilter
                = new PorterDuffColorFilter(toolbarIconsColor, PorterDuff.Mode.SRC_IN);

        for(int i = 0; i < toolbarView.getChildCount(); i++) {
            final View v = toolbarView.getChildAt(i);

            doColorizing(v, colorFilter, toolbarIconsColor);
        }

      //Step 3: Changing the color of title and subtitle.
        toolbarView.setTitleTextColor(toolbarIconsColor);
        toolbarView.setSubtitleTextColor(toolbarIconsColor);
    }

    public static void doColorizing(View v, final ColorFilter colorFilter, int toolbarIconsColor){
        if(v instanceof ImageButton) {
            ((ImageButton)v).getDrawable().setAlpha(255);
            ((ImageButton)v).getDrawable().setColorFilter(colorFilter);
        }

        if(v instanceof ImageView) {
            ((ImageView)v).getDrawable().setAlpha(255);
            ((ImageView)v).getDrawable().setColorFilter(colorFilter);
        }

        if(v instanceof AutoCompleteTextView) {
            ((AutoCompleteTextView)v).setTextColor(toolbarIconsColor);
        }

        if(v instanceof TextView) {
            ((TextView)v).setTextColor(toolbarIconsColor);
        }

        if(v instanceof EditText) {
            ((EditText)v).setTextColor(toolbarIconsColor);
        }

        if (v instanceof ViewGroup){
            for (int lli =0; lli< ((ViewGroup)v).getChildCount(); lli ++){
                doColorizing(((ViewGroup)v).getChildAt(lli), colorFilter, toolbarIconsColor);
            }
        }

        if(v instanceof ActionMenuView) {
            for(int j = 0; j < ((ActionMenuView)v).getChildCount(); j++) {

                //Step 2: Changing the color of any ActionMenuViews - icons that
                //are not back button, nor text, nor overflow menu icon.
                final View innerView = ((ActionMenuView)v).getChildAt(j);

                if(innerView instanceof ActionMenuItemView) {
                    int drawablesCount = ((ActionMenuItemView)innerView).getCompoundDrawables().length;
                    for(int k = 0; k < drawablesCount; k++) {
                        if(((ActionMenuItemView)innerView).getCompoundDrawables()[k] != null) {
                            final int finalK = k;

                            //Important to set the color filter in seperate thread, 
                            //by adding it to the message queue
                            //Won't work otherwise. 
                            //Works fine for my case but needs more testing

                            ((ActionMenuItemView) innerView).getCompoundDrawables()[finalK].setColorFilter(colorFilter);

//                              innerView.post(new Runnable() {
//                                  @Override
//                                  public void run() {
//                                      ((ActionMenuItemView) innerView).getCompoundDrawables()[finalK].setColorFilter(colorFilter);
//                                  }
//                              });
                        }
                    }
                }
            }
        }
    }



}

Beziehen Sie sich dann in Ihrer Layoutdatei darauf. Jetzt können Sie mit eine benutzerdefinierte Farbe festlegen

toolbar.setItemColor(Color.Red);

Quellen:

Die Informationen dazu finden Sie hier: So ändern Sie dynamisch die Farbe der Android-Symbolleistensymbole

und dann habe ich es bearbeitet, verbessert und hier gepostet: GitHub: AndroidDynamicToolbarItemColor


5

Dies ist eine sogenannte DarkActionBar. Dies bedeutet, dass Sie das folgende Thema verwenden sollten, um den gewünschten Stil zu erhalten:

<android.support.v7.widget.Toolbar  
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="@dimen/triple_height_toolbar"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

2

Sie können die Farbe des Texts in der Symbolleiste folgendermaßen ändern:

<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:textColor">#FFFFFF</item>

2

Erreichen Sie dies, indem Sie Folgendes verwenden toolbar:

<android.support.v7.widget.Toolbar
        android:id="@+id/base_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

1

Versuchen Sie dies in Ihrer styles.xml:

colorPrimary ist die Farbe der Symbolleiste.

<resources>

<style name="AppTheme" parent="Theme.AppCompat">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_pressed</item>
    <item name="colorAccent">@color/accent</item>
</style>

Hast du das übrigens in Eclipse gebaut?


1

Ich habe dieses Problem nach weiteren Studien gelöst ...

für Api21 und mehr verwenden

   <item name="android:textColorPrimary">@color/white</item>

für niedrigere Versionen verwenden

   <item name="actionMenuTextColor">@color/white</item>

1

Wenn Sie die Farbe Ihrer Symbolleiste in Ihrer gesamten App ändern möchten, nutzen Sie die Datei styles.xml. Im Allgemeinen vermeide ich es, UI-Komponenten in meinem Java-Code zu ändern, es sei denn, ich versuche, etwas programmgesteuert zu tun. Wenn dies eine einmalige Einstellung ist, sollten Sie dies in XML tun, um Ihren Code sauberer zu machen. So sieht Ihre styles.xml aus:

    <!-- Base application theme. -->
<style name="YourAppName.AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Color Primary will be your toolbar color -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <!-- Color Primary Dark will be your default status bar color -->
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>

Stellen Sie sicher, dass Sie den obigen Stil in Ihrer AndroidManifext.xml als solchen verwenden:

    <application
        android:theme="@style/YourAppName.AppTheme">
    </application>

Ich wollte verschiedene Symbolleistenfarben für verschiedene Aktivitäten. Also habe ich wieder Stile wie folgt eingesetzt:

    <style name="YourAppName.AppTheme.Activity1">
    <item name="colorPrimary">@color/activity1_primary</item>
    <item name="colorPrimaryDark">@color/activity1_primaryDark</item>
</style>

<style name="YourAppName.AppTheme.Activity2">
    <item name="colorPrimary">@color/activity2_primary</item>
    <item name="colorPrimaryDark">@color/activity2_primaryDark</item>
</style>

Wenden Sie die Stile erneut auf jede Aktivität in Ihrer AndroidManifest.xml als solche an:

<activity
    android:name=".Activity2"
    android:theme="@style/YourAppName.AppTheme.Activity2"
</activity>

<activity
    android:name=".Activity1"
    android:theme="@style/YourAppName.AppTheme.Activity1"
</activity>

0

Für Personen, die AppCompatActivity mit Symbolleiste als weißem Hintergrund verwenden. Verwenden Sie diesen Code.

Aktualisiert: Dezember 2017

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:theme="@style/ThemeOverlay.AppCompat.Light">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_edit"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/AppTheme.AppBarOverlay"
        app:title="Edit Your Profile"/>

</android.support.design.widget.AppBarLayout>

1
Was ist der Unterschied zu einer Standardsymbolleiste?
CoolMind
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.