অ্যাপকম্প্যাট 21 এ সরঞ্জামদণ্ডের রঙ পরিবর্তন করুন


94

আমি নতুন অ্যাপকম্প্যাট 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"/>

এবং এটি আমার মূল বিন্যাস ফাইলটিতে অন্তর্ভুক্ত করেছে।

তারপরে আমি এটিকে সমর্থনঅ্যাকশনবার হিসাবে সেট করেছি:

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

এটি কাজ করছে, তবে কোনওভাবে আমি কীভাবে সরঞ্জামদণ্ডটি কাস্টমাইজ করতে পারি তা বেশ বুঝতে পারি না। এটি ধূসর এবং এটিতে লেখাটি কালো। আমার পটভূমি এবং পাঠ্যের রঙ কীভাবে পরিবর্তন করা উচিত?

আমি এই নির্দেশাবলী পেরিয়েছি:

http://android-developers.blogspot.de/2014/10/appcompat-v21-matory-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 আমি আমার পোস্টে থিমটি যুক্ত করছি
ইউজার 2410644

ঠিক আছে আপনি উত্তর দিতে পারেন যে আপনি আপনার রঙ সেট করেন না
tyczj

@ টিসিজেজে, হ্যাঁ, আমি আবার আমার পোস্টটি সম্পাদনা করেছি, আমি প্রাইমারি কালার এবং প্রাইমারিডারকালার যুক্ত করেছি, তবে কোন বৈশিষ্ট্যটি পাঠ্যের রঙ পরিবর্তন করে?
ব্যবহারকারী 2410644

উত্তর:


186

আবার আপনার সরবরাহ করা লিঙ্কটিতে এটিই রয়েছে

পাঠ্যকে সাদা করার জন্য আপনাকে যা করতে হবে তা হ'ল থিম পরিবর্তন করা।

এই থিমটি ব্যবহার করুন

<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
হ্যাঁ, ঠিক একই জিনিসটি লক্ষ্য করেছেন, এটি হঠাৎ বিভ্রান্ত করছে যে অন্ধকার অ্যাকশনবারে হালকা পাঠ্য এবং হালকা অ্যাকশনবারের গা dark় পাঠ্য ছিল ... ধন্যবাদ!
ব্যবহারকারী 2410644

4
আমি এটি করেছি, তবে এখনও কালো রঙের ফন্ট পেয়েছি, আমি কি কিছু হারিয়েছি?
আলিজান্দ্রো

6
সুতরাং, এটি @ শৈলী / থিমওভারলে.অ্যাপকম্প্যাট.ডार्क . অ্যাকশনবারের মতো অ্যাপ্লিকেশনটিতে মনে হচ্ছে: থিমটি সরঞ্জামদণ্ডের পাঠ্যকে সাদা এবং @ শৈলী / থিমোভারলে.অ্যাপকম্প্যাট.লাইট এটিকে কালোতে পরিবর্তন করে। ব্যাকগ্রাউন্ডের রঙ অ্যান্ড্রয়েড থেকে বেছে নেওয়া হয়েছে: ব্যাকগ্রাউন্ড বৈশিষ্ট্য। অ্যাপ্লিকেশনটিতে: পপআপ থেম: @ শৈলী / থিমওভারলে.অ্যাপকম্প্যাট.ডार्ক সাদা পাঠ্য এবং কালো ব্যাকগ্রাউন্ড এবং @ শৈলী / থিমোভারলে.অ্যাপকম্প্যাট.লাইট কালো পাঠ্য এবং সাদা ব্যাকগ্রাউন্ড দেয়। gist.github.com/mnemonicflow/7cba09f6461ec86b22b7
অ্যালেক্স

4
ধন্যবাদ! : ডি গুগল অ্যান্ড্রয়েডে সরঞ্জামদণ্ডের স্টাইলিংয়ের সাথে সত্যিই জড়িয়ে গেল। এই প্রশ্নের 50 টি উত্স এবং 22 সূচনা রয়েছে তা তার প্রমাণ।
এফআরআর

4
শৈলী সেট করার পরেও যদি শিরোনামটি কালো থাকে। AppCompatActivityপরিবর্তে আপনি প্রসারিত নিশ্চিত করুন Activity
স্টেফানা

61

আপডেট 12/11/2019: উপাদান উপাদান লাইব্রেরি

উপাদান উপাদান এবং অ্যান্ড্রয়েডএক্স লাইব্রেরি সহ আপনি ব্যবহার করতে পারেন:

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

ওল্ড: সাপোর্ট লাইব্রেরি:
আপনি 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"/>

এবং এই স্টাইলগুলির সাথে আপনার ইউআই উপাদানগুলির সম্পূর্ণ নিয়ন্ত্রণ থাকতে পারে:

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

এটি আমার পক্ষে কাজ করে না। পপআপ মেনু এখনও সাদা পাঠ্য সহ কালো পটভূমি
সুনকাস

4
সহায়ক নয়. এটির পক্ষে ন্যূনতম এপিআই স্তর 21
বৈভব গুপ্ত

4
@ বৈভব গুপ্ত অ্যাপক্যাম্পেটের জন্য মিনিসডিকে = 7 নয় 21.
গ্যাব্রিয়েল মারিওটি

11

আরে আপনি যদি কেবল অ্যান্ড্রয়েড 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);

সূত্র:

আমি এখানে এটি করার জন্য তথ্য পেয়েছি: অ্যান্ড্রয়েড সরঞ্জামদণ্ডের আইকনগুলির পরিবর্তন কীভাবে করা যায়

এবং তারপরে আমি এটি সম্পাদনা করেছি, এটির উপরে উন্নতি করেছি এবং এটি এখানে পোস্ট করেছি: গিটহাব: অ্যান্ড্রয়েড ডায়নামিকটুলবার আইটেম রঙ


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

আপনার শৈলীতে এটি চেষ্টা করুন। এক্সএমএল:

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

আপনি যদি সমস্ত অ্যাপ্লিকেশন জুড়ে আপনার সরঞ্জামদণ্ডের রঙ পরিবর্তন করতে চান তবে স্টাইলগুলি.এক্সএমএল উপার্জন করুন। সাধারণভাবে, আমি অগ্রণীভাবে কিছু করার চেষ্টা না করে আমি আমার জাভা কোডগুলিতে ইউআই উপাদানগুলি পরিবর্তন করা এড়াতে চাই। যদি এটি ওয়ান টাইম সেট থাকে তবে আপনার কোডটি ক্লিনার করার জন্য আপনার এটি 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>

আবার আপনার অ্যান্ড্রয়েড ম্যানিফেস্ট.এক্সএমএলে প্রতিটি ক্রিয়াকলাপে শৈলীগুলি প্রয়োগ করুন:

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

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

0

এমন লোকদের জন্য যারা টুলবারের সাথে অ্যাপকম্প্যাটঅ্যাক্টিভিটি সাদা ব্যাকগ্রাউন্ড হিসাবে ব্যবহার করছেন। এই কোড ব্যবহার করুন।

আপডেট হয়েছে: ডিসেম্বর, 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>

4
একটি ডিফল্ট টুলবারের সাথে পার্থক্য কী?
শীতলমাইন্ড
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.