Cara mengubah warna ikon beranda Toolbar


108

Saya menggunakan android.support.v7.widget.Toolbar dan belajar dari posting ini bagaimana mengubah warna ikon hamburger menjadi putih, tetapi panah atas / belakang tetap menjadi warna gelap ketika saya memanggil

setDisplayHomeAsUpEnabled(true);

Bagaimana cara membuat panah menjadi putih juga?

Berikut tampilan toolbar saya ketika saya memanggil setDisplayHomeAsUpEnabled ():

masukkan deskripsi gambar di sini

... dan berikut adalah bagian yang relevan dari file styles.xml saya:

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">#194C5F</item>
    <item name="colorAccent">@color/accent</item>
    <item name="drawerArrowStyle">@style/WhiteDrawerIconStyle</item>
</style>

    <style name="WhiteDrawerIconStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@android:color/white</item>
    </style>

2
Anda dapat menggunakan ikon png panah putih dan mengganti dengan yang hitam.
Surender Kumar

1
Saya mencoba menghindarinya dan hanya menunjukkan warna sebagai gaya ... jika itu satu-satunya cara yang saya tahu, saya dapat melakukannya melalui actionBarDrawerToggle.setHomeAsUpIndicator (R.drawable.arrow);
Joshua W

... juga png /com.android.support/appcompat-v7/21.0.3/res/drawable-xxxhdpi/abc_ic_ab_back_mtrl_am_alpha.png tampak putih
Joshua W

@JoshuaWitter Terima kasih telah memecahkan masalah saya, dapatkah Anda juga membantu saya mendeteksi tombol klik kembali? ini pertanyaan saya stackoverflow.com/questions/29138629/…
user2056563

1
@JoshuaWitter meskipun berwarna putih, warnanya akan berubah. Ubah colorControlNormalnilainya
osrl

Jawaban:


242

Saya menyelesaikannya dengan mengedit styles.xml:

<style name="ToolbarColoredBackArrow" parent="AppTheme">
    <item name="android:textColorSecondary">INSERT_COLOR_HERE</item>
</style>

... lalu mereferensikan gaya dalam definisi Toolbar dalam aktivitas:

<LinearLayout
    android:id="@+id/main_parent_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        app:theme="@style/ToolbarColoredBackArrow"
        app:popupTheme="@style/AppTheme"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"/>

13
Anda juga dapat menyetel colorControlNormalsebagai gantinyaandroid:textColorSecondary
mbelsky

tapi itu akan mengubah warna seluruh widget kan? @mbelsky
Dr. Andro

3
@mbelsky Perhatikan bahwa ini membutuhkan API level 21.
Francisco Romero

@ Error404: ini ditambahkan di API level 1 seperti yang Anda lihat di sini
Mohamed Hatem Abdu

Hai Semua, Saya telah mencoba kode Anda tetapi saya tidak mendapatkan hasil yang diminta. Di file toolbar.axml saya, saya menyetel tema adalah android: theme=@style/ThemeOverlay.AppCompat.Dark.ActionBar dan di file styles.axml saya, saya telah menulis kode yang Anda berikan tetapi bilah navigasi kembali berwarna tombol tidak ada perubahan.
Deepak

57

Inilah yang Anda cari. Tapi ini juga mengubah warna radioButton dll. Jadi, Anda mungkin ingin menggunakan tema untuk itu.

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

11
Ini harus menjadi jawaban yang diterima. Ini mencapai apa yang saya cari: <style name = "ActionBarTheme" parent = "ThemeOverlay.AppCompat.Dark.ActionBar"> <item name = "colorControlNormal"> ### COLOR ### </item> </style> terapkan tema langsung ke Toolbar.
Mavamaarten

1
Atribut induk sangat penting.
ataravati

36

Saya menyelesaikannya secara terprogram menggunakan kode ini:

final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(Color.parseColor("#FFFFFF"), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);

Revisi 1:

Mulai dari API 23 (Marshmallow), resource drawable abc_ic_ab_back_mtrl_am_alphadiubah menjadi abc_ic_ab_back_material.


5
atur yang ini juga. getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Ishan Fernando

Apakah ini akan berhasil di Fragment? Jika demikian, di mana saya akan meletakkan kode ini? The OnCreateViewmetode, akar kelas, atau ...?
AndroidDevBro

1
@AndroidDevBro Ya, cukup letakkan di fungsi OnCreate dan ingat untuk memperbarui sumber daya seperti yang ditulis Nouman Tahir dalam revisi (menggunakan R.drawable.abc_ic_ab_back_material alih-alih R.drawable.abc_ic_ab_back_mtrl_am_alpha) dan mendapatkan SupportActionBar seperti ini: ((AppCompatActionBar) getActivity ()). getSupportActionBar (). setHomeAsUpIndicator (upArrow);
PayToPwn

14

Jawaban ini mungkin terlambat, tetapi inilah cara saya melakukannya. Menata bilah alat akan melakukan triknya. Buat toolbar.xml dengan kode berikut.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:layout_alignParentTop="true"
android:layout_gravity="bottom"
local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

dan di styles.xml

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!--
    -->
</style>

<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>

Terakhir, sertakan toolbar di dalam layout

<include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

1
tetapi AppTheme tidak direferensikan di mana pun. apakah ini salah ketik?
Henry

11

Ubah Tema Toolbar Anda menjadi ThemeOverlay.AppCompat.Dark

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:orientation="vertical"
    app:theme="@style/ThemeOverlay.AppCompat.Dark">

</android.support.v7.widget.Toolbar>

dan mengaturnya dalam aktivitas

mToolbar = (Toolbar) findViewById(R.id.navigation);
setSupportActionBar(mToolbar);

1
Saya terkejut dengan jawaban lain, saya selalu menggunakan metode ini
C. Skjerdal

9
   <!-- ToolBar -->
    <style name="ToolBarTheme.ToolBarStyle"    parent="ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="android:textColorPrimary">@android:color/white</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:textColorPrimaryInverse">@color/white</item>
    </style>

Terlambat untuk memposting, ini berhasil bagi saya untuk mengubah warna tombol kembali


8

Nah, ada cara yang lebih mudah untuk melakukan ini

drawerToggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.open_drawer, R.string.close_drawer);
arrow = drawerToggle.getDrawerArrowDrawable();

Lalu

arrow.setColor(getResources().getColor(R.color.blue);

7

Alih-alih mengubah gaya, cukup letakkan dua baris kode ini ke aktivitas Anda.

getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.arrowleft);

6

Inilah solusi saya:

toolbar.navigationIcon?.mutate()?.let {
  it.setTint(theColor)
  toolbar.navigationIcon = it
}

Atau, jika Anda ingin menggunakan fungsi yang bagus untuk itu:

fun Toolbar.setNavigationIconColor(@ColorInt color: Int) = navigationIcon?.mutate()?.let {
    it.setTint(color)
    this.navigationIcon = it
}

Pemakaian:

toolbar.setNavitationIconColor(someColor)

Sejauh ini, ini adalah jawaban terbaik dan memecahkan masalah saya
Zaraki596

5

Kode ini berfungsi untuk saya:

public static Drawable changeBackArrowColor(Context context, int color) {
    String resName;
    int res;

    resName = Build.VERSION.SDK_INT >= 23 ? "abc_ic_ab_back_material" : "abc_ic_ab_back_mtrl_am_alpha";
    res = context.getResources().getIdentifier(resName, "drawable", context.getPackageName());

    final Drawable upArrow = context.getResources().getDrawable(res);
    upArrow.setColorFilter(color, PorterDuff.Mode.SRC_ATOP);

    return upArrow;
}

...

getSupportActionBar().setHomeAsUpIndicator(changeBackArrowColor(this, Color.rgb(50, 50, 50)));               
supportInvalidateOptionsMenu();

Selain itu, jika Anda ingin mengubah warna teks bilah alat:

Spannable spannableString = new SpannableString(t);
spannableString.setSpan(new ForegroundColorSpan(Color.rgb(50, 50, 50)), 0, t.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
toolbar.setText(spannableString);

Bekerja dari API 19 hingga 25.


0

Daripada menggunakan id drawable yang lebih lama " abc_ic_ab_back_material ", gunakan yang baru abc_ic_ab_back_material di setiap versi api. Saya telah mengujinya di 19, 21, 27 dan bekerja dengan baik dengan kode dan konfigurasi di bawah ini.

  • minSdkVersion = 17
  • targetSdkVersion = 26
  • compileSdkVersion = 27

    public static Drawable changeBackArrowColor(Context context, int color) {
    int res;
    res = context.getResources().getIdentifier("abc_ic_ab_back_material", "drawable", context.getPackageName());
    if (res == 0)
        return null;
    final Drawable upArrow = ContextCompat.getDrawable(context, res);
    upArrow.setColorFilter(ContextCompat.getColor(context, color), PorterDuff.Mode.SRC_ATOP);
    
    return upArrow;

    }


0

Coba ini: Setel tema bilah alat dalam tata letak Anda sebagai berikut

android:theme = "@android:style/ThemeOverlay.Material.Dark.ActionBar"

Jika Anda menginginkan informasi lebih lanjut

Kasus aneh dari Warna Ikon Melimpah oleh Martin Bonnin

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.