在 Appcompat 21 中更改工具栏颜色
Posted
技术标签:
【中文标题】在 Appcompat 21 中更改工具栏颜色【英文标题】：Change Toolbar color in 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_
android:layout_
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，但是哪个属性会改变文本颜色？ 【参考方案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_
android:layout_
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_
android:layout_
android:background="?attr/colorPrimary"
应用默认样式：style="@style/Widget.MaterialComponents.Toolbar.Primary"或自定义继承自它的样式：
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
android:layout_
android:layout_
style="@style/Widget.MaterialComponents.Toolbar.Primary"
使用 android:theme 属性覆盖默认颜色：
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
android:layout_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
app:theme="@style/ThemeOverlay.AppCompat.Light">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_edit"
android:layout_
android:layout_
app:popupTheme="@style/AppTheme.AppBarOverlay"
app:title="Edit Your Profile"/>
</android.support.design.widget.AppBarLayout>
【讨论】：
与默认工具栏有什么区别？以上是关于在 Appcompat 21 中更改工具栏颜色的主要内容，如果未能解决你的问题，请参考以下文章
Android v21 Theme.Appcompat 颜色重音被忽略，对话框上没有填充
使用 AppCompat ActionBarActivity 更改状态栏颜色
如何在 android studio 中使用 AppCompat 类更改通知栏的颜色？
如何使用主题和 Theme.AppCompat.DayNight 更改操作栏中的文本颜色