custom tablayout

build.gradle

dependencies {
....
    compile 'com.android.support:support-v4:27.1.1'
    compile 'com.flyco.tablayout:FlycoTabLayout_Lib:2.1.2@aar'
}

content_home.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="au.sj.owl.uimock.ui.home.HomeActivity"
    tools:showIn="@layout/app_bar_home">

    <com.flyco.tablayout.SlidingTabLayout
        android:id="@+id/tl_9"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/colorBackground"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        app:tl_indicator_margin_top="8dp"
        app:tl_indicator_margin_bottom="8dp"
        app:tl_indicator_color="@color/colorPrimary"
        app:tl_textUnselectColor="@color/colorTextSecondary"
        app:tl_textSelectColor="@color/colorBackground"
        app:tl_indicator_corner_radius="5dp"
        app:tl_indicator_gravity="BOTTOM"
        app:tl_indicator_margin_left="4dp"
        app:tl_indicator_margin_right="4dp"
        app:tl_indicator_style="BLOCK"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/tl_9"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.constraint.ConstraintLayout>

HomeActivity.kt

private var mSectionsPagerAdapter: SectionsPagerAdapter? = null

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
...

    mSectionsPagerAdapter = SectionsPagerAdapter(supportFragmentManager)
    container.adapter = mSectionsPagerAdapter
    tl_9.setViewPager(container)
    nav_view.setNavigationItemSelectedListener(this)
}

/**
* A [FragmentPagerAdapter] that returns a fragment corresponding to
* one of the sections/tabs/pages.
*/
inner class SectionsPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {

  val titles:Array<String> = arrayOf("All","New", "Popular")

  override fun getItem(position: Int): Fragment {
      // getItem is called to instantiate the fragment for the given page.
      // Return a PlaceholderFragment (defined as a static inner class below).
      return PlaceholderFragment.newInstance(position + 1)
  }

  override fun getCount(): Int {
      // Show 3 total pages.
      return 3
  }

  override fun getPageTitle(position: Int): CharSequence? = titles[position]
}


/**
 * A placeholder fragment containing a simple view.
 */
class PlaceholderFragment : Fragment() {

    override fun onCreateView(inflater: LayoutInflater,
                              container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        val rootView = inflater.inflate(R.layout.fragment_tabbed, container, false)
        rootView.section_label.text = getString(R.string.section_format, arguments!!.getInt(ARG_SECTION_NUMBER))
        return rootView
    }

    companion object {
        /**
         * The fragment argument representing the section number for this
         * fragment.
         */
        private val ARG_SECTION_NUMBER = "section_number"

        /**
         * Returns a new instance of this fragment for the given section
         * number.
         */
        fun newInstance(sectionNumber: Int): PlaceholderFragment {
            val fragment = PlaceholderFragment()
            val args = Bundle()
            args.putInt(ARG_SECTION_NUMBER, sectionNumber)
            fragment.arguments = args
            return fragment
        }
    }
}

tabbed_fragment.xml

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingEnd="@dimen/activity_horizontal_margin"
    android:paddingStart="@dimen/activity_horizontal_margin">


    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvMenuItems"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <com.appyvet.rangebar.RangeBar xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:id="@+id/rangebar"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        app:mrb_barWeight="1dp"
        app:mrb_connectingLineColor="#ff5304"
        app:mrb_connectingLineWeight="1dp"
        app:mrb_pinColor="#fafafa"
        app:mrb_pinMaxFont="10sp"
        app:mrb_rangeBarColor="#b7b7b7"
        app:mrb_rangeBarPaddingBottom="12dp"
        app:mrb_selectorColor="#4e4c4c"
        app:mrb_selectorSize="30dp"
        app:mrb_tickEnd="10"
        app:mrb_rangeBar="true"
        android:background="#ffffff"
        style="@style/AppTheme.PopupOverlay"
        app:mrb_tickHeight="0dp"
        app:mrb_tickInterval="1"
        app:mrb_tickStart="0" />

</android.support.constraint.ConstraintLayout>