Android bottom navigation view show text on the side of the icon

Question

I would like to show bottom bar text on the right side of the icon like City Mapper. I've currently implemented my first version using Android default component

This question was asked here but no solution was found and it has been commented it's not possible. If City Mapper is doing it then it should be possible. How do I do it?

Answer 1

How to deal with it

I think it can be way easier to deal with this problem by creating your own view or a fragment. For example, you can create a fragment, and in the layout of this one displaying the icons and text as you wish. It will give you more power to customise it.

What others are using

We do not know what way "City matter" is using to provide this bottom bar, maybe they have implemented they own custom view.

Here is an example of a simple activity with a bottom bar as you wish :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    android:background="#BFBFBF"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <LinearLayout
        android:background="#FFF"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@android:drawable/ic_menu_search" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Search" />

        </LinearLayout>

        <View
            android:layout_width="1dp"
            android:background="#ACACAC"
            android:layout_marginVertical="5dp"
            android:layout_height="match_parent"/>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@android:drawable/ic_menu_search" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Search" />

        </LinearLayout>

    </LinearLayout>
    
</androidx.constraintlayout.widget.ConstraintLayout>

I hope it is going to help you!