BottomNavigationView menampilkan ikon dan label teks setiap saat


125

Saya menggunakan android.support.design.widget.BottomNavigationView dari design support library versi 25

compile 'com.android.support:design:25.0.0'

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="center"
        app:itemBackground="@color/colorPrimary"
        app:menu="@menu/bottom_navigation_main"
        android:forceHasOverlappingRendering="true"/>

Jika hanya ada tiga tindakan di @ menu / bottom_navigation_main, ini akan menampilkan ikon dan label teks setiap saat.

Bagaimana cara menampilkan ikon dan label teks setiap saat bila ada lebih dari tiga tindakan.


Di menu bottom_navigation_main.xml, jika Anda memiliki android: showAsAction = "ifRoom" ubah ke android: showAsAction = "always" untuk setiap item.
Shashank Udupa

Tidak, tidak berhasil. saya sudah mencobanya sebelumnya.
Pengembang Android

Dapatkah Anda menampilkan file menu xml Anda
Shashank Udupa

'<? xml version = "1.0" encoding = "utf-8"?> <menu xmlns: android = " schemas.android.com/apk/res/android " xmlns: app = " schemas.android.com/apk/ res-auto "> <item android: id =" @ + id / action_favorites "app: showAsAction =" always "/> <item android: id =" @ + id / action_schedules "app: showAsAction =" always "/> < item android: id = "@ + id / action_music" app: showAsAction = "always" /> <item android: id = "@ + id / akun" android: enabled = "true" app: showAsAction = "always" /> </menu> '
Pengembang Android

4
place app: labelVisibilityMode = "labeled" di BottomNavigationView.
Shrawan

Jawaban:


327

Bagi siapa pun yang masih mencari solusi dan tidak ingin bergantung pada library pihak ketiga atau refleksi waktu proses, BottomNavigationView di Support Library 28 / Jetpack secara native mendukung selalu memiliki label teks.

Ini adalah metode yang Anda cari.

Atau dalam XML, app:labelVisibilityMode="labeled"


versi perpustakaan mana yang saya butuhkan?
DaniloDeQueiroz

perpustakaan dukungan 28-alpha1 +
shaishgandhi

Anda juga dapat mengubah mode visibilitas ke "otomatis" untuk menampilkan ikon-teks saat ditekan / difokuskan saja. Kode: app: labelVisibilityMode = "auto"
Kenny Dabiri

Kamulah orangnya! Terima kasih ini berfungsi dengan versi terbaru dari Material Library.
sud007

68

DIPERBARUI DARI 8 Mei 2018

Anda dapat menggunakan app:labelVisibilityMode="labeled" langsung di<android.support.design.widget.BottomNavigationView />

Sumber: https://developer.android.com/reference/com/google/android/material/bottomnavigation/LabelVisibilityMode

Tidak perlu solusi panjang di bawah ini.

JAWABAN SEBELUMNYA

Saya memiliki beberapa perilaku aneh dengan BottomNavigationView. Ketika saya memilih item / fragmen apa pun di dalamnya, fragmen tersebut mendorong BottomNavigationView sedikit lebih rendah, sehingga teks BottomNavigationView berada di bawah layar, jadi hanya ikon yang terlihat dan teks tersembunyi saat mengklik item apa pun.

Jika Anda menghadapi perilaku aneh itu maka inilah solusinya. Hapus saja

android:fitsSystemWindows="true"

dalam tata letak root Anda dari fragmen. Hapus saja ini dan boom! BottomNavigationView akan berfungsi dengan baik, sekarang dapat ditampilkan dengan teks dan ikon. Saya memiliki ini di root CoordinatorLayout saya dari fragment.

Juga jangan lupa tambahkan

BottomNavigationViewHelper.removeShiftMode(bottomNavigationView);

dalam aktivitas Anda untuk menonaktifkan mode pergeseran.

Inilah kelas itu:

public class BottomNavigationViewHelper {

    @SuppressLint("RestrictedApi")
    public static void removeShiftMode(BottomNavigationView view) {
        //this will remove shift mode for bottom navigation view
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                item.setChecked(item.getItemData().isChecked());
            }

        } catch (NoSuchFieldException e) {
            Log.e("ERROR NO SUCH FIELD", "Unable to get shift mode field");
        } catch (IllegalAccessException e) {
            Log.e("ERROR ILLEGAL ALG", "Unable to change value of shift mode");
        }
    }
}

Kombinasi ini dengan jawaban STAR_ZERO memecahkan masalah saya!
Christopher Smit

Dalam panggilan yang Anda miliki disableShiftMode, dan di kelas removeShiftMode. Terlepas dari perbedaan kecil itu, jawaban Anda memecahkan masalah untuk saya. Saya sekarang memiliki lima menuitems tanpa bergeser dan dengan ikon + teks. Terima kasih sangat banyak!
Yamakuzure

Sempurna. Ketika Anda memiliki lebih dari 3 item di navigasi bawah Anda dari, akan muncul mode bergeser. Dengan menggunakan ini, Anda dapat menonaktifkan pergeseran itu dan karenanya semua ikon dengan teks muncul sekaligus.
Kishor Bikram Oli

1
Ini adalah api tak terbatas, dan tidak bekerja pada pustaka dukungan versi 28. +. Diterima jawaban @shaishgandhi adalah cara yang lebih tepat untuk melakukannya.
okarakose

19

Sulit di versi 25.

Coba kode ini. Tapi saya pikir itu bukan solusi yang baik.

BottomNavigationView navigationView = (BottomNavigationView) findViewById(R.id.bottomBar);
BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigationView.getChildAt(0);
for (int i = 0; i < menuView.getChildCount(); i++) {
    BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(i);
    itemView.setShiftingMode(false);
    itemView.setChecked(false);
}

Di Android Studio, sebaiknya tambahkan kode seperti ini: `` // noinspection RestrictedApi itemView.setShiftingMode (false); // noinspection RestrictedApi itemView.setChecked (false); ``
Jiezhi.G

4
itu masih menggeser item
CodeToLife

1
Sempurna !! menampilkan ikon dan teks. Namun mode perpindahan (false) tidak berfungsi.
Minkoo

Kombinasi ini dengan jawaban KishanSolanki124 memecahkan masalah saya!
Christopher Smit

11

Berikut adalah fungsi ekstensi Kotlin yang menggabungkan solusi @STAR_ZERO dan @ KishanSolanki124.

fun BottomNavigationView.disableShiftMode() {
    val menuView = getChildAt(0) as BottomNavigationMenuView

    menuView.javaClass.getDeclaredField("mShiftingMode").apply {
        isAccessible = true
        setBoolean(menuView, false)
        isAccessible = false
    }

    @SuppressLint("RestrictedApi")
    for (i in 0 until menuView.childCount) {
        (menuView.getChildAt(i) as BottomNavigationItemView).apply {
            setShiftingMode(false)
            setChecked(false)
        }
    }
}

Untuk menggunakannya:

myBottomNavigation.disableShiftMode()

10

Apakah Anda ingin efek ini?

Klik di sini untuk melihat gambar

Jika demikian, saya merekomendasikan Anda untuk mencoba BottomNavigationViewEx


1
Perpustakaan Anda adalah pekerjaan yang bagus dan mengesankan Tapi saya ingin mencapai fungsi ini menggunakan perpustakaan desain 25.0.0 Sayangnya itu bertentangan dengan praktik desain
Android

Ini tidak bertentangan dengan spesifikasi Desain Material, menurut "Bilah navigasi bawah yang diperbaiki" di dokumen . Juga, terima kasih pribadi saya telah membagikan perpustakaan yang luar biasa ini.
Serg de Adelantado

1
Ini bertentangan dengan spesifikasi Desain Material. Jika Anda membaca dokumen yang Anda berikan, Anda akan melihat bahwa secara eksplisit tertulis "Jika ada empat atau lima tindakan, tampilkan tampilan tidak aktif sebagai ikon saja".
Felipe

8

Anda dapat menggunakan ini untuk menampilkan teks dan ikon di BottomNevigationView

app:labelVisibilityMode="labeled"

Jika Anda menggunakan ini, Anda akan dapat melihat ikon dan teks

<android.support.design.widget.BottomNavigationView
    app:labelVisibilityMode="labeled"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/bottom_navigation_view"
    android:layout_alignParentBottom="true"
    app:menu="@menu/bottom_navigation_menu"/>

6

Anda dapat menggunakan app: labelVisibilityMode = "labeled" langsung di

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:labelVisibilityMode="labeled"
        android:elevation="8dp"
        android:layout_alignParentBottom="true"
        app:itemBackground="@drawable/bottom_navi"
        app:itemTextColor="@color/white"
        app:itemIconTint="@color/white"
        app:menu="@menu/bottom_nav_menu_managment" />

5

di kelas BottomNavigationView ada bidang BottomNavigationMenuView dan di BottomNavigationMenuView ada bidang BottomNavigationItemView [], yang merupakan item di bilah bawah.

Katakanlah n adalah jumlah item, BottomNavigationMenuView akan memanggil BottomNavigationItemView.setShiftingMode (n> 3) pada setiap anggota array BottomNavigationItemView []. Fungsi ini memutuskan perilaku (tampilkan judul selalu atau hanya saat pemilihan).

jadi cara untuk selalu menampilkan judul adalah dengan mencoba memanggil metode ini dan Anda dapat menggunakan refleksi untuk mengakses bidang pribadi.

    BottomNavigationView bottomNavigationView= (BottomNavigationView) findViewById(R.id.bottom_navigation);


//  get the private BottomNavigationMenuView field 
        Field f = null;
        try {
            f = bottomNavigationView.getClass().getDeclaredField("mMenuView");
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        }
        f.setAccessible(true);
        BottomNavigationMenuView menuView=null;
        try {
             menuView = (BottomNavigationMenuView) f.get(bottomNavigationView); 
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }

//  get the private BottomNavigationItemView[]  field 
        try {
            f=menuView.getClass().getDeclaredField("mButtons");
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        }
        f.setAccessible(true);
        BottomNavigationItemView[] mButtons=null;
        try {
            mButtons = (BottomNavigationItemView[]) f.get(menuView); 
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }


        for(int i=0;i<mButtons.length;i++){
            mButtons[i].setShiftingMode(false);
            mButtons[i].setChecked(true);
        }

Ini sangat bagus, hanya saja kita perlu memastikan BottomNavigationMenuView juga tidak bergeser. -> f = menuView.getClass (). getDeclaredField ("mShiftingMode"); f.setAccessible (true); f.setBoolean (menuView, false);
stephane k.

4

Untuk menampilkan judul sepenuhnya. Coba kode Kotlin ini:

@SuppressLint("RestrictedApi")
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_ofree)

    navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)

    val menuView = navigation.getChildAt(0) as BottomNavigationMenuView
    for (i in 0 until menuView.childCount) {
        val itemView = menuView.getChildAt(i) as BottomNavigationItemView
        itemView.setShiftingMode(false)
        itemView.setChecked(false)
    }
}

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.