Appcompat 21 में टूलबार का रंग बदलें


93

मैं नए Appcompat 21 सामग्री डिजाइन सुविधाओं का परीक्षण कर रहा हूं। इसलिए मैंने इस तरह एक टूलबार बनाया है:

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

और इसे मेरी मुख्य लेआउट फ़ाइल में शामिल किया।

तब मैंने इसे supportActionBar की तरह सेट किया है:

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

यह काम कर रहा है, लेकिन किसी तरह मैं टूलबार को अनुकूलित करने के तरीके का पता नहीं लगा सकता। यह ग्रे है और इस पर पाठ काला है। मुझे पृष्ठभूमि और पाठ का रंग कैसे बदलना चाहिए?

मैं इस निर्देश से गुजरा हूँ:

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

रंग बदलने के लिए मैंने क्या देखरेख की है?

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

संपादित करें :

मैं थीम में कोड की इन पंक्तियों को जोड़कर पृष्ठभूमि का रंग बदलने में सक्षम था:

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

लेकिन वे पाठ रंग को प्रभावित नहीं करेंगे। मैं क्या खो रहा हूँ? काले पाठ और काले मेनू बटन के बजाय, मैं एक सफेद पाठ और सफेद मेनू बटन पसंद करूंगा:

यहां छवि विवरण दर्ज करें


गतिविधि के लिए आपका विषय कैसा दिखता है? क्या आपने टूलबार के लिए अपना रंग वहां सेट किया था जैसे कि आपको करना चाहिए?
tyczj

@tyczj मैं अपने पोस्ट में विषय जोड़ रहा हूँ
user2410644

ठीक है, वहाँ आप जवाब है कि आप अपने रंग सेट नहीं है
tyczj

@tyczj, हाँ, मैंने फिर से अपनी पोस्ट को एडिट किया है, मैंने प्राइमरीकलर और प्राइमरीकलर को जोड़ा है, लेकिन कौन सी विशेषता टेक्स्ट का रंग बदलती है?
user2410644

जवाबों:


185

फिर से यह सब आपके द्वारा दिए गए लिंक में है

पाठ को सफ़ेद करने के लिए आपको केवल विषय को बदलना होगा।

इस विषय का उपयोग करें

<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
हाँ, बस एक ही चीज़ पर ध्यान दिया गया, यह अचानक भ्रमित कर रहा था कि डार्क एक्शनबार में लाइट टेक्स्ट और लाइट एक्शनबार डार्क टेक्स्ट था ... धन्यवाद!
user2410644

4
मैंने ऐसा किया है, लेकिन अभी भी काले रंग का फ़ॉन्ट मिला है, क्या मुझे कुछ याद आ रहा है?
अलीजैंड्रो

6
तो, यह ऐप पर @ शैली / ThemeOverlay.AppCompat.Dark.ActionBar की तरह लगता है : विषय टूलबार के पाठ को सफेद में बदल देता है और @ शैली / ThemeOverlay.AppCompat.Light इसे काले रंग में बदल देती है। पृष्ठभूमि का रंग Android से लिया गया है: पृष्ठभूमि विशेषता। जबकि ऐप पर: popupTheme: @ style / ThemeOverlay.AppCompat.Dark व्हाइट टेक्स्ट और ब्लैक बैकग्राउंड देता है और @ स्टाइल / थीम ऑवरप्ले.ऐप.कॉम। Light ब्लैक टेक्स्ट और व्हाइट बैकग्राउंड देता है। gist.github.com/mnemonicflow/7cba09f6461ec86b22b7
काटें

1
धन्यवाद! : D google ने Android पर टूलबार की स्टाइल के साथ वास्तव में खिलवाड़ किया है। तथ्य यह है कि इस सवाल में 50 उत्थान हैं और 22 शुरुआत उसी का प्रमाण है।
FRR

1
अगर टाइटल स्टाइल्स सेट करने के बाद भी ब्लैक रहता है। सुनिश्चित करें कि आप के AppCompatActivityबजाय का विस्तार करें Activity
स्टीफन

60

अद्यतन 12/11/2019: सामग्री घटक पुस्तकालय

सामग्री घटकों और Androidx पुस्तकालयों के साथ आप उपयोग कर सकते हैं:

  • android:backgroundलेआउट में विशेषता:

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
  • डिफ़ॉल्ट शैली लागू करें: style="@style/Widget.MaterialComponents.Toolbar.Primary"या उस से विरासत में मिली शैली को अनुकूलित करें:

    <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"
  • android:themeविशेषता का उपयोग करके डिफ़ॉल्ट रंग को ओवरराइड करें :

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

साथ में:

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

OLD: पुस्तकालयों का समर्थन करें:
आप app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"अन्य उत्तरों में सुझाए गए विषय का उपयोग कर सकते हैं , लेकिन आप इस तरह से एक समाधान का उपयोग कर सकते हैं:

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

और आप इन शैलियों के साथ अपने ui तत्वों का पूर्ण नियंत्रण रख सकते हैं:

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

यह मेरे लिए काम नहीं करता है। पॉपअप मेनू अभी भी सफेद पाठ के साथ काले रंग की पृष्ठभूमि है
Sunkas

1
अनुपयोगी। इसके लिए न्यूनतम एपीआई स्तर 21 की आवश्यकता है
वैभव गुप्ता

3
@VaibhavGupta Appcompat minSdk = 7 नहीं 21. आवश्यकता है
गैब्रिएल Mariotti

10

अरे अगर आप केवल एंड्रॉइड 5.0 के लिए मटेरियल थीम को लागू करना चाहते हैं तो आप इस थीम को इसमें जोड़ सकते हैं

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

यहां एक्शनबार ऑफ मटेरियल डिजाइन के टेक्स्ट कलर के लिए नीचे की लाइन जिम्मेदार है।

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

6

आप कस्टम टूलबार वर्ग बनाकर एक गतिशील टूलबार आइटम को गतिशील रूप से सेट कर सकते हैं :

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);
//                                  }
//                              });
                        }
                    }
                }
            }
        }
    }



}

फिर इसे अपनी लेआउट फ़ाइल में देखें। अब आप एक कस्टम रंग का उपयोग कर सेट कर सकते हैं

toolbar.setItemColor(Color.Red);

सूत्रों का कहना है:

मुझे यहां ऐसा करने की जानकारी मिली: Android टूलबार आइकन रंग को गतिशील कैसे बदलें

और फिर मैंने इसे संपादित किया, इस पर सुधार किया, और इसे यहां पोस्ट किया: GitHub: AndroidDynamicToolbarItemCC


5

यह वही है जिसे डार्कएशनबार के रूप में जाना जाता है जिसका अर्थ है कि आपको अपनी वांछित शैली प्राप्त करने के लिए निम्नलिखित विषय का उपयोग करना चाहिए:

<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

आप इन के साथ टूलबार में पाठ का रंग बदल सकते हैं:

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

2

इसे इस 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

अपनी शैलियों में इसे आज़माएं। xml:

colorPrimary टूलबार का रंग होगा।

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

क्या आपने इसे ग्रहण में बनाया था?


1

मैंने अधिक अध्ययन के बाद इस मुद्दे को हल किया ...

Api21 और अधिक उपयोग के लिए

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

निम्न संस्करणों के लिए उपयोग करें

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

1

यदि आप अपने टूलबार का रंग अपने पूरे ऐप में बदलना चाहते हैं, तो style.xml का लाभ उठाएं। सामान्य तौर पर, मैं अपने जावा कोड में यूआई घटकों को बदलने से बचता हूं जब तक कि मैं प्रोग्रामिक रूप से कुछ करने की कोशिश नहीं कर रहा हूं। यदि यह एक बार सेट है, तो आपको अपना कोड क्लीनर बनाने के लिए इसे xml में करना चाहिए। यहां आपकी शैली क्या है। xml जैसा दिखेगा:

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

सुनिश्चित करें कि आप अपने AndroidManifext.xml में उपरोक्त शैली का उपयोग करते हैं:

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

मुझे अलग-अलग गतिविधियों के लिए अलग-अलग टूलबार रंग चाहिए थे। तो मैं फिर से इस तरह की शैलियों का लाभ उठाता हूं:

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

फिर से, अपने AndroidManifest.xml में प्रत्येक गतिविधि के लिए शैलियों को इस तरह लागू करें:

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

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

0

सफेद पृष्ठभूमि के रूप में टूलबार के साथ AppCompatActivity का उपयोग करने वाले लोगों के लिए। इस कोड का उपयोग करें।

अपडेट किया गया: दिसंबर, 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
डिफ़ॉल्ट टूलबार में क्या अंतर है?
कूलमाइंड
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.