How to change bottom navigation bar text position?

Question

I want to change text position in bottom navigation bar like below image,

Here is my code:

 <?xml version="1.0" encoding="utf-8"?>
<android.widget.RelativeLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeActivity">

    <android.support.design.widget.BottomNavigationView

        android:layout_width="match_parent"
        android:layout_height="66dp"
        android:theme="@style/Widget.BottomNavigationView"
        android:layout_alignParentStart="false"
        android:layout_alignParentEnd="false"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:layout_marginBottom="0dp"
        android:background="#fcff38"
        app:itemIconSize="30dp"
        app:itemTextColor="#000000"


        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/menulist" />

</android.widget.RelativeLayout> 

using android studio 3.2

Thanks.

Answer 1

You need to set label visibility mode to labeled.

app:labelVisibilityMode="labeled"

The label visibility mode determines whether to show or hide labels in the navigation items. Setting the label visibility mode to LABEL_VISIBILITY_SELECTED sets the label to only show when selected, setting it to LABEL_VISIBILITY_LABELED sets the label to always show, and LABEL_VISIBILITY_UNLABELED sets the label to never show.

Answer 2

Use this:

for (int i = 0; i < bottomNavigationView.getChildCount(); i++) {
    View item = bottomNavigationView.getChildAt(i);

    if (item instanceof BottomNavigationMenuView) {
        BottomNavigationMenuView menu = (BottomNavigationMenuView) item;

        for (int j = 0; j < menu.getChildCount(); j++) {
            View menuItem = menu.getChildAt(j);

            View small = menuItem.findViewById(android.support.design.R.id.smallLabel);
            if (small instanceof TextView) {
                ((TextView) small).setPadding(0, 20, 0, 0);
            }
            View large = menuItem.findViewById(android.support.design.R.id.largeLabel);
            if (large instanceof TextView) {
                ((TextView) large).setPadding(0, 20, 0, 0);
            }
        }
    }
}

to set the top padding of the textview and BottomNavigationView to your bottomNavigationView id.
Change 20 to what you like.

Answer 3

In res/layout/activlty_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".HomeActivity">

    <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#fcff38"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:itemBackground="@color/colorPrimary"
            app:itemIconTint="@color/white"
            app:itemTextColor="#000000"
            app:menu="@menu/menulist"/>

</android.support.constraint.ConstraintLayout>

in res/menu/menulist.xml :

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

    <item
            android:id="@+id/navigation_home"
            android:icon="@drawable/home"
            android:title="Home"/>

    <item
            android:id="@+id/navigation_gallery"
            android:icon="@drawable/ic_album"
            android:title="Gallery"/>

    <item
            android:id="@+id/navigation_food"
            android:icon="@drawable/ic_food"
            android:title="Foods"/>
    <item
            android:id="@+id/navigation_schedule"
            android:icon="@drawable/ic_schedule"
            android:title="Schedule"/>

</menu>