如何在新的材质主题中改变背面箭头的颜色?

我已经将我的SDK更新到API 21，现在备份/向上图标是一个指向左边的黑色箭头。

黑背箭

我希望它是灰色的。我该怎么做呢?

例如，在Play Store中，箭头是白色的。

我这样做是为了设置一些样式。我已经为homeAsUpIndicator使用了@drawable/abc_ic_ab_back_mtrl_am_alpha。该可绘制对象是透明的(只有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，这似乎是白色的，并使用照片编辑器将其涂成我想要的颜色。它可以工作，尽管我更喜欢像DrawerArrowStyle那样使用@color/actionbar_text。

183777 次浏览
小开

只要从你的主题中删除android:homeAsUpIndicator和homeAsUpIndicator就可以了。DrawerArrowStyle样式中的color属性必须足够。

小开

除非有更好的解决办法……

我所做的是采取@drawable/abc_ic_ab_back_mtrl_am_alpha图像，这似乎是白色的，并使用照片编辑器将它们涂成我想要的颜色。

小开
最佳答案

你可以通过代码来实现。获取可绘制的后退箭头，用滤镜修改其颜色，并将其设置为后退按钮。

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

查看Toolbar和TintManager源代码，drawable/abc_ic_ab_back_mtrl_am_alpha带有样式属性colorControlNormal的值。

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

更新:

找到了。你需要用colorControlNormal来设置actionBarTheme属性(不 actionBarStyle)。

例如:

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

我找到了一个解决办法。在“actionBarWidgetTheme”中设置“colorControlNormal”来改变homeAsUpIndicator的颜色。从上面修改岩壁虎的答案如下:

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

需要添加一个属性到您的工具栏主题-

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

使用以下方法:

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

现在你可以用:

getSupportActionBar().setHomeAsUpIndicator(getColoredArrow());
小开

尝试了以上所有的建议。我在工具栏中改变导航图标默认后退按钮箭头颜色的唯一方法是在基本主题中设置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>
小开

另一个解决方案，可能为你是不声明你的工具栏作为应用程序的操作栏(通过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
}
});

我不确定它是否会工作，如果你与菜单项。

小开

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查询，我发现调用< em > ContextCompat.getDrawable () < / em >类似于

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: contextcompatat . getdrawable () . getdrawable (

Link 2: contextcompatat . getcolor ()

小开

我们遇到了同样的问题我们想要的就是

应用:collapseIcon

属性，我们没有找到，因为它不是很好的文档:)

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="@dimen/toolbarHeight"
app:collapseIcon="@drawable/collapseBackIcon" />
小开

你可以像这样通过编程改变导航图标的颜色:

mToolbar.setNavigationIcon(getColoredArrow());


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.setTintList(wrapped, ColorStateList.valueOf(this.getResources().getColor(R.color.your_color)));
}
}


return wrapped;
}
小开

只需添加

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

到您当前的应用程序主题。

小开

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

< p > <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" />
小开

试试这个

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

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

styles.xml

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

enter image description here

改变菜单导航图标颜色

Final convert Menu Icon Color

在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>
小开

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

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

我只是把工具栏的主题改为@style/ themeoverlay . appcompon . 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">
小开

这对我来说很管用:

将以下属性添加到主题中。

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

注意:使用'srcCompat'而不是'android:src'，因为对低于21的api支持向量绘制

小开

以下是我在Material Components中是如何做到的:

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

解决方法很简单

只需将以下一行放入名为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>
小开
这是改变背面/向上箭头颜色的最简单(也是最好的)方法。最棒的是 有没有副作用(不像其他答案)!< / p >
  • 创建父样式Widget.AppCompat.DrawerArrowToggle，定义color和其他你想要的属性。
  • 在app Theme中设置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>

在App Theme中设置样式:

<!-- 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>
小开 
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
}
}
小开

我看到了所有的解决方案，但没有解决问题，如果你需要解决这个问题，只需在XMl文件中添加这段代码，如果你但黑暗使它轻

 app:theme="@style/ThemeOverlay.AppCompat.Light"

提交答案