How to change Bottom Navigation Text appearance in right side of the icon

Question

I want to create a Bottom Navigation Bar in which text should be aligned right side of the icon. default implementation displays the text below the icon.

XML:

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_bar"
        style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemIconTint="@color/selector_icon_tint_bottom_nav"
        app:itemTextColor="@color/selector_icon_tint_bottom_nav"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/bottom_nav" />

bottom_nav.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home_nav"
        android:contentDescription="@string/home"
        android:icon="@drawable/ic_home"
        android:title="@string/home" />
    <item
        android:id="@+id/live_tv_nav"
        android:contentDescription="@string/live_tv"
        android:icon="@drawable/ic_live_tv"
        android:title="@string/live_tv" />
    <item
        android:id="@+id/vod_nav"
        android:contentDescription="@string/vod"
        android:icon="@drawable/ic_vod"
        android:title="@string/vod" />
    <item
        android:id="@+id/broadcast_nav"
        android:contentDescription="@string/search"
        android:icon="@drawable/ic_search"
        android:title="@string/search" />
</menu>

Answer 1

我为此使用了 TabLayout ）

Answer 2

I have made it using Tab layout and Viewpager which is little bit long but at last it does the job for what I'm looking for if any one needs this can go through the below steps

Step1 . activity_home.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <variable
            name="model"
            type="com.demo.android.viewmodel.HomeActViewModel" />
    </data>

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/tabLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"/>


    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        android:background="@color/colorGrey"
        android:elevation="2dp"
        app:tabIndicatorHeight="0dp"
        android:minHeight="?attr/actionBarSize"
        app:layout_constraintBottom_toBottomOf="parent"/>


</androidx.constraintlayout.widget.ConstraintLayout>

</layout>

Step2 . HomeActivity.kt

package com.demo.android.view

import android.view.View
import android.widget.ImageView
import android.widget.TextView
import androidx.activity.viewModels
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentTransaction
import com.demo.android.R
import com.demo.android.databinding.ActivityHomeBinding
import com.demo.android.utils.setImageTint
import com.demo.android.utils.toast
import com.demo.android.view.adapter.PagerAdapter
import com.demo.android.viewmodel.HomeActViewModel
import com.google.android.material.tabs.TabLayout
import com.google.android.material.tabs.TabLayout.OnTabSelectedListener
import dagger.hilt.android.AndroidEntryPoint
import kotlinx.android.synthetic.main.activity_home.*


@AndroidEntryPoint
class HomeActivity() : BaseActivity<ActivityHomeBinding>(R.layout.activity_home) {

    val viewModel by viewModels<HomeActViewModel>()
    override var menuId: Int
        get() = TODO("Not yet implemented")
        set(value) {}

    override fun onViewModelSetup() {
        super.onViewModelSetup()
        with(viewModel) {
            binding.model = this
            message.observe {
                toast(it)
            }

            val pagerAdapter = PagerAdapter(supportFragmentManager, this@HomeActivity)
            viewpager.adapter = pagerAdapter
            tabLayout.setupWithViewPager(viewpager)

            for (i in 0 until tabLayout.tabCount) {
                val tab = tabLayout.getTabAt(i)
                tab!!.customView = pagerAdapter.getTabView(i)
            }
            tabLayout.setOnTabSelectedListener(object : OnTabSelectedListener {
                override fun onTabSelected(tab: TabLayout.Tab) {
                    val tv = tab.customView?.findViewById(R.id.textView) as TextView
                    val img = tab.customView?.findViewById(R.id.imageView) as ImageView
                    tv.visibility = View.VISIBLE
                    tv.setTextColor(resources.getColor(R.color.colorRed))
                    img.setImageTint(resources.getColor(R.color.colorRed))
                }

                override fun onTabUnselected(tab: TabLayout.Tab?) {
                    val tv = tab?.customView?.findViewById(R.id.textView) as TextView
                    val img = tab.customView?.findViewById(R.id.imageView) as ImageView
                    tv.visibility = View.GONE
                    img.setImageTint(resources.getColor(R.color.unselectColor))
                }

                override fun onTabReselected(tab: TabLayout.Tab?) {

                }
            })
    }
 }
}

Step3 . PagerAdapter.kt

package com.ginoweb.android.view.adapter


import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.widget.ImageView
import android.widget.TextView
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentPagerAdapter
import com.demo.android.R
import com.demo.android.model.customTab
import com.demo.android.utils.setImage
import com.demo.android.utils.setImageTint
import com.demo.android.view.fragments.DashboardFragment
import com.demo.android.view.fragments.ProfileFragment



internal class PagerAdapter(fm: FragmentManager?, context: Context) :
    FragmentPagerAdapter(fm!!) {
    var tabTitles = arrayOf(customTab(R.drawable.ic_baseline_home_24,"Home"), customTab(R.drawable.ic_profile,"Profile"))
    var context: Context

    init {
        this.context = context
    }

    override fun getCount(): Int {
        return tabTitles.size
    }

    override fun getItem(position: Int): Fragment {
        when (position) {
            0 -> return DashboardFragment()
            1 -> return ProfileFragment()
        }
        return DashboardFragment()
    }

    override fun getPageTitle(position: Int): CharSequence {
        return tabTitles[position].title
    }

    fun getTabView(position: Int): View {
        val tab: View = if(position == 0){
            LayoutInflater.from(context).inflate(R.layout.tab_start_layout,null)
        }else{
            LayoutInflater.from(context).inflate(R.layout.tab_end_layout,null)
        }
        val tv = tab.findViewById(R.id.textView) as TextView
        val img = tab.findViewById(R.id.imageView) as ImageView
        tv.text = tabTitles[position].title
        img.setImage(tabTitles[position].img)
        if(position == 1){
            tv.visibility=View.GONE
            img.setImageTint(context.resources.getColor(R.color.unselectColor))
        }else{
            tv.setTextColor(context.resources.getColor(R.color.colorRed))
            img.setImageTint(context.resources.getColor(R.color.colorRed))
        }

        return tab
    }
}

Step4 . tab_start_layout.xml

<?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="wrap_content">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginTop="14dp"
        android:layout_marginBottom="14dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_baseline_home_24" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="Home"
        android:textColor="@color/md_black_1000"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="@+id/imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>

Step5 . tab_end_layout.xml

<?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="wrap_content">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginTop="14dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="14dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/textView"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_baseline_home_24"
        />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Home"
        android:visibility="visible"
        android:textColor="@color/md_black_1000"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>

Step6 . customTab.kt

package com.demo.android.model

import android.widget.ImageView
class customTab( val img:Int,val title:String)

Step7 . Now here it is how it looks like

Answer 3

Change the Navigation layout gravity to:

android:layout_gravity="end"

Navigation View

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        app:itemIconTint="@color/selector_icon_tint_bottom_nav"
        app:itemTextColor="@color/selector_icon_tint_bottom_nav"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/bottom_nav" />