How to create the custom item of Bottomnavigationview Android?

Question

I am using the Bottomnavigationview for tab-bar in my application, for it, i am using the following code.Please check it once.

Layout :-

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"     
        app:itemTextColor="@android:color/black"
        app:menu="@menu/bottom_navigation_main" />

And I get the following Result from it, please check the image for it.

But the problem is that, I need the custom item of the Bottomnavigationview, like in below image there is red TextView count which is on the home item of the Bottomnavigationview, Please check the below image.

I have searched for it and get the third party library for it, which is able to create the view which I want.Please check the library of it Click here .Is it not possible to NOT use any third party library and use the only Bottomnavigationview for it?

I have searched here on SO but did not get the expected result, please check the below link which I have visited.

1. First Link
2. Second Link
3. Third Link
4. Forth Link
5. Fifth Link

Please help me to short out from this problem. Thanks :)

Answer 1

I have done the above task as the following approach, please have a look on the solution

Layout

 <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_alignParentBottom="true"
            android:background="@color/header_color"
            app:itemIconTint="@color/white_color"
            app:itemTextColor="@color/white_color"
            app:menu="@menu/bottom_navigation" />  /// YOUR MENU ITEMS FOR THE BOTTOM NAVIGATION

Your badge count layout be like below

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

    <TextView
        android:id="@+id/notificationsBadge"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_gravity="top|center_horizontal"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:background="@drawable/circle_red"
        android:gravity="center"
        android:padding="4dp"
        android:text=""
        android:textColor="@android:color/white"
        android:textSize="12sp" />
</FrameLayout>

And than after your badge drawable be like below

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@android:color/holo_red_light" />
    <size
        android:width="20dp"
        android:height="20dp" />
</shape>

And at the last, you need we need to inflate our badge layout into our MainActivity.java , where we use the BottomNavigationView, please check the following code for it.

    BottomNavigationMenuView mbottomNavigationMenuView =
            (BottomNavigationMenuView) mBinding.bottomNavigation.getChildAt(0);

    View view = mbottomNavigationMenuView.getChildAt(4);

    BottomNavigationItemView itemView = (BottomNavigationItemView) view;

    View cart_badge = LayoutInflater.from(this)
            .inflate(R.layout.profile_view,
                    mbottomNavigationMenuView, false);

    //// AND THAN SET THE COUNTER BADGE, AS FOLLOW
    ((TextView) cart_badge.findViewById(R.id.notificationsBadge)).setText("5");

    itemView.addView(cart_badge);