首页 文章

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

提问于
浏览 次
166

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

Black back arrow

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

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

我这样做是为了设置一些风格 . 我使用了 @drawable/abc_ic_ab_back_mtrl_am_alpha for homeAsUpIndicator . drawable是透明的（只有alpha），但箭头显示为黑色 . 我想知道我是否可以像_912330中那样设置颜色 . 或者，如果唯一的解决方案是创建我的 @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 .

java android user-interface colors android-styles

20 回答

  • 10

    你可以通过代码实现它 . 获取后退箭头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);

    Revision 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);
    回复于
  • 4

    查看 Toolbar 和 TintManager 源， drawable/abc_ic_ab_back_mtrl_am_alpha 将使用样式属性 colorControlNormal 的值着色 .

    我确实尝试在我的项目中设置它（在我的主题中使用 <item name="colorControlNormal">@color/my_awesome_color</item> ），但它对我来说仍然是黑色的 .

    Update ：

    找到了 . 您需要使用 colorControlNormal 设置 actionBarTheme 属性（ not 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>
    回复于
  • -4

    试过上面的所有建议 . 我设法更改工具栏中导航图标默认后退按钮箭头的颜色的唯一方法是在这样的基本主题中设置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>
    回复于
  • -1

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

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

    将此toolbar_theme应用于工具栏 .

    OR

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

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

    只需添加

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

    到你当前的应用主题 .

    回复于
  • 56

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

    <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" />
    回复于
  • 5

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

    Drawable drawable = toolbar.getNavigationIcon();
drawable.setColorFilter(ContextCompat.getColor(appCompatActivity, colorId), PorterDuff.Mode.SRC_ATOP);
    回复于
  • -1

    Carles的答案是正确答案，但很少有像 getDrawable(), getColor() got deprecated at the time I am writing this answer 这样的方法 . 所以更新的答案是

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

    回复于
  • 29

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

    styles.xml

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

    我找到了一个适用于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>
    回复于
  • 310

    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>
    回复于
  • 0

    使用以下方法：

    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());
    回复于
  • 104

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

    我不确定如果你使用菜单项它是否会起作用 .

    回复于
  • 1

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

    app:collapseIcon

    工具栏中的属性到底，我们没有找到，因为它没有很好的文档:)

    <android.support.v7.widget.Toolbar
         android:id="@+id/toolbar"
         android:layout_width="match_parent"
         android:layout_height="@dimen/toolbarHeight"
         app:collapseIcon="@drawable/collapseBackIcon" />
    回复于
  • 27

    试试这个

    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);
    回复于
  • 42

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

    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;
}
    回复于
  • 1

    只需从主题中删除 android:homeAsUpIndicator 和 homeAsUpIndicator 即可 . DrawerArrowStyle 样式中的 color 属性必须足够 .

    回复于
  • 6

    如果要更改主题中所有图标的箭头按钮的颜色，只需覆盖drawable文件夹中的默认文件 . 默认文件名是“abc_ic_ab_back_mtrl_am_alpha.png” .

    回复于
  • -1

    我刚刚将工具栏主题更改为@ 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">
    回复于
  • 6

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

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

    回复于

相关问题