Custom Tablayout Android Kotlin example creates custom tablayout with custom view.
We will create a custom view for tablayout in this example.
If you don’t have go through basic tablayout tutorial, then visit android tablayout tutorial.
If you want to change toolbar menu items with every tab or fragment, the visit tablayout toolbar menu items.
You can use both icon and tab name in custom tablayout.
Four ways to set icons. Left side of text, Right side of text, Above text and Below text.
First, check the output of a tutorial, then we will develop it.
Download Source Code for Custom Tablayout Android Kotlin example
[sociallocker]Kotlin_CustomTabs[/sociallocker]
Step 1: Prepare Structure
Follow all the steps from basic tablayout Android Kotlin tutorial.
After you have completed above tutorial, you will have one android project with tablayout.
This basic project have three tabs and hence have three fragments for each fragment.
Now we will make separate layout resource file to make customizable view of every tab.
Now follow below steps.
Step 2: Adding custom_tab.xml file
Create a new resource directory named custom_tab.xml and add below code
<?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="match_parent"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="@+id/ll"
android:orientation="horizontal"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/ic_launcher"/>
<TextView
android:id="@+id/tvtab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ONE"
android:textColor="@color/colorAccent"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/ll2"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/ic_launcher"/>
<TextView
android:id="@+id/tvtab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TWO"
android:textColor="#26e9dc"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/ll3"
android:orientation="vertical"
android:gravity="center">
<TextView
android:id="@+id/tvtab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="THREE"
android:textColor="#d8ea2b"
android:textSize="14sp"
android:textStyle="bold" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/ic_launcher"/>
</LinearLayout>
</LinearLayout>
This layout resource file includes the custom views for all three tabs.
You can add or remove views as per the number of tabs you have in your project.
All the changes like color, text size, text style text name etc can be controlled with this file.
You can also change image of the tab.
Step 3: Updating MainActivity.kt
Update MainActivity.kt as per below code
import android.content.Context
import android.support.design.widget.TabLayout
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentPagerAdapter
import android.support.v4.view.ViewPager
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.widget.LinearLayout
import java.util.ArrayList
class MainActivity : AppCompatActivity() {
private var tabLayout: TabLayout? = null
var viewPager: ViewPager? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
viewPager = findViewById(R.id.viewpager) as ViewPager
setupViewPager(viewPager!!)
tabLayout = findViewById(R.id.tabs) as TabLayout
tabLayout!!.setupWithViewPager(viewPager)
val headerView = (getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater)
.inflate(R.layout.custom_tab, null, false)
val linearLayoutOne = headerView.findViewById(R.id.ll) as LinearLayout
val linearLayout2 = headerView.findViewById(R.id.ll2) as LinearLayout
val linearLayout3 = headerView.findViewById(R.id.ll3) as LinearLayout
tabLayout!!.getTabAt(0)!!.setCustomView(linearLayoutOne)
tabLayout!!.getTabAt(1)!!.setCustomView(linearLayout2)
tabLayout!!.getTabAt(2)!!.setCustomView(linearLayout3)
}
private fun setupViewPager(viewPager: ViewPager) {
val adapter = ViewPagerAdapter(supportFragmentManager)
adapter.addFragment(OneFragment(), "ONE")
adapter.addFragment(TwoFragment(), "TWO")
adapter.addFragment(ThreeFragment(), "THREE")
viewPager.adapter = adapter
}
internal inner class ViewPagerAdapter(manager: FragmentManager) : FragmentPagerAdapter(manager) {
private val mFragmentList = ArrayList<Fragment>()
private val mFragmentTitleList = ArrayList<String>()
override fun getItem(position: Int): Fragment {
return mFragmentList[position]
}
override fun getCount(): Int {
return mFragmentList.size
}
fun addFragment(fragment: Fragment, title: String) {
mFragmentList.add(fragment)
mFragmentTitleList.add(title)
}
override fun getPageTitle(position: Int): CharSequence {
return mFragmentTitleList[position]
}
}
}
Following lines of code will set custom view for each tab.
val linearLayoutOne = headerView.findViewById(R.id.ll) as LinearLayout
val linearLayout2 = headerView.findViewById(R.id.ll2) as LinearLayout
val linearLayout3 = headerView.findViewById(R.id.ll3) as LinearLayout
tabLayout!!.getTabAt(0)!!.setCustomView(linearLayoutOne)
tabLayout!!.getTabAt(1)!!.setCustomView(linearLayout2)
tabLayout!!.getTabAt(2)!!.setCustomView(linearLayout3)
First variables are defined with appropriate id and then custom view is set.
Java Version
Java Version of this tutorial : Custom Tablayout Android
You can give your review in the comment section.
You can also use comment section if you have any queries in making above tutorial. Thank you