Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create the custom item of Bottomnavigationview Android?

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.

Current Result

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.

Expected Result

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 :)

like image 249
Ravindra Kushwaha Avatar asked Aug 03 '17 13:08

Ravindra Kushwaha


3 Answers

If you are using androidX , please refer below code :

  BottomNavigationView mbottomNavigationView =findViewById(R.id.navigation);

        BottomNavigationMenuView mbottomNavigationMenuView =
                (BottomNavigationMenuView) mbottomNavigationView.getChildAt(0);

        View view = mbottomNavigationMenuView.getChildAt(1);

        BottomNavigationItemView itemView = (BottomNavigationItemView) view;

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

        itemView.addView(cart_badge);
like image 160
Hkh Avatar answered Nov 05 '22 08:11

Hkh


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);
like image 26
Ravindra Kushwaha Avatar answered Nov 05 '22 09:11

Ravindra Kushwaha


I used tab layout with a custom view in it

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/mainTabBar"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimaryDark"
        app:tabGravity="fill"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/colorPrimary" />
    var mainPagerAdapter = MainPagerAdapter(supportFragmentManager!!)
        viewPager.setAdapter(mainPagerAdapter)
        viewPager.setOffscreenPageLimit(mainPagerAdapter.getCount())
        for (i in 0 until mainPagerAdapter.getCount()) {
            val tab = mainTabBar.newTab()
            val tabView = mainPagerAdapter.getTabView(i, this)
            tab.setCustomView(tabView)
            mainTabBar.addTab(tab)
        }
        val tab = mainTabBar.getTabAt(0)
        if (tab != null) {
            tab.select()
            val view = tab.customView
            mainPagerAdapter.changeColorOfTabView(view!!, true, this,tab.position)
        }
        viewPager.setCurrentItem(0)

        mainTabBar.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab) {
                viewPager.currentItem = tab.getPosition()
                val view = tab.getCustomView()
                mainPagerAdapter.changeColorOfTabView(view!!, true, this@MainActivity, tab.position)
            }

            override fun onTabUnselected(tab: TabLayout.Tab) {
                val view = tab.getCustomView()
                mainPagerAdapter.changeColorOfTabView(view!!, false, this@MainActivity, tab.position)
            }

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

    fun getTabView(i: Int, context: Context): View {
//        val typeface = Typeface.createFromAsset(context.getAssets(), "fonts/Vazir-FD.ttf")
        val tabView = LayoutInflater.from(context).inflate(R.layout.tab_main, null) as LinearLayout

        val text = tabView.findViewById<TextView>(R.id.tabTextView)
        val icon = tabView.findViewById<ImageView>(R.id.drawableTop)
        text.setText(getPageTitle(i))
        text.setTextColor(context.getResources().getColor(R.color.white))
//        text.setTypeface(typeface)
        icon.setImageResource(getIconResId(i))

        if (i == 3) {
            tabView.isSelected = true
        }
        return tabView
    }

tab_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:paddingTop="10dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/drawableTop"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:adjustViewBounds="true" />

    <TextView
        android:id="@+id/tabTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/drawableTop"
        android:layout_centerHorizontal="true"
        android:textColor="@color/toggle_text_color_gray_red"
        android:textSize="11sp" />
</LinearLayout>
like image 1
Morteza Rastgoo Avatar answered Nov 05 '22 08:11

Morteza Rastgoo