如何更改新材质主题中后退箭头的颜色？

Question

我已将我的SDK更新为API 21,现在后退/上移图标是指向左侧的黑色箭头.

我希望它是灰色的.我怎样才能做到这一点？

例如,在Play商店中,箭头为白色.

我这样做是为了设置一些风格.我已经习惯@drawable/abc_ic_ab_back_mtrl_am_alpha了homeAsUpIndicator.drawable是透明的(只有alpha),但箭头显示为黑色.我想知道我是否能像我一样设置颜色DrawerArrowStyle.或者,如果唯一的解决方案是创建我的@drawable/grey_arrow并使用它homeAsUpIndicator.

<!-- Base application theme -->
<style name="AppTheme" parent="Theme.AppCompat.Light">

    <item name="android:actionBarStyle" tools:ignore="NewApi">@style/MyActionBar</item>
    <item name="actionBarStyle">@style/MyActionBar</item>

    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>

    <item name="homeAsUpIndicator">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>
    <item name="android:homeAsUpIndicator" tools:ignore="NewApi">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>
</style>

<!-- ActionBar style -->
<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid">

    <item name="android:background">@color/actionbar_background</item>
    <!-- Support library compatibility -->
    <item name="background">@color/actionbar_background</item>
</style>

<!-- Style for the navigation drawer icon -->
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@color/actionbar_text</item>
</style>

到目前为止,我的解决方案是采用@drawable/abc_ic_ab_back_mtrl_am_alpha看似白色的,并使用照片编辑器将其绘制成我想要的颜色.它的工作原理,但我更喜欢使用@color/actionbar_text像DrawerArrowStyle.

Answer 1

你可以通过代码实现它.获取后退箭头drawable,使用过滤器修改其颜色,并将其设置为后退按钮.

final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(getResources().getColor(R.color.grey), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);

修订版1:

从API 23(Marshmallow)开始,可绘制资源abc_ic_ab_back_mtrl_am_alpha更改为abc_ic_ab_back_material.

编辑:

您可以使用此代码来实现所需的结果:

toolbar.getNavigationIcon().setColorFilter(getResources().getColor(R.color.blue_gray_15), PorterDuff.Mode.SRC_ATOP);

Answer 2

查看Toolbar和TintManager源,drawable/abc_ic_ab_back_mtrl_am_alpha使用style属性的值着色colorControlNormal.

我确实尝试在我的项目中设置这个(<item name="colorControlNormal">@color/my_awesome_color</item>在我的主题中),但它对我来说仍然是黑色的.

更新:

找到了.您需要设置actionBarTheme属性(不 actionBarStyle)colorControlNormal.

例如:

<style name="MyTheme" parent="Theme.AppCompat.Light">        
    <item name="actionBarTheme">@style/MyApp.ActionBarTheme</item>
    <item name="actionBarStyle">@style/MyApp.ActionBar</item>
    <!-- color for widget theming, eg EditText. Doesn't effect ActionBar. -->
    <item name="colorControlNormal">@color/my_awesome_color</item>
    <!-- The animated arrow style -->
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="MyApp.ActionBarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">       
    <!-- THIS is where you can color the arrow! -->
    <item name="colorControlNormal">@color/my_awesome_color</item>
</style>

<style name="MyApp.ActionBarStyle" parent="@style/Widget.AppCompat.Light.ActionBar">
    <item name="elevation">0dp</item>      
    <!-- style for actionBar title -->  
    <item name="titleTextStyle">@style/ActionBarTitleText</item>
    <!-- style for actionBar subtitle -->  
    <item name="subtitleTextStyle">@style/ActionBarSubtitleText</item>

    <!-- 
    the actionBarTheme doesn't use the colorControlNormal attribute
    <item name="colorControlNormal">@color/my_awesome_color</item>
     -->
</style>

Answer 3

试过上面的所有建议.我设法更改工具栏中导航图标默认后退按钮箭头的颜色的唯一方法是在这样的基本主题中设置colorControlNormal.可能是由于父级使用的是Theme.AppCompat.Light.NoActionBar

<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/white</item> 
  //the rest of your codes...
</style>

Answer 4

需要在工具栏主题中添加单个属性 -

<style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="colorControlNormal">@color/arrow_color</item>
</style>

将此toolbar_theme应用于工具栏.

要么

你可以直接申请你的主题 -

<style name="CustomTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/arrow_color</item> 
  //your code ....
</style>

Answer 5

只需添加

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

到你当前的应用主题.

Answer 6

如果使用Toolbar,你可以试试这个

Drawable drawable = toolbar.getNavigationIcon();
drawable.setColorFilter(ContextCompat.getColor(appCompatActivity, colorId), PorterDuff.Mode.SRC_ATOP);

Answer 7

正如大多数之前的评论所说,解决方案是添加

<item name="colorControlNormal">@color/white</item> 到您的应用主题.但请确认您的布局上的工具栏元素中没有定义其他主题.

     <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Answer 8

Carles的答案是正确的答案,但是在我写这个答案的时候,很少有像getDrawable(),getColor()这样的方法被弃用了.所以更新的答案是

Drawable upArrow = ContextCompat.getDrawable(context, R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(ContextCompat.getColor(context, R.color.white), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);

在其他一些stackoverflow查询之后,我发现调用ContextCompat.getDrawable()类似于

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    return resources.getDrawable(id, context.getTheme());
} else {
    return resources.getDrawable(id);
}

和ContextCompat.getColor()类似

public static final int getColor(Context context, int id) {
    final int version = Build.VERSION.SDK_INT;
    if (version >= 23) {
        return ContextCompatApi23.getColor(context, id);
    } else {
        return context.getResources().getColor(id);
    }
}

链接1:ContextCompat.getDrawable()

链接2:ContextCompat.getColor()

Answer 9

我找到了一个适用于Lollipop之前的解决方案.在"actionBarWidgetTheme"中设置"colorControlNormal"以更改homeAsUpIndicator颜色.从上面修改rockgecko的答案看起来像这样:

<style name="MyTheme" parent="Theme.AppCompat.Light">        
    <item name="actionBarTheme">@style/MyApp.ActionBarTheme</item>
    <item name="actionBarStyle">@style/MyApp.ActionBar</item>
    <!-- color for widget theming, eg EditText. Doesn't effect ActionBar. -->
    <item name="colorControlNormal">@color/my_awesome_color</item>
    <!-- The animated arrow style -->
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    <!-- The style for the widgets on the ActionBar. -->
    <item name="actionBarWidgetTheme">@style/WidgetStyle</item>
</style>

<style name="WidgetStyle" parent="style/ThemeOverlay.AppCompat.Light">
    <item name="colorControlNormal">@color/my_awesome_color</item>
</style>

Answer 10

在compileSdkVersoin 25上,你可以这样做:

styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light">
     <item name="android:textColorSecondary">@color/your_color</item>
</style>

Answer 11

更改菜单导航图标颜色

在style.xml中:

<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    <item name="android:textColor">@color/colorAccent</item>


</style>

<style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@color/colorPrimaryDark</item>
</style>







In Mainfests.xml :

<activity android:name=".MainActivity"
        android:theme="@style/MyMaterialTheme.Base"></activity>

Answer 12

使用以下方法:

private Drawable getColoredArrow() {
    Drawable arrowDrawable = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
    Drawable wrapped = DrawableCompat.wrap(arrowDrawable);

    if (arrowDrawable != null && wrapped != null) {
        // This should avoid tinting all the arrows
        arrowDrawable.mutate();
        DrawableCompat.setTint(wrapped, Color.GRAY);
    }

    return wrapped;
}

现在您可以使用以下方法设置drawable:

getSupportActionBar().setHomeAsUpIndicator(getColoredArrow());

Answer 13

另一个可能对您有用的解决方案是不将您的工具栏声明为应用程序的操作栏（ bysetActionBar或setSupportActionBar），并使用本页另一个答案中提到的代码在您的 onActivityCreated 中设置后退图标

final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(getResources().getColor(R.color.grey), PorterDuff.Mode.SRC_ATOP);
toolbar.setNavigationIcon(upArrow);

现在，onOptionItemSelected当您按下后退按钮时，您将不会收到回调。但是，您可以使用setNavigationOnClickListener. 这就是我所做的：

toolbar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        getActivity().onBackPressed(); //or whatever you used to do on your onOptionItemSelected's android.R.id.home callback
    }
});

如果您使用菜单项，我不确定它是否会起作用。

Answer 14

以下是我在材质组件中的做法：

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>
</style>

<style name="AppTheme.DrawerArrowToggle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="color">@android:color/white</item>
</style>

Answer 15

解决方法很简单

只需将以下行放入名为AppTheme 的样式中

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

现在您的整个 xml 代码将如下所示（默认样式）。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">#0F0F0F</item>
        <item name="android:statusBarColor">#EEEEF0</item>
        <item name="android:windowLightStatusBar">true</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowActivityTransitions">true</item>

        <item name="colorControlNormal">@color/white</item>
</style>