新しいマテリアルテーマで戻る矢印の色を変更するにはどうすればよいですか?


193

SDKをAPI 21に更新しました。バックアップ/アップアイコンは、左向きの黒い矢印になっています。

黒の戻る矢印

灰色にしてほしい。どうやってやるの?

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

私はいくつかのスタイルを設定するためにこれを行いました。に使用し@drawable/abc_ic_ab_back_mtrl_am_alphaましたhomeAsUpIndicator。そのドローアブルは透明(アルファのみ)ですが、矢印は黒で表示されます。のように色を設定できるかしらDrawerArrowStyle。または、唯一の解決策がmyを作成して@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ます。


これまでのところ、XMLベースの回答のいずれもこの問題を解決していませんが、homeAsUpIndicator/ @drawable/abc_ic_ab_back_mtrl_am_alphaコードを使用して戻る矢印を白くすることに成功しました。私はこれをJavaにハッキングするよりも好みます。
ban-geoengineering

古いがまだ。ActionBarまたは新しいツールバーを使用していましたか?
f470071 2017年

Toolbar XMLタグ内でandroid:theme = "@ style / Widget.AppCompat.Light.ActionBar"を使用することにより、デフォルトは少し灰色になるはずです。その色は#737373
android開発者

回答:


354

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

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(マシュマロ)以降、描画可能なリソースabc_ic_ab_back_mtrl_am_alphaabc_ic_ab_back_material

編集:

このコードを使用して、必要な結果を得ることができます。

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

4
これは、colorControlNormalを使用して他のすべてのウィジェットの色合いを変更せずに私のために機能した唯一のものです
Joris

4
このソリューションの問題は、1つだけを変更して残りを白のままにしたい場合に、他のすべての戻る矢印をペイントすることです
dabluck

24
できます。は非推奨であるContextCompat.getDrawable(this, R.drawable.abc_ic_ab_back_mtrl_am_alpha)ため、使用する必要があることに注意してくださいgetResources.getDrawable(int)
mrroboaat

3
別の考えられる解決策は、そのリソースを自分で取得して、それを描画可能なフォルダーに置くことです:)
Mauker

12
23.2.0サポートライブラリのabc_ic_ab_back_mtrl_am_alphaがabc_ic_ab_back_materialに変更されたことに注意してください
Jon

206

ToolbarTintManagerソースを見る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>

4
これは受け入れられる答えになるはずです。これありがとう。質問、SearchViewが展開されたときに表示される矢印に色を付けるためのスタイルが見つかりません。どんな手掛かり?どうやらこの回答の影響は受けていません。
Daniel Ochoa、

6
<item name = "android:colorControlNormal"> ... </ item>にもandroid:プレフィックスを追加する必要があります
セラフィムの

7
残念ながら、これはレベル21のAPIであり、それ以下をサポートしたい場合は機能しません。
gphilip 2015年

10
親テーマが "NoActionBar"テーマの1つから派生している場合は、ルートではcolorControlNormalなくルートテーマに設定actionBarThemeすることをお勧めします。
ジェイソン・ロビンソン

3
最終的にこれにたどり着くまでに、2時間の検索と失敗、そして再度の検索しかかかりませんでした。時々、Androidの「システム」というスタイルは私を狂わせます!この方法は、他のアクティビティと同じスタイルを使用しないアクティビティがある場合に特に重要です。
Bron Davies

119

上記のすべての提案を試しました。ツールバーのナビゲーションアイコンのデフォルトの[戻る]ボタンの矢印の色を変更した唯一の方法は、このようなベーステーマで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>

6
style.xml
最も単純な

3
colorControlNormalにはAPI 21が必要です
Adnan Ali

3
@AdnanAliは、AppCompatを使用している場合、<API 21でも機能します。明らかに、APPCOMPATがされているので、ここで使用されてcolorControlNormalされていない接頭辞android:
Vicky Chijwani

3
しかし、これは他のすべてのウィジェットの色合いも変更します。チェックボックスやラジオボタンなどの他のウィジェットに影響を与えない方法はありますか?
Bruce

2
ただし、これにより、ラジオボタンやテキスト編集中の行など、他のコントロールの色も変更されます。
daka

66

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

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

5
受け入れられた答え(ネットで見つけた最も一般的な解決策)を試してもうまくいきませんが、これはうまくいきます:) Androidでプログラミングするときはとてもクレイジーです。
キングキング

4
最も簡単な答え。これは、他の制御テーマを変更しなくても機能します。必要なのは、カスタムツールバーのテーマをツールバーに設定することだけです。:)
SimplyProgrammer 2016年

1
ああ、アイコン1つだけの色を変更するのに苦労する必要があります。最初のアイコンは私に適しています。2つ目はカスタムツールバーで動作します(他の機能も明らかにそうです)。3年後、Neoに感謝します。
Aba、

45

追加するだけ

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

現在のアプリのテーマに。


2
これによりandroid.support.v7.widget.AppCompatCheckBoxの色も変更されます
Udi Oshi

34

使用する場合Toolbar、これを試すことができます

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

これは受け入れられる答えであるはずです。imho-矢印のみを対象とし、最も簡単な手段を使用して矢印を設定します。API21以下でも互換性があります
Antek

もっとカスタムソリューション(私の場合、タイトルとメニューアイコンの色が異なる)を求める場合、これがあなたが望むソリューションです
TheJudge

3
getNavigationIcon()を呼び出す前にこれを呼び出す必要がある場合があることに注意してください:getSupportActionBar()。setDisplayHomeAsUpEnabled(true);
2

ベストアンサー!ありがとうございました。
シャリフルイスラム教

32

以前のほとんどのコメントで述べたように、解決策は

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

3
素晴らしい...私はテーマにそれを追加するためにすべての答えを試みましたが、それはうまくいきませんでした...あなたが言ったように、ツールバーにandroid:theme = "@ style / ThemeOverlay.AppCompat.ActionBar"プロパティがありました。私がそれを取り除くと、それは働き始めました。
Rahul Hawge 16

10

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

そして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()


abc_ic_ab_back_materialではなく、である必要がありabc_ic_ab_back_mtrl_am_alphaます。
Narendra Singh

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>

7

compileSdkVersoin 25では、これを行うことができます:

styles.xml

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

6

以下の方法を使用します。

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

6

ここに画像の説明を入力してください

メニューナビゲーションアイコンの色の変更

最終変換メニューアイコンの色

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

あなたのために働くかもしれないもう一つの解決策は、ツールバーをアプリのアクションバーとして宣言しないで(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
    }
});

メニュー項目を操作する場合、それが機能するかどうかはわかりません。


3

私たちは同じ問題に遭遇し、私たちが欲しかったのは

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

3

これを試して

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

{@link #DISPLAY_HOME_AS_UP}表示オプションを設定すると、ホームボタンが自動的に有効になります。
P.サブロフ2017

2

これは私のために働いたものです:

以下の属性をテーマに追加します。

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のベクター描画可能サポートのため、「android:src」の代わりに「srcCompat」が使用されます


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

1

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>

バディ、あなたは私の日を救った。私はこれだけで一日中過ごしました。もっと投票してもらいたいです。
Dhaval Patel

1

解決策は非常に簡単です

次の行を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>

0

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

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:homeAsUpIndicatorhomeAsUpIndicatorあなたのテーマから、それは罰金になります。colorあなたのDrawerArrowStyleスタイルの属性は十分でなければなりません。


私はすでにそれを試しました、そして、矢は黒いです。この矢印は、引き出しを開いたときに表示される矢印とは異なります(この矢印はcolor属性の影響を受けます)。引き出しの矢印は少し大きくなっています。
Ferran Maylinch 2014年

1
したがって、独自のドローアブルリソースを提供する必要があるようです。このツールを使用して生成できます:shreyasachar.github.io/AndroidAssetStudio
フラビオ・ファリア

-4

より良い解決策がない限り...

私がやったことは、@drawable/abc_ic_ab_back_mtrl_am_alpha白いように見える画像を取り、フォトエディタを使用して、希望する色でそれらをペイントすることです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.