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

Answer 1

I used tab layout with a custom view in it

    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(R.id.tabTextView)
        val icon = tabView.findViewById(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