Search code examples
androidbottomnavigationview

Hide title and enlarge only one icon in BottomNavigationView android

I need to make a custom BottomNavigationView that has a bigger icon in the center without a title like the picture below and other icons are normal in size and have a title below each icon. I am using the android navigation component Library. How to achieve that?

enter image description here

my activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.main.MainActivity">

    <fragment
        android:id="@+id/main_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@+id/bottom_navigation"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/nav_graph" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:labelVisibilityMode="labeled"
        android:background="#FFF"
        app:itemIconTint="@drawable/nav_item_color_state"
        app:itemTextColor="@drawable/nav_item_color_state"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/main_navigation_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

and the main_navigation_menu

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">

<item
    android:id="@+id/billFragment"
    android:checkable="true"
    android:icon="@drawable/ic_bill"
    android:title="@string/bill"
    app:showAsAction="always"
    tools:ignore="AlwaysShowAction" />

<item
    android:id="@+id/paymentsFragment"
    android:checkable="true"
    android:icon="@drawable/ic_payments"
    android:title="@string/payments"
    app:showAsAction="always" />

<item
    android:id="@+id/cachedFragment"
    android:checkable="true"
    android:icon="@drawable/ic_cached"
    android:title="@string/cached"
    app:showAsAction="always" />

<item
    ... />

<item
    ... />

</menu>
Solution

  • For middle item set its title to " ". For make middle icon bigger, see here: Change Bottom Bar icon size android