เปลี่ยนสี Toolbar ใน Appcompat 21


94

ฉันกำลังทดสอบคุณสมบัติใหม่ของ Appcompat 21 Material Design ดังนั้นฉันจึงสร้าง Toolbar ดังนี้:

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

แต่จะไม่ส่งผลต่อสีข้อความ ฉันขาดอะไรไป? แทนที่จะเป็นข้อความสีดำและปุ่มเมนูสีดำฉันต้องการใช้ข้อความสีขาวและปุ่มเมนูสีขาวแทน:

ป้อนคำอธิบายภาพที่นี่


ธีมของคุณเป็นอย่างไรสำหรับกิจกรรมนี้? คุณได้กำหนดสีของ Toolbar ตรงนั้นอย่างที่ควรหรือไม่
tyczj

@tyczj ฉันกำลังเพิ่มธีมในโพสต์ของฉัน
user2410644

ตกลงคุณตอบว่าคุณไม่ได้กำหนดสีของคุณ
tyczj

@tyczj ใช่ฉันแก้ไขโพสต์ของฉันอีกครั้งฉันเพิ่ม primarycolor และ primarydarkcolor แต่แอตทริบิวต์ใดที่เปลี่ยนสีข้อความ
user2410644

คำตอบ:


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
ใช่เพิ่งสังเกตเห็นสิ่งเดียวกันทันใดนั้นเองก็สับสนว่าแถบแอ็คชั่นสีเข้มมีข้อความสีอ่อนและข้อความสีเข้มในแถบแอ็คชั่นบาร์สว่าง ... ขอบคุณ!
user2410644

4
ฉันทำแบบนี้แล้ว แต่ยังได้ฟอนต์สีดำฉันทำอะไรหายไปหรือเปล่า
alijandro

6
ดังนั้นดูเหมือนว่า@ style / ThemeOverlay.AppCompat.Dark.ActionBarบนแอป: ธีมจะเปลี่ยนข้อความของแถบเครื่องมือเป็นสีขาวและ @ style / ThemeOverlay.AppCompat.Light จะเปลี่ยนเป็นสีดำ สีพื้นหลังถูกเลือกจาก android: background attribute ในขณะที่แอพ: popupTheme: @ style / ThemeOverlay.AppCompat.Dark ให้ข้อความสีขาวและพื้นหลังสีดำและ @ style / ThemeOverlay.AppCompat.Light ให้ข้อความสีดำและพื้นหลังสีขาว gist.github.com/mnemonicflow/7cba09f6461ec86b22b7
Alex Bitek

1
ขอบคุณ! : D google ยุ่งเหยิงกับรูปแบบของ Toolbar บน Android ความจริงที่ว่าคำถามนี้มี 50 upvotes และ 22 start เป็นข้อพิสูจน์ว่า
FRR

1
หากชื่อยังคงเป็นสีดำหลังจากตั้งค่ารูปแบบ ให้แน่ใจว่าคุณขยายแทนAppCompatActivity Activity
stefana

61

อัปเดต 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>

เก่า: รองรับไลบรารี:
คุณสามารถใช้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
ไม่เป็นประโยชน์ ต้องใช้ Min API ระดับ 21
Vaibhav Gupta

3
@VaibhavGupta Appcompat ต้องการ minSdk = 7 ไม่ใช่ 21.
Gabriele Mariotti

11

เฮ้ถ้าคุณต้องการใช้ธีม Material สำหรับ Android 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> 

บรรทัดด้านล่างนี้มีความรับผิดชอบสำหรับสีข้อความของ Actionbar of Material design

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


5

นี่คือสิ่งที่เรียกว่า DarkActionBar ซึ่งหมายความว่าคุณควรใช้ธีมต่อไปนี้เพื่อให้ได้สไตล์ที่คุณต้องการ:

<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

ลองสิ่งนี้ใน styles.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>

คุณสร้างสิ่งนี้ใน Eclipse หรือไม่?


1

ฉันแก้ไขปัญหานี้หลังจากศึกษาเพิ่มเติม ...

สำหรับ Api21 และการใช้งานอื่น ๆ

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

สำหรับรุ่นที่ต่ำกว่าให้ใช้

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

1

หากคุณต้องการเปลี่ยนสีของแถบเครื่องมือของคุณทั้งหมดในแอปของคุณให้ใช้ประโยชน์จาก styles.xml โดยทั่วไปฉันหลีกเลี่ยงการแก้ไขส่วนประกอบ ui ในโค้ด java ของฉันเว้นแต่ฉันจะพยายามทำบางอย่างโดยใช้โปรแกรม หากเป็นการตั้งค่าแบบครั้งเดียวคุณควรใช้ใน xml เพื่อทำให้โค้ดของคุณสะอาดขึ้น styles.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 โดยใช้ Toolbar เป็นพื้นหลังสีขาว ใช้รหัสนี้

อัปเดต: ธันวาคม 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
ความแตกต่างกับ Toolbar เริ่มต้นคืออะไร?
CoolMind
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.