Bagaimana cara mengubah warna panah kembali dalam tema materi baru?


193

Saya telah memperbarui SDK saya ke API 21 dan sekarang ikon back / up adalah panah hitam yang menunjuk ke kiri.

Panah belakang hitam

Saya ingin warnanya abu-abu. Bagaimana saya bisa melakukan itu?

Di Play Store, misalnya, panahnya berwarna putih.

Saya sudah melakukan ini untuk mengatur beberapa gaya. Saya telah menggunakan @drawable/abc_ic_ab_back_mtrl_am_alphauntuk homeAsUpIndicator. Drawable itu transparan (hanya alpha) tetapi panah ditampilkan dalam warna hitam. Saya ingin tahu apakah saya dapat mengatur warna seperti yang saya lakukan di DrawerArrowStyle. Atau jika satu-satunya solusi adalah membuat @drawable/grey_arrowdan menggunakannya untuk saya 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>

Solusi saya sejauh ini adalah mengambil @drawable/abc_ic_ab_back_mtrl_am_alpha, yang tampaknya berwarna putih, dan melukisnya dalam warna yang saya inginkan menggunakan editor foto. Ini bekerja, meskipun saya lebih suka menggunakan @color/actionbar_textsuka di DrawerArrowStyle.


Tidak ada jawaban berbasis XML sejauh ini yang memecahkan masalah ini untuk saya, tetapi saya telah berhasil menggunakan homeAsUpIndicator/ @drawable/abc_ic_ab_back_mtrl_am_alphakode Anda untuk membuat panah kembali putih. Saya lebih suka ini daripada meretas ke Jawa.
Larangan geoengineering

Tua tapi tetap saja. Apakah Anda menggunakan ActionBar atau Bilah Alat baru?
f470071

Yang default seharusnya agak abu-abu, dengan menggunakan android: theme = "@ style / Widget.AppCompat.Light.ActionBar" di dalam tag XML Toolbar. Warnanya # 737373
pengembang android

Jawaban:


354

Anda dapat mencapainya melalui kode. Dapatkan panah belakang yang dapat digambar, modifikasi warnanya dengan filter, dan atur sebagai tombol kembali.

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

Revisi 1:

Mulai dari API 23 (Marshmallow) sumber yang dapat ditarik abc_ic_ab_back_mtrl_am_alphadiubah ke abc_ic_ab_back_material.

EDIT:

Anda dapat menggunakan kode ini untuk mencapai hasil yang Anda inginkan:

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

4
Ini adalah satu-satunya hal yang bekerja untuk saya tanpa mengubah warna dari semua widget lainnya dengan colorControlNormal
Joris

4
masalah dengan solusi ini adalah itu melukis semua panah kembali Anda yang lain, jika Anda hanya ingin mengubah satu dan meninggalkan sisanya putih
dabluck

24
Berhasil. Harap dicatat Anda harus menggunakan ContextCompat.getDrawable(this, R.drawable.abc_ic_ab_back_mtrl_am_alpha)karena getResources.getDrawable(int)sudah usang
mrroboaat

3
Solusi lain yang mungkin adalah bagi Anda untuk mendapatkan sumber daya itu sendiri dan menaruhnya di folder yang dapat ditarik :)
Mauker

12
Perhatikan bahwa abc_ic_ab_back_mtrl_am_alpha berubah menjadi abc_ic_ab_back_material di perpustakaan dukungan 23.2.0
Jon

206

Melihat Toolbardan TintManagersumber, drawable/abc_ic_ab_back_mtrl_am_alphadiwarnai dengan nilai atribut style colorControlNormal.

Saya memang mencoba mengatur ini dalam proyek saya (dengan <item name="colorControlNormal">@color/my_awesome_color</item>tema saya), tetapi masih hitam untuk saya.

Perbarui :

Menemukannya. Anda perlu mengatur actionBarThemeatribut ( tidak actionBarStyle ) dengan colorControlNormal.

Misalnya:

<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
Ini harus menjadi jawaban yang diterima. Terima kasih untuk ini. Pertanyaan, saya tidak dapat menemukan gaya untuk mewarnai panah yang ditampilkan ketika SearchView diperluas. Ada petunjuk? Tampaknya tidak terpengaruh oleh jawaban ini.
Daniel Ochoa

6
Saya perlu menambahkan juga <item name = "android: colorControlNormal"> ... </item> dengan android: awalan
Serafim

7
Sayangnya ini adalah API level 21 dan jika Anda ingin mendukung apa pun di bawah ini tidak akan berfungsi.
gphilip

10
Jika tema orang tua Anda berasal dari salah satu tema "NoActionBar", maka atur colorControlNormalpada tema root alih-alih di actionBarThemerute yang dilalui.
Jason Robinson

3
Saya hanya perlu 2 jam mencari dan gagal dan mencari lagi untuk akhirnya sampai ke ini. Terkadang gaya 'sistem' di android membuatku gila! Metode ini sangat penting untuk digunakan ketika Anda memiliki satu aktivitas yang tidak menggunakan gaya yang sama dengan yang lain.
Bron Davies

119

Mencoba semua saran di atas. Satu-satunya cara saya berhasil mengubah warna ikon navigasi default Tombol kembali panah di toolbar saya adalah untuk mengatur colorControlNormal di tema dasar seperti ini. Mungkin karena fakta bahwa orang tua menggunakan 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
Jawaban paling sederhana, alih-alih mengutak-atik kode lain, cukup tambahkan baris ini distyle.xml
Rohan Kandwal

3
ingat bahwa colorControlNormal membutuhkan API 21
Adnan Ali

3
@AdnanAli jika Anda menggunakan AppCompat itu akan bekerja pada <API 21 juga. Jelas, appcompat yang digunakan di sini karena colorControlNormalini tidak diawali dengan android:.
Vicky Chijwani

3
Tetapi ini juga mengubah warna dari semua widget lainnya .. bagaimana cara untuk tidak memengaruhi widget lain seperti kotak centang dan tombol radio?
Bruce

2
Tapi ini juga mengubah warna kontrol lain, seperti tombol radio dan baris di bawah edit teks.
daka

66

Perlu menambahkan satu atribut ke tema toolbar Anda -

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

Terapkan toolbar_theme ini ke toolbar Anda.

ATAU

Anda dapat langsung mendaftar ke tema Anda -

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

5
Mencoba jawaban yang diterima (mungkin solusi paling populer yang ditemukan di internet) tidak bekerja untuk saya tetapi yang ini bekerja :) sangat gila ketika pemrograman dengan Android.
King King

4
Jawaban paling sederhana. Ini berfungsi tanpa mengubah tema kontrol lainnya. Yang Anda butuhkan hanyalah mengatur tema toolbar kustom ke toolbar Anda. :)
SimplyProgrammer

1
Oh, rasa sakit Anda harus melalui untuk mengubah warna hanya 1 ikon .. Yang pertama bekerja untuk saya. Yang ke-2 berfungsi untuk Toolbar khusus (dan hal-hal lain juga tampaknya). 3 tahun kemudian, banyak terima kasih Neo.
Aba

45

Cukup tambahkan

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

ke tema aplikasi Anda saat ini.


2
Ini juga mengubah warna android.support.v7.widget.AppCompatCheckBox
Udi Oshi

34

jika digunakan Toolbar, Anda dapat mencoba ini

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

Ini harus menjadi jawaban yang diterima, karena hanya menargetkan panah, mendapatkan panah untuk diatur menggunakan cara yang paling sederhana, dan kompatibel juga di bawah API 21
Antek

Jika Anda mencari lebih banyak solusi khusus (warna berbeda untuk judul dan ikon menu dalam kasus saya) maka ini adalah solusi yang Anda inginkan
TheJudge

3
Perhatikan bahwa Anda mungkin perlu memanggil ini sebelum mencoba memanggil getNavigationIcon (): getSupportActionBar (). SetDisplayHomeAsUpEnabled (true);
rrbrambley

Jawaban terbaik! Terima kasih.
shariful islam

32

Seperti yang dikatakan pada sebagian besar komentar sebelumnya, solusinya adalah menambahkan

<item name="colorControlNormal">@color/white</item> ke tema aplikasi Anda. Tetapi konfirmasikan bahwa Anda tidak memiliki tema lain yang ditentukan dalam elemen Bilah Alat pada tata letak Anda.

     <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
Cemerlang ... Saya mencoba semua jawaban tentang untuk menambahkannya dalam tema tetapi tidak berhasil ... Seperti yang Anda sebutkan, saya punya android: theme = "@ style / ThemeOverlay.AppCompat.ActionBar" properti di bilah alat saya. Setelah saya menghapusnya, itu mulai berfungsi.
Rahul Hawge

10

Jawaban oleh Carles adalah jawaban yang benar, tetapi beberapa metode seperti getDrawable (), getColor () sudah usang pada saat saya menulis jawaban ini . Jadi jawaban yang diperbarui adalah

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

Mengikuti beberapa pertanyaan stackoverflow lainnya, saya menemukan bahwa memanggil ContextCompat.getDrawable () mirip dengan

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

Dan ContextCompat.getColor () mirip dengan

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

Tautan 1: ContextCompat.getDrawable ()

Tautan 2: ContextCompat.getColor ()


Seharusnya abc_ic_ab_back_material, bukannya abc_ic_ab_back_mtrl_am_alpha.
Narendra Singh

7

Saya menemukan solusi yang berfungsi pra Lollipop. Atur "colorControlNormal" di dalam "actionBarWidgetTheme" untuk mengubah warna homeAsUpIndicator. Mengubah jawaban rockgecko dari atas menjadi seperti ini:

<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

Pada compileSdkVersoin 25, Anda bisa melakukan ini:

styles.xml

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

6

Gunakan metode di bawah ini:

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

Sekarang Anda dapat mengatur gambar dengan:

getSupportActionBar().setHomeAsUpIndicator(getColoredArrow());

6

masukkan deskripsi gambar di sini

Ubah Warna Menu Nav Icon

Final convert Menu Ikon Warna

Di 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

Solusi lain yang mungkin cocok untuk Anda adalah dengan tidak mendeklarasikan bilah alat sebagai bilah tindakan aplikasi (oleh setActionBaratau setSupportActionBar) dan mengatur ikon kembali di onActivityCreated Anda menggunakan kode yang disebutkan dalam jawaban lain di halaman ini

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

Sekarang, Anda tidak akan mendapatkan onOptionItemSelectedpanggilan balik ketika Anda menekan tombol kembali. Namun, Anda dapat mendaftar untuk itu menggunakan setNavigationOnClickListener. Inilah yang saya lakukan:

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

Saya tidak yakin apakah itu akan berfungsi jika Anda bekerja dengan item menu.


3

Kami mengalami masalah yang sama dan yang kami inginkan hanyalah mengatur

aplikasi: collapseIcon

atribut pada bilah alat pada akhirnya, yang tidak kami temukan karena tidak didokumentasikan dengan sangat baik :)

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

3

coba ini

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

panggilan fungsi:

enableActionBarHomeButton(this, R.color.white);

Mengatur opsi tampilan {@link #DISPLAY_HOME_AS_UP} akan secara otomatis mengaktifkan tombol beranda.
P. Savrov

2

Inilah yang bekerja untuk saya:

Tambahkan atribut di bawah ini ke tema Anda.

Untuk mengubah panah kembali toolbar / actionbar kembali di atas api 21

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

Untuk mengubah panah kembali toolbar / actionbar kembali di bawah api 21

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

Untuk mengubah mode aksi panah kembali

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

Untuk menghapus bayangan toolbar / actionbar

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

Untuk mengubah drawbar overflow yang dapat digambar

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

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

Catatan: 'srcCompat' digunakan sebagai ganti 'android: src' karena dukungan vektor yang dapat ditarik untuk api di bawah 21


1

Saya baru saja mengubah tema bilah alat menjadi @ style / ThemeOverlay.AppCompat.Light

dan panah menjadi abu-abu gelap

            <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

Inilah cara saya melakukannya di Komponen Bahan:

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

Sobat, kamu menyelamatkan hariku. Saya menghabiskan sepanjang hari untuk yang satu ini saja. Saya berharap saya bisa memberi Anda lebih banyak suara.
Dhaval Patel

1

Solusinya sangat sederhana

Cukup masukkan baris berikut ke gaya Anda bernama AppTheme

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

Sekarang seluruh kode xml Anda akan terlihat seperti yang ditunjukkan di bawah ini (gaya default).

<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

Anda dapat mengubah warna ikon navigasi secara terprogram seperti ini:

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

Hapus android:homeAsUpIndicatordan homeAsUpIndicatordari tema Anda dan itu akan baik-baik saja. The coloratribut dalam Anda DrawerArrowStylegaya harus cukup.


Saya sudah mencobanya dan panahnya berwarna hitam. Perhatikan bahwa panah ini bukan panah yang sama dengan yang Anda lihat ketika Anda membuka laci (panah itu dipengaruhi oleh coloratribut). Panah laci sedikit lebih besar.
Ferran Maylinch

1
Jadi, sepertinya Anda harus menyediakan sumber daya yang bisa Anda gambar sendiri. Anda dapat membuatnya menggunakan alat ini: shreyasachar.github.io/AndroidAssetStudio
Flávio Faria

-4

Kecuali ada solusi yang lebih baik ...

Apa yang saya lakukan adalah mengambil @drawable/abc_ic_ab_back_mtrl_am_alphagambar, yang tampak putih, dan melukisnya dalam warna yang saya inginkan menggunakan editor foto.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.