更改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:
这一切都在你提供的链接中
要将文本更改为白色,您只需更改主题。
使用这个主题
<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>