【问题标题】:Change Toolbar color in Appcompat 21在 Appcompat 21 中更改工具栏颜色
【发布时间】:2014-12-20 17:01:27
【问题描述】:

我正在测试新的 Appcompat 21 Material Design 功能。因此我创建了一个这样的工具栏:

<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 ,是的,我再次编辑了我的帖子,我添加了primarycolor和primarydarkcolor,但是哪个属性会改变文本颜色?

标签: android android-actionbar android-appcompat android-actionbar-compat android-toolbar


【解决方案1】:

这一切都在您提供的链接中

要将文本更改为白色,您只需更改主题即可。

使用这个主题

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

【讨论】:

  • 是的,刚刚注意到同样的事情,黑暗的操作栏有浅色文本和浅色的操作栏深色文本突然令人困惑......谢谢!
  • 我已经这样做了,但仍然得到黑色字体,我错过了什么吗?
  • 所以,看起来 app:theme 上的 @style/ThemeOverlay.AppCompat.Dark.ActionBar 将工具栏的文本更改为 white 和 @style/ThemeOverlay.AppCompat.Light 将其更改为黑色。背景颜色取自 android:background 属性。而在 app:popupTheme: @style/ThemeOverlay.AppCompat.Dark 给出白色文本和黑色背景,@style/ThemeOverlay.AppCompat.Light 给出黑色文本和白色背景。 gist.github.com/mnemonicflow/7cba09f6461ec86b22b7
  • 谢谢! :D google 真的搞砸了 android 上工具栏的样式。这个问题有 50 个赞和 22 个开始的事实就是证明。
  • 如果设置样式后标题仍然保持黑色。确保扩展 AppCompatActivity 而不是 Activity
【解决方案2】:

2019 年 12 月 11 日更新:材料组件库

借助 Material Components 和 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>

【讨论】:

  • 这对我不起作用。弹出菜单仍然是黑底白字
  • 没有帮助。它要求最低 API 级别为 21
  • @VaibhavGupta Appcompat 要求 minSdk=7 而不是 21。
【解决方案3】:

嘿,如果您只想为 android 5.0 应用 Material 主题,那么您可以在 它

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

下面一行是负责 Material design 的 Actionbar 的文本颜色。

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

【讨论】:

    【解决方案4】:

    您可以通过创建自定义工具栏类来动态设置自定义工具栏项颜色:

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

    来源:

    我在这里找到了相关信息:How to dynamicaly change Android Toolbar icons color

    然后我对其进行了编辑、改进,并在此处发布: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" />
      

      【讨论】:

        【解决方案6】:

        您可以使用以下方法更改工具栏中文本的颜色:

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

        【讨论】:

          【解决方案7】:

          通过像这样使用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"/>
          

          【讨论】:

            【解决方案8】:

            在你的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 中构建的吗?

            【讨论】:

              【解决方案9】:

              经过更多研究,我解决了这个问题...

              用于 Api21 及更多用途

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

              低版本使用

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

              【讨论】:

                【解决方案10】:

                如果您想在整个应用程序中更改工具栏的颜色,请利用 styles.xml。一般来说,除非我试图以编程方式做某事,否则我会避免更改我的 java 代码中的 ui 组件。如果这是一次性设置,那么您应该在 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,如下所示:

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

                【讨论】:

                  【解决方案11】:

                  适用于使用 AppCompatActivity 工具栏为白色背景的人。请使用此代码。

                  更新日期:2017 年 12 月

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

                  【讨论】:

                  • 与默认工具栏有什么区别?
                  猜你喜欢
                  • 2015-03-15
                  • 2015-05-25
                  • 1970-01-01
                  • 1970-01-01
                  • 2010-12-10
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  相关资源
                  最近更新 更多