Customize BottomNavigationView to show text for the selected item, and icon for non-selected items

Question

I'm trying to make this NavigationBottomView:

All I want is to make selected item text instead of icon.

I googled it and tried to make custom navigationBottomView item, but I found nothing like what I want.

Answer 1

is it possible to be a text ? or even can i hide the icon and display item title only ?

Yes it's.

To control toggling BottomNavigationView item text, use app:itemTextColor with a custom selector

• In your case you need to show up the text when an item is checked, and hide it otherwise.

To control toggling the item icon, use app:itemIconTint with a custom selector

• In your case you need to show up the icon when an item is unchecked, and hide it otherwise.

For both text/icon cases you can use a transparent color as a hack for the hidden state.

Example:

<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    app:itemTextColor="@drawable/text_selector"
    app:itemIconTint="@drawable/icon_selector"

text_selector.xml:

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

icon_selector.xml:

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

UPDATE

i tried it before but all i got icon get hidden and text still at the bottom not shifted to the center like gif u sent

You can have the same behavior by changing the BottomNavView text size:

Create the following style to increase the item text:

<style name="BottomNavigationViewActiveItemText" parent="@style/TextAppearance.AppCompat.Caption">
    <item name="android:textSize">20sp</item>
</style>

Apply it to the BottomNavigationView with app:itemTextAppearanceActive="@style/BottomNavigationViewActiveItemText"

If your item text can be in two lines, use also:

<style name="BottomNavigationStyle">
    <item name="android:gravity">center</item>
    <item name="android:lines">2</item>
</style>

And apply it with android:theme="@style/BottomNavigationStyle"