How to create the custom item of Bottomnavigationview Android?
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>
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);
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);