更改Appcompat 21中的工具栏颜色

我正在testing新的Appcompat 21 Material Designfunction。 因此我创build了一个如下的工具栏:

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

但是它们不会影响文字的颜色。 我错过了什么? 而不是黑色的文本和黑色的菜单button,我宁愿一个白色的文本和白色的菜单button:

在这里输入图像说明

Solutions Collecting From Web of "更改Appcompat 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.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> 

您可以使用其他答案中build议的app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"主题,但是您也可以使用如下解决scheme:

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

嘿,如果你想只适用于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> 

下面这行是负责材料devise的Actionbar的文本颜色。

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

这就是所谓的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" /> 

您可以通过创build自定义工具栏类来dynamic设置自定义工具栏项目的颜色:

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

资料来源:

我发现信息在这里做到这一点: 如何dynamic地改变Android的工具栏图标的颜色

然后我编辑它,改进它,并在这里发布: GitHub:AndroidDynamicToolbarItemColor

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

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

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

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

我经过更多的研究解决了这个问题…

为Api21多使用

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

对于较低版本的使用

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

如果您想在整个应用程序中更改工具栏的颜色,请使用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 android:name=".Activity2" android:theme="@style/YourAppName.AppTheme.Activity2" </activity> <activity android:name=".Activity1" android:theme="@style/YourAppName.AppTheme.Activity1" </activity> 

适用于使用工具栏的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>