Thay đổi màu Thanh công cụ trong Appcompat 21


93

Tôi đang thử nghiệm các tính năng mới của Appcompat 21 Material Design. Do đó, tôi đã tạo một Thanh công cụ như thế này:

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

và đưa nó vào tệp bố cục chính của tôi.

Sau đó, tôi đã đặt nó là supportActionBar như sau:

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

Nó đang hoạt động, nhưng bằng cách nào đó tôi không thể tìm ra cách tùy chỉnh thanh công cụ. Nó có màu xám và chữ trên đó là màu đen. Tôi nên thay đổi màu nền và màu văn bản như thế nào?

Tôi đã xem qua hướng dẫn này:

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

Tôi đã giám sát những gì để thay đổi màu sắc?

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

CHỈNH SỬA :

Tôi đã có thể thay đổi màu nền bằng cách thêm các dòng mã này vào chủ đề:

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

Nhưng chúng sẽ không ảnh hưởng đến màu văn bản. Tôi đang thiếu gì? Thay vì văn bản màu đen và nút menu màu đen, tôi muốn có văn bản màu trắng và các nút menu màu trắng:

nhập mô tả hình ảnh ở đây


chủ đề của bạn trông như thế nào cho hoạt động? bạn đã đặt màu của mình cho Thanh công cụ trong đó như bạn nên làm chưa?
tyczj

@tyczj Tôi thêm các chủ đề cho bài viết của tôi
user2410644

ok cũng có bạn trả lời bạn không thiết lập màu sắc của bạn
tyczj

@tyczj, Vâng, tôi đã chỉnh sửa lại bài đăng của mình, tôi đã thêm màu chính và màu chính, nhưng thuộc tính nào thay đổi màu văn bản?
user2410644

Câu trả lời:


185

một lần nữa, tất cả đều có trong liên kết bạn đã cung cấp

để thay đổi văn bản thành màu trắng, tất cả những gì bạn phải làm là thay đổi chủ đề.

sử dụng chủ đề này

<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
Vâng, chỉ cần nhận thấy một điều giống nhau, đột nhiên có sự nhầm lẫn rằng thanh hành động tối có văn bản sáng và thanh hành động sáng văn bản tối ... Cảm ơn!
user2410644

4
Tôi đã làm như thế này, nhưng vẫn bị đen phông chữ, tôi có thiếu một cái gì đó?
alijandro

6
Vì vậy, có vẻ như @ style / ThemeOverlay.AppCompat.Dark.ActionBar trên ứng dụng: chủ đề thay đổi văn bản của thanh công cụ thành màu trắng và @ style / ThemeOverlay.AppCompat.Light thay đổi nó thành màu đen. Màu nền được chọn từ thuộc tính android: background. Trong khi trên ứng dụng: popupTheme: @ style / ThemeOverlay.AppCompat.Dark cung cấp văn bản màu trắng và nền đen và @ style / ThemeOverlay.AppCompat.Light cho văn bản màu đen và nền trắng. gist.github.com/mnemonicflow/7cba09f6461ec86b22b7
cắnk

1
Cảm ơn! : D Google thực sự đã nhầm lẫn với kiểu dáng của Thanh công cụ trên Android. Việc câu hỏi này có 50 lượt ủng hộ và 22 lượt bắt đầu là bằng chứng cho điều đó.
FRR

1
Nếu tiêu đề vẫn còn màu đen sau khi thiết lập kiểu. Hãy chắc chắn rằng bạn mở rộng AppCompatActivitythay vì Activity.
stefana

59

CẬP NHẬT 12/11/2019: Thư viện thành phần vật liệu

Với các thành phần Material và thư viện Androidx, bạn có thể sử dụng:

  • các android:backgroundthuộc tính trong cách bố trí:

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
  • áp dụng kiểu mặc định: style="@style/Widget.MaterialComponents.Toolbar.Primary"hoặc tùy chỉnh kiểu kế thừa từ kiểu đó:

    <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"
  • ghi đè màu mặc định bằng android:themethuộc tính:

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

với:

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

CŨ: Thư viện hỗ trợ:
Bạn có thể sử dụng một app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"chủ đề như được đề xuất trong các câu trả lời khác, nhưng bạn cũng có thể sử dụng một giải pháp như sau:

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

Và bạn có thể có toàn quyền kiểm soát các phần tử ui của mình với các kiểu sau:

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

Điều này không làm việc cho tôi. Popup menu vẫn là nền đen với chữ trắng
Sunkas

1
Không hữu dụng. Nó đòi hỏi mức API Min 21
Vaibhav Gupta

3
@VaibhavGupta Appcompat đòi hỏi minSdk = 7 không 21.
Gabriele Mariotti

10

Này nếu bạn muốn áp dụng chủ đề Material chỉ cho android 5.0 thì bạn có thể thêm chủ đề này vào đó

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

Đây là dòng bên dưới chịu trách nhiệm cho màu văn bản của Thanh hành động của thiết kế Vật liệu.

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

6

Bạn có thể đặt động màu mục thanh công cụ tùy chỉnh bằng cách tạo một lớp thanh công cụ tùy chỉnh:

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



}

sau đó tham khảo nó trong tệp bố cục của bạn. Bây giờ bạn có thể đặt màu tùy chỉnh bằng cách sử dụng

toolbar.setItemColor(Color.Red);

Nguồn:

Tôi đã tìm thấy thông tin để thực hiện việc này ở đây: Cách thay đổi linh hoạt màu biểu tượng Thanh công cụ của Android

và sau đó tôi đã chỉnh sửa nó, cải thiện nó và đăng nó ở đây: GitHub: AndroidDynamicToolbarItemColor


5

Đây là cái được gọi là DarkActionBar, có nghĩa là bạn nên sử dụng chủ đề sau để có được phong cách mong muốn của mình:

<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

Bạn có thể thay đổi màu của văn bản trong thanh công cụ bằng những cách sau:

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

2

Đạt được điều này bằng cách sử dụng toolbarnhư sau:

<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

Hãy thử điều này trong styles.xml của bạn:

colorPrimary sẽ là màu của thanh công cụ.

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

Nhân tiện, bạn có xây dựng cái này trong Eclipse không?


1

tôi đã giải quyết vấn đề này sau khi Nghiên cứu thêm ...

cho Api21 và sử dụng nhiều hơn

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

cho các phiên bản thấp hơn sử dụng

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

1

Nếu bạn muốn thay đổi toàn bộ màu sắc của thanh công cụ trong toàn bộ ứng dụng của mình, hãy sử dụng styles.xml. Nói chung, tôi tránh thay đổi các thành phần ui trong mã java của mình trừ khi tôi đang cố gắng làm điều gì đó theo chương trình. Nếu đây là tập hợp một lần, thì bạn nên thực hiện nó trong xml để làm cho mã của bạn sạch hơn. Đây là styles.xml của bạn sẽ trông như thế nào:

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

Đảm bảo rằng bạn sử dụng kiểu trên trong AndroidManifext.xml của mình như sau:

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

Tôi muốn các màu thanh công cụ khác nhau cho các hoạt động khác nhau. Vì vậy, tôi lại tận dụng các kiểu như thế này:

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

một lần nữa, hãy áp dụng các kiểu cho từng hoạt động trong AndroidManifest.xml của bạn, chẳng hạn như:

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

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

0

Đối với những người đang sử dụng AppCompatActivity với Thanh công cụ làm nền trắng. Sử dụng mã này.

Cập nhật: Tháng 12, 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
Sự khác biệt với Thanh công cụ mặc định là gì?
CoolMind
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.