web-dev-qa-db-ja.com

新しいマテリアルテーマで戻る矢印の色を変えるにははは？

私のSDKをAPI 21に更新したところ、バックアップ/アップアイコンは左を指す黒い矢印です。

Black back arrow

灰色にしてほしいのですが。どうやってやるの？

たとえば、Playストアでは、矢印は白いです。

いくつかのスタイルを設定するためにこれを行いました。私はhomeAsUpIndicatorに@drawable/abc_ic_ab_back_mtrl_am_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を使うことを好みますがそれはうまくいきます。

javaandroiduser-interfacecolorsandroid-styles
173
Ferran Maylinch

あなたはコードを通してそれを達成することができます。描画可能な戻る矢印を取得し、フィルタで色を変更して、戻るボタンとして設定します。

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);
328
Carles

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

上記のすべての提案を試してみました。私のツールバーのナビゲーションアイコンのデフォルトの戻るボタンの矢印の色を変更することができた唯一の方法は、このように基本テーマで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>
108
Harry Aung

ツールバーのテーマに単一の属性を追加する必要があります - 

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

追加するだけ

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

あなたの現在のアプリのテーマに。

43
S bruce

前のコメントの大部分で述べたように、解決策は追加することです。

あなたのアプリのテーマに<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" />
31
manuelvsc

Toolbarを使うなら、あなたはこれを試すことができます

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

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

他のいくつかのスタックオーバーフロークエリに続いて、ContextCompat.getDrawable（）の呼び出しは次のようになります。

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

AndContextCompat.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（）

10
capt.swag

私はLollipop以前に機能する解決策を見つけました。 homeAsUpIndicatorの色を変更するには、「actionBarWidgetTheme」内に「colorControlNormal」を設定します。このように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>
7
GFred

CompileSdkVersoin 25では、これを行うことができます。

styles.xml

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

以下の方法を使用してください。

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());
5
Jumpa

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>
5
Sumit Saxena

もう1つの解決策は、ツールバーをアプリのアクションバーとして宣言せず（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
    }
});

メニュー項目を操作してもうまくいくかどうかわかりません。

4
Vinay Wadhwa

これを試して

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);
1
Siddarth Kanted

私たちは同じ問題に遭遇していました、そして私たちが望んだすべては

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" />
1
Julian Horst

ナビゲーションアイコンの色は、プログラムで次のように変更できます。

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

ツールバーのテーマを@ 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">
0
fullMoon

私のために働いた簡単な解決策（あなたがすべてのアプリで同じ矢印色を使う必要があるならば）：

  1. 使用する矢印アイコンを描画可能フォルダに保存します（目的の色になっていることを確認します。xmlvector drawableを使用している場合は、色をxmlに変更できます）。

  2. この新しい矢印アイコンをアクションバーに割り当てます。

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

0
evanca