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

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会使用样式属性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

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

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

如果使用Toolbar，您可以试试这个

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

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

<强> Link 1: ContextCompat.getDrawable()

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

使用以下方法：

getSupportActionBar().setHomeAsUpIndicator(getColoredArrow());

现在您可以使用以下方式设置drawable：

{{1}}

Answer 12

更改菜单导航图标颜色

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

另一个可能对你有用的解决方案是不要将工具栏声明为应用的操作栏（setActionBar或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

解决方案非常简单

只需将以下行放入名为 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>

Answer 15

这是我在“材料组件”中所做的事情：

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

试试这个

public void enableActionBarHomeButton(AppCompatActivity appCompatActivity, int colorId){

    final Drawable upArrow = ContextCompat.getDrawable(appCompatActivity, R.drawable.abc_ic_ab_back_material);
    upArrow.setColorFilter(ContextCompat.getColor(appCompatActivity, colorId), PorterDuff.Mode.SRC_ATOP);

    android.support.v7.app.ActionBar mActionBar = appCompatActivity.getSupportActionBar();
    mActionBar.setHomeAsUpIndicator(upArrow);
    mActionBar.setHomeButtonEnabled(true);
    mActionBar.setDisplayHomeAsUpEnabled(true);
}

函数调用：

enableActionBarHomeButton(this, R.color.white);

Answer 17

我们遇到了同样的问题，我们想要的只是设置

应用：collapseIcon

工具栏中的

属性，我们没有找到，因为它没有很好地记录：）

grid.table.kendoSortable({
    filter: ">tbody >tr",
    hint: $.noop,
    cursor: "move",
    ignore: "TD, input",
    placeholder: function (element) {
      return element.clone().addClass("k-state-hover").css("opacity", 0.65);
    },
    container: '#grid tbody',
    change: onGridRowChange
});

Answer 18

private fun setToolbarNavigationIconColor(context: Context, toolbar: Toolbar?, color: Int) {
    val drawableBack = toolbar?.navigationIcon
    drawableBack?.let {
        val drawableWrap = DrawableCompat.wrap(drawableBack).mutate()
        DrawableCompat.setTint(
            drawableWrap, ContextCompat.getColor(context, white)
        )
        toolbar.navigationIcon = drawableWrap
    }
}

Answer 19

这对我有用：

将以下属性添加到主题。

要更改api 21上方的工具栏/操作栏后退箭头

<item name="android:homeAsUpIndicator">@drawable/your_drawable_icon</item>

要更改api 21下的工具栏/操作栏后退箭头

<item name="homeAsUpIndicator">@drawable/your_drawable_icon</item>

要更改动作模式后退箭头

<item name="actionModeCloseDrawable">@drawable/your_drawable_icon</item>

要删除工具栏/操作栏阴影

<item name="android:elevation" tools:targetApi="lollipop">0dp</item>
<item name="elevation">0dp</item>
<!--backward compatibility-->
<item name="android:windowContentOverlay">@null</item>

更改操作栏溢出可绘制对象

<!--under theme-->
<item name="actionOverflowButtonStyle">@style/MenuOverflowStyle</item>

<style name="MenuOverflowStyle" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="srcCompat">@drawable/ic_menu_overflow</item>

注意：由于对21以下的api的矢量可绘制支持，因此使用了“ srcCompat”而不是“ android：src”

Answer 20

更改后退/向上箭头颜色的最简单（也是最好）的方法。最好的部分是 没有副作用（与其他答案不同）！

• 使用父级 Widget.AppCompat.DrawerArrowToggle 创建样式，定义 color 和您想要的任何其他属性。
• 在应用主题的 drawerArrowStyle 属性上设置样式。

创建样式：

<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <!--        Set that the nav buttons will animate-->
    <item name="spinBars">true</item>
    <!--        Set the color of the up arrow / hamburger button-->
    <item name="color">@color/white</item>
</style>

在应用主题中设置样式：

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <!--  Change global up-arrow color with no side-effects    -->
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

要更改 ToolBar 文本颜色（和其他属性），请创建此 style：

<style name="ToolbarStyle" parent="Widget.AppCompat.Toolbar">
    <item name="android:textColor">@color/white</item>
    <item name="titleTextColor">@color/white</item>
    <item name="colorControlNormal">@color/white</item> <!-- colorControlNormal is Probably not necessary    -->
</style>

然后在 AppTheme 上设置该样式：

<!-- Base application theme. -->
<style name="AppTheme.MyProduceApp" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <!--  Style the toolbar (mostly the color of the text) -->
    <item name="toolbarStyle">@style/ToolbarStyle</item>
    <!--  Change color of up-arrow    -->
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

Answer 21

对我有用的简单解决方案（如果您需要在整个应用中使用相同的箭头颜色）：

1. 将要使用的箭头图标保存到drawable文件夹中（确保它具有所需的颜色；如果使用xml矢量drawable，则可以在xml中更改颜色）。

   < / li>

2. 将此新箭头图标分配给操作栏：

   ActionBar actionBar = getSupportActionBar（）; actionBar.setHomeAsUpIndicator（R.drawable.ic_your_icon_here）;

Answer 22

我刚将工具栏主题更改为@ style / ThemeOverlay.AppCompat.Light

箭头变成深灰色

            <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:gravity="center"
            app:layout_collapseMode="pin"
            app:theme="@style/ThemeOverlay.AppCompat.Light">

Answer 23

您可以通过以下方式以编程方式更改导航图标的颜色：

labels: self.DateArray

Answer 24

只需从主题中删除android:homeAsUpIndicator和homeAsUpIndicator即可。 <{1}}样式中的color属性必须足够。

Answer 25

除非有更好的解决方案......

我所做的是拍摄看似白色的@drawable/abc_ic_ab_back_mtrl_am_alpha图像，并使用照片编辑器以我想要的颜色绘制它们。