How to set indicator in BottomNavigationView? [duplicate]

Question

I want to set indicator on bottomNavigationView.You can see that orange line at bottom side
How to set indicator?

I didn't find any example for indicator.

 <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@drawable/bottom_navigation_bg"
            app:labelVisibilityMode="unlabeled"
            app:menu="@menu/bottom_menu_main"/>

Answer 1

My previous answer offers a lot of flexibility and animates nicely between selected states but involves a relatively large amount of code. A simpler solution that comes without animation, would be to use the itemBackground attribute of the BottomNavigationView:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemBackground="@drawable/bottom_nav_tab_background"
        android:layout_gravity="bottom"
        app:menu="@menu/menu_bottom_nav" />

</LinearLayout>

bottom_nav_tab_background

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <item android:gravity="bottom">
                <shape android:shape="rectangle">
                    <size android:height="4dp" />
                    <solid android:color="?attr/colorPrimary" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

Answer 2

Here's something I whipped up to add an indicator and move it around.

class IndicatorBottomNavigationView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = R.attr.bottomNavigationStyle
) : BottomNavigationView(context, attrs, defStyleAttr) {

    private val indicator: View = View(context).apply {
        layoutParams = LayoutParams(0, 5)
        setBackgroundColor(ContextCompat.getColor(context, R.color.carecredit_green))
    }

    init {
        addView(indicator)
    }

    var animateIndicator = true

    override fun setOnNavigationItemSelectedListener(listener: OnNavigationItemSelectedListener?) {
        OnNavigationItemSelectedListener { selectedItem ->

            menu
                .children
                .first { item ->
                    item.itemId == selectedItem.itemId
                }
                .itemId
                .let {
                    findViewById<View>(it)
                }
                .let { view ->
                    this.post {
                        indicator.layoutParams = LayoutParams(view.width, 5)

                        if (animateIndicator) {
                            indicator
                                .animate()
                                .x(view.x)
                                .start()
                        } else {
                            indicator.x = view.x
                        }

                        indicator.y = view.y
                    }
                }

            listener?.onNavigationItemSelected(selectedItem) ?: false
        }.let {
            super.setOnNavigationItemSelectedListener(it)
        }
    }
}