Android Tablayout custom tab with a notification indicator

dependencies

implementation 'com.android.support:design:26.1.0'

activity_main.xml

fragment_page.xml

tab_custom_layout.xml, the custom layout for the custom tab on the Tablayout.

ic_dot.xml, the notifcaiton icon on the tab.

MainActivity.kt, the code for setting the custom tab view and listen to tab selections.

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.design.widget.TabLayout
import kotlinx.android.synthetic.main.activity_main.*
import android.support.v4.content.ContextCompat
import android.widget.TextView

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val pageAdapter = PageAdapter(supportFragmentManager)

        pageAdapter.add(PageFragment.newInstance("News"), "News")
        pageAdapter.add(PageFragment.newInstance("Discover"), "Discover")

        view_pager.adapter = pageAdapter
        tabs.setupWithViewPager(view_pager)

        val discoverTab = tabs.getTabAt(1)

        discoverTab?.setCustomView(R.layout.tab_custom_view)

        tabs.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {

            override fun onTabUnselected(tab: TabLayout.Tab?) {
                if (tab != null && tab.position == 1) {
                    val view = tab.customView
                    val selectedText = view?.findViewById(android.R.id.text1) as TextView
                    selectedText.setTextColor(ContextCompat.getColor(this@MainActivity, R.color.dark_gray))
                }
             }

            override fun onTabSelected(tab: TabLayout.Tab?) {
                if (tab != null && tab.position == 1) {
                    val view = tab.customView
                    val selectedText = view?.findViewById(android.R.id.text1) as TextView
                    selectedText.setTextColor(ContextCompat.getColor(this@MainActivity, R.color.colorPrimary))
                }
            }

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

            }
        })
    }
}

PageFragment.kt

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.ViewGroup
import android.view.LayoutInflater
import android.view.View
import android.widget.TextView

class PageFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.fragment_page, container, false)
        val pageType = arguments.getString(PAGE_TYPE)

        val tvHello: TextView = view.findViewById(R.id.tv_hello)
        tvHello.text = pageType
        return view
    }
    companion object {
        val PAGE_TYPE = "PAGE_TYPE"
        fun newInstance(pageType: String): PageFragment {
            val fragment = PageFragment()
            val args = Bundle()
            args.putString(PAGE_TYPE, pageType)
            fragment.arguments = args
            return fragment
        }
    }
}

PageAdapter.kt

import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter

class PageAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {

    private val tabNames: ArrayList
    private val fragments: ArrayList

    init {
        tabNames = ArrayList()
        fragments = ArrayList()
    }

    fun add(fragment: Fragment, title: String) {
        tabNames.add(title)
        fragments.add(fragment)
    }

    override fun getCount(): Int {
        return fragments.size
    }

    override fun getItem(position: Int): Fragment {
        return fragments[position]
    }

    override fun getPageTitle(position: Int): CharSequence {
        return tabNames[position]
    }
}

Complete example in Github