CODEWITHSUNDEEP
javaandroidxmlandroid-layoutandroid-fragments
Joe
Joe

Reputation: 343

Remove BottomNavigationView Icons and center title

I have a bottom navigation view with 3 items. I want to only have centered text for each tab, and would therefore like to fully remove icons (not only make them transparent).

How can I remove Icons and center the titles?

This is what I have: enter image description here This is what I want: enter image description here

My code: (Prefer solution in XML)

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_alignParentBottom="true">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/navigationBar"
            android:background="@color/navigation"
            app:theme="@style/BottomNavigationTheme"
            app:menu="@menu/bottom_navigation_menu"
            android:minHeight="@dimen/abc_action_bar_default_height_material">

        </com.google.android.material.bottomnavigation.BottomNavigationView>

    </RelativeLayout>

</merge>

bottom_navigation_menu.xml

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

    <item
        android:id="@+id/ic_home"
        android:title="@string/home">
    </item>

    <item
        android:id="@+id/ic_today"
        android:title="@string/today">
    </item>

    <item
        android:id="@+id/ic_you"
        android:title="@string/you">
    </item>

</menu>

Upvotes: 5

Views: 2169

Answers (4)

Shriya Pandya
Shriya Pandya

Reputation: 432

Add fix height to your bottom sheet and set bottom padding. Works for me.

   android:layout_height="35dp"
   android:paddingBottom="20dp"
   android:clipToPadding="false"

Upvotes: 0

The Dongster
The Dongster

Reputation: 344

The easiest way is to just use

android:paddingBottom="16dp" //(any dp you want)
android:clipToPadding="false"

Upvotes: 3

Bobz
Bobz

Reputation: 139

This works, for me

private int baselineHeight = 0;

private void removeIcons(BottomNavigationView view) {
    BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
    for (int i = 0; i < menuView.getChildCount(); i++) {
        BottomNavigationItemView itemView = (BottomNavigationItemView) (menuView.getChildAt(i));
        BaselineLayout baseline = (BaselineLayout) itemView.getChildAt(1);
        FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) baseline.getLayoutParams();
        baselineHeight = baselineHeight > 0 ? baselineHeight : (menuView.getHeight() + baseline.getHeight()) / 2;
        layoutParams.height = baselineHeight;
        baseline.setLayoutParams(layoutParams);
    }
}

just call it in onCreate() in your Activity and pass your BottomNavigationView as parameter.

If you don't want to clutter your Activities or Fragments with excess code and you want this present in your layout XML you can create a custom View that extends BottomNavigationView and call this function in onLayout() override.

Upvotes: 0

Hasnain Sabir
Hasnain Sabir

Reputation: 200

you can use this property of bottom navigationview to hide the text and it will automatically centered your icons and i think ou do not use the minHeight property sir. app:labelVisibilityMode="unlabeled"

Upvotes: -1

Related Questions