Warna tab yang dipilih dalam Tampilan Navigasi Bawah


142

Saya menambahkan sebuah BottomNavigationViewke proyek, dan saya ingin memiliki warna teks (dan ikon warna) yang berbeda untuk tab yang dipilih (untuk mencapai efek tab yang tidak beruban yang tidak dipilih). Menggunakan warna yang berbeda dengan android:state_selected="true"dalam file sumber daya pemilih warna tampaknya tidak berfungsi. Saya juga mencoba memiliki entri item tambahan dengan android:state_focused="true"atau android:state_enabled="true", tidak ada efek sayangnya. Juga mencoba mengatur state_selectedatribut ke false (eksplisit) untuk warna default (tidak dipilih), tanpa hasil.

Inilah cara saya menambahkan tampilan ke tata letak saya:

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/silver"
        app:itemIconTint="@color/bnv_tab_item_foreground"
        app:itemTextColor="@color/bnv_tab_item_foreground"
        app:menu="@menu/bottom_nav_bar_menu" />

Inilah pemilih warna saya ( bnv_tab_item_foreground.xml):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/darker_gray"  />
    <item android:state_selected="true" android:color="@android:color/holo_blue_dark" />
</selector>

Dan sumber daya menu saya ( bottom_nav_bar_menu.xml):

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/action_home"
        android:icon="@drawable/ic_local_taxi_black_24dp"
        android:title="@string/home" />
    <item
        android:id="@+id/action_rides"
        android:icon="@drawable/ic_local_airport_black_24dp"
        android:title="@string/rides"/>
    <item
        android:id="@+id/action_cafes"
        android:icon="@drawable/ic_local_cafe_black_24dp"
        android:title="@string/cafes"/>
    <item
        android:id="@+id/action_hotels"
        android:icon="@drawable/ic_local_hotel_black_24dp"
        android:title="@string/hotels"/>

</menu>

Saya sangat menghargai bantuan apa pun.

Jawaban:


310

Saat membuat selector, selalu pertahankan status default di akhir, jika tidak, hanya status default yang akan digunakan. Anda perlu memesan ulang item di pemilih Anda sebagai:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@android:color/holo_blue_dark" />
    <item android:color="@android:color/darker_gray"  />
</selector>

Dan negara untuk digunakan dengan BottomNavigationBaryang state_checkedtidak state_selected.


77
tambahkan di <android.support.design.widget.BottomNavigationView app: itemIconTint = "@ drawable / nav_item_color_state" app: itemTextColor = "@ drawable / nav_item_color_state" />
dianakarenms

1
Dalam kasus saya, saya perlu membuat menu dinamis, dan solusi ini tidak berfungsi. Satu-satunya solusi yang berhasil adalah secara manual mengatur item menu stackoverflow.com/a/7106111/2098878
Rafael

9
"state_checked not state_selected". Apa penghemat waktu :) Terima kasih!
Piotr esarlesarew

3
tambahkan di <android.support.design.widget.BottomNavigationView app: itemIconTint = "@ color / nav_item_color_state" app: itemTextColor = "@ color / nav_item_color_state" /> alih-alih @ drawable
Anton Makov

1
Bagi siapa pun yang terjebak seperti saya, saya harus membuat direktori "warna" di "res", dan meletakkan file ini di sana.
Tayyab Mazhar

66

1. Di dalam res membuat folder dengan warna nama (seperti drawable)

2. Klik kanan pada folder warna. Pilih baru-> file sumber daya warna-> buat file color.xml (bnv_tab_item_foreground) (Gambar 1: Struktur File)

3. Salin dan tempel bnv_tab_item_foreground

<android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="0dp"
            android:layout_marginStart="0dp"
            app:itemBackground="@color/appcolor"//diffrent color
            app:itemIconTint="@color/bnv_tab_item_foreground" //inside folder 2 diff colors
            app:itemTextColor="@color/bnv_tab_item_foreground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:menu="@menu/navigation" />

bnv_tab_item_foreground:

 <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="true" android:color="@color/white" />
        <item android:color="@android:color/darker_gray"  />
    </selector>

Gambar 1: Struktur File:

Gambar 1: Struktur File


53

BottomNavigationViewmenggunakan colorPrimary dari tema yang diterapkan untuk tab yang dipilih dan menggunakan android:textColorSecondary untuk warna ikon tab tidak aktif.

Jadi Anda bisa membuat gaya dengan warna primer yang disukai dan mengaturnya sebagai tema untuk Anda BottomNavigationViewdalam file tata letak xml.

styles.xml :

 <style name="BottomNavigationTheme" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">@color/active_tab_color</item>
        <item name="android:textColorSecondary">@color/inactive_tab_color</item>
 </style>

your_layout.xml :

<android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?android:attr/windowBackground"
            android:theme="@style/BottomNavigationTheme"
            app:menu="@menu/navigation" />

3
android:textColorSecondarytidak bekerja. harus menggunakan android:colorForegroundsebagai gantinya
Mahdi Moqadasi

Ini adalah jawaban terbaik, metode "selector" menggunakan "darker_gray" sebagai warna tab tidak aktif yang berbeda dari yang asli. Juga android:textColorSecondarybekerja untuk saya. Terima kasih!
Sam Chen

9

Jika Anda ingin mengubah warna ikon dan teks secara terprogram:

ColorStateList iconsColorStates = new ColorStateList(
            new int[][]{
                    new int[]{-android.R.attr.state_checked},
                    new int[]{android.R.attr.state_checked}
            },
            new int[]{
                    Color.parseColor("#123456"),
                    Color.parseColor("#654321")
            });

    ColorStateList textColorStates = new ColorStateList(
            new int[][]{
                    new int[]{-android.R.attr.state_checked},
                    new int[]{android.R.attr.state_checked}
            },
            new int[]{
                    Color.parseColor("#123456"),
                    Color.parseColor("#654321")
            });

    navigation.setItemIconTintList(iconsColorStates);
    navigation.setItemTextColor(textColorStates);

5

Sudah terlambat untuk menjawab tetapi mungkin bermanfaat bagi seseorang. Saya melakukan kesalahan yang sangat konyol, saya menggunakan file pemilih bernama bottom_color_nav.xml untuk Select dan unselect perubahan warna tetapi masih tidak mencerminkan perubahan warna apa pun di BottomNavigationView.

Kemudian saya menyadari, saya kembali salah dalam metode onNavigationItemSelected . Ini akan berfungsi dengan baik jika Anda akan mengembalikan true dalam metode ini.


2

Coba gunakan android:state_enableddaripada android:state_selecteduntuk atribut item pemilih.


Seperti disebutkan dalam pertanyaan, saya mencoba state_enabled juga, tetapi itu bukan atribut status yang benar untuk digunakan dengan widget khusus ini. Masalahnya adalah apa yang disebutkan dalam jawaban: 1. Urutannya salah (status default adalah item terakhir dalam pemilih) 2. state_checked adalah atribut status yang benar untuk digunakan dengan BottomNavigationView.
Javad Sadeqzadeh

1

Untuk mengatur textColor, BottomNavigationViewmemiliki dua properti gaya yang dapat Anda atur langsung dari xml:

  • itemTextAppearanceActive
  • itemTextAppearanceInactive
In your layout.xml file:

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bnvMainNavigation"
            style="@style/NavigationView"/>

In your styles.xml file:

<style name="NavigationView" parent="Widget.MaterialComponents.BottomNavigationView">
  <item name="itemTextAppearanceActive">@style/ActiveText</item>
  <item name="itemTextAppearanceInactive">@style/InactiveText</item>
</style>
<style name="ActiveText">
  <item name="android:textColor">@color/colorPrimary</item>
</style>
<style name="InactiveText">
  <item name="android:textColor">@color/colorBaseBlack</item>
</style>

1

Saya menggunakan com.google.android.material.bottomnavigation.BottomNavigationView(tidak sama dengan OP) dan saya mencoba berbagai solusi yang disarankan di atas, tetapi satu-satunya hal yang berhasil adalah pengaturan app:itemBackgrounddan app:itemIconTintwarna pemilih saya bekerja untuk saya.

        <com.google.android.material.bottomnavigation.BottomNavigationView
            style="@style/BottomNavigationView"
            android:foreground="?attr/selectableItemBackground"
            android:theme="@style/BottomNavigationView"
            app:itemBackground="@color/tab_color"
            app:itemIconTint="@color/tab_color"
            app:itemTextColor="@color/bottom_navigation_text_color"
            app:labelVisibilityMode="labeled"
            app:menu="@menu/bottom_navigation" />

color/tab_color.xmlKegunaan sayaandroid:state_checked

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/grassSelected" android:state_checked="true" />
    <item android:color="@color/grassBackground" />
</selector>

dan saya juga menggunakan warna status terpilih untuk color/bottom_navigation_text_color.xml

masukkan deskripsi gambar di sini

Tidak sepenuhnya relevan di sini, tetapi untuk transparansi penuh, BottomNavigationViewgaya saya adalah sebagai berikut:

    <style name="BottomNavigationView" parent="Widget.Design.BottomNavigationView">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">@dimen/bottom_navigation_height</item>
        <item name="android:layout_gravity">bottom</item>
        <item name="android:textSize">@dimen/bottom_navigation_text_size</item>
    </style>

0

Ini akan berhasil:

setItemBackgroundResource(android.R.color.holo_red_light)

0

Alih-alih membuat pemilih, Cara terbaik untuk membuat gaya.

<style name="AppTheme.BottomBar">
    <item name="colorPrimary">@color/colorAccent</item> 
</style>

dan untuk mengubah ukuran teks, dipilih atau tidak dipilih.

<dimen name="design_bottom_navigation_text_size" tools:override="true">11sp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">12sp</dimen>

Nikmati Android!

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.