Where and how to populate my tab using fragment

Android Development

Tab Layout

Fragment Usage

Mobile App Design

UI/UX Design

Where and how to populate my tab using fragment

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

iOS & Android

Introduction

In Android, tabs are populated using Fragments by combining TabLayout with ViewPager2 and a FragmentStateAdapter. Each tab corresponds to a Fragment that defines its own layout and logic. The adapter maps tab positions to Fragment instances, and TabLayoutMediator connects the tab titles to the ViewPager pages. This pattern keeps each tab's UI isolated in its own Fragment, making the code modular and the lifecycle manageable.

Dependencies

groovy

1// build.gradle (app)
2dependencies {
3    implementation 'com.google.android.material:material:1.11.0'
4    implementation 'androidx.viewpager2:viewpager2:1.0.0'
5    implementation 'androidx.fragment:fragment-ktx:1.6.2'
6}

Activity Layout

xml

1<!-- activity_main.xml -->
2<LinearLayout
3    xmlns:android="http://schemas.android.com/apk/res/android"
4    xmlns:app="http://schemas.android.com/apk/res-auto"
5    android:layout_width="match_parent"
6    android:layout_height="match_parent"
7    android:orientation="vertical">
8
9    <com.google.android.material.tabs.TabLayout
10        android:id="@+id/tabLayout"
11        android:layout_width="match_parent"
12        android:layout_height="wrap_content"
13        app:tabMode="fixed"
14        app:tabGravity="fill" />
15
16    <androidx.viewpager2.widget.ViewPager2
17        android:id="@+id/viewPager"
18        android:layout_width="match_parent"
19        android:layout_height="0dp"
20        android:layout_weight="1" />
21
22</LinearLayout>

TabLayout renders the tab bar. ViewPager2 handles swiping between pages and hosts the fragments.

Fragment Adapter

kotlin

1import androidx.fragment.app.Fragment
2import androidx.fragment.app.FragmentActivity
3import androidx.viewpager2.adapter.FragmentStateAdapter
4
5class TabPagerAdapter(activity: FragmentActivity) : FragmentStateAdapter(activity) {
6
7    override fun getItemCount(): Int = 3
8
9    override fun createFragment(position: Int): Fragment {
10        return when (position) {
11            0 -> HomeFragment()
12            1 -> SearchFragment()
13            2 -> ProfileFragment()
14            else -> HomeFragment()
15        }
16    }
17}

FragmentStateAdapter creates and manages Fragment instances. createFragment() is called once per position — the adapter caches fragments and handles their lifecycle.

Activity Setup

kotlin

1import android.os.Bundle
2import androidx.appcompat.app.AppCompatActivity
3import com.google.android.material.tabs.TabLayout
4import com.google.android.material.tabs.TabLayoutMediator
5import androidx.viewpager2.widget.ViewPager2
6
7class MainActivity : AppCompatActivity() {
8
9    override fun onCreate(savedInstanceState: Bundle?) {
10        super.onCreate(savedInstanceState)
11        setContentView(R.layout.activity_main)
12
13        val tabLayout = findViewById<TabLayout>(R.id.tabLayout)
14        val viewPager = findViewById<ViewPager2>(R.id.viewPager)
15
16        // Set the adapter
17        viewPager.adapter = TabPagerAdapter(this)
18
19        // Connect TabLayout with ViewPager2
20        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
21            tab.text = when (position) {
22                0 -> "Home"
23                1 -> "Search"
24                2 -> "Profile"
25                else -> "Tab $position"
26            }
27        }.attach()
28    }
29}

TabLayoutMediator synchronizes the tab selection with the ViewPager page position and sets tab titles via the lambda.

Tab Fragments

kotlin

1// HomeFragment.kt
2class HomeFragment : Fragment() {
3    override fun onCreateView(
4        inflater: LayoutInflater,
5        container: ViewGroup?,
6        savedInstanceState: Bundle?
7    ): View {
8        return inflater.inflate(R.layout.fragment_home, container, false)
9    }
10
11    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
12        super.onViewCreated(view, savedInstanceState)
13        // Initialize views and load data here
14        val textView = view.findViewById<TextView>(R.id.homeText)
15        textView.text = "Welcome Home"
16    }
17}

xml

1<!-- fragment_home.xml -->
2<FrameLayout
3    xmlns:android="http://schemas.android.com/apk/res/android"
4    android:layout_width="match_parent"
5    android:layout_height="match_parent"
6    android:padding="16dp">
7
8    <TextView
9        android:id="@+id/homeText"
10        android:layout_width="wrap_content"
11        android:layout_height="wrap_content"
12        android:layout_gravity="center"
13        android:textSize="24sp" />
14
15</FrameLayout>

Passing Data to Tab Fragments

kotlin

1class TabPagerAdapter(activity: FragmentActivity) : FragmentStateAdapter(activity) {
2
3    override fun getItemCount(): Int = 3
4
5    override fun createFragment(position: Int): Fragment {
6        val fragment = ContentFragment()
7        fragment.arguments = Bundle().apply {
8            putInt("tab_position", position)
9            putString("tab_title", getTabTitle(position))
10        }
11        return fragment
12    }
13
14    private fun getTabTitle(position: Int): String = when (position) {
15        0 -> "Home"
16        1 -> "Search"
17        2 -> "Profile"
18        else -> "Unknown"
19    }
20}
21
22// ContentFragment reads its arguments
23class ContentFragment : Fragment() {
24    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
25        super.onViewCreated(view, savedInstanceState)
26        val position = arguments?.getInt("tab_position") ?: 0
27        val title = arguments?.getString("tab_title") ?: "Unknown"
28        view.findViewById<TextView>(R.id.text).text = "Tab $position: $title"
29    }
30}

Use Bundle arguments to pass data to fragments. Never pass data through constructor parameters — Android recreates fragments using the no-argument constructor.

Tabs with Icons

kotlin

1TabLayoutMediator(tabLayout, viewPager) { tab, position ->
2    when (position) {
3        0 -> {
4            tab.text = "Home"
5            tab.setIcon(R.drawable.ic_home)
6        }
7        1 -> {
8            tab.text = "Search"
9            tab.setIcon(R.drawable.ic_search)
10        }
11        2 -> {
12            tab.text = "Profile"
13            tab.setIcon(R.drawable.ic_profile)
14        }
15    }
16}.attach()
17
18// Icon-only tabs (no text)
19tabLayout.tabIconTint = null  // preserve original icon colors

Using Fragment from a Parent Fragment

kotlin

1// If your tabs are inside another Fragment (not an Activity)
2class ParentFragment : Fragment() {
3
4    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
5        super.onViewCreated(view, savedInstanceState)
6        val viewPager = view.findViewById<ViewPager2>(R.id.viewPager)
7        val tabLayout = view.findViewById<TabLayout>(R.id.tabLayout)
8
9        // Use childFragmentManager, not activity's
10        viewPager.adapter = ChildTabAdapter(this)
11
12        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
13            tab.text = "Tab $position"
14        }.attach()
15    }
16}
17
18class ChildTabAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {
19    override fun getItemCount(): Int = 3
20    override fun createFragment(position: Int): Fragment = ContentFragment()
21}

When tabs live inside a Fragment, pass the parent Fragment (not the Activity) to FragmentStateAdapter. This uses childFragmentManager so nested fragment lifecycles are managed correctly.

Common Pitfalls

Using the deprecated ViewPager instead of ViewPager2: The original ViewPager and FragmentPagerAdapter/FragmentStatePagerAdapter are deprecated. Use ViewPager2 with FragmentStateAdapter for proper lifecycle handling and RecyclerView-based performance.
Passing data through Fragment constructors: Android recreates Fragments using reflection with the no-argument constructor. Constructor parameters are lost. Always use Bundle arguments via fragment.arguments = Bundle().
Using activity!!.supportFragmentManager in nested fragments: When tabs are inside a Fragment, use childFragmentManager (by passing the Fragment to FragmentStateAdapter). Using the activity's fragment manager causes lifecycle issues and crashes on configuration changes.
Not calling .attach() on TabLayoutMediator: Forgetting .attach() means the tabs are not connected to the ViewPager. Tabs will not display titles and swiping will not update the selected tab.
Recreating fragments on every page switch: FragmentStateAdapter handles caching. Do not create new Fragment instances in onResume or reinitialize the adapter on every lifecycle event. Set the adapter once in onCreate or onViewCreated.

Summary

Use ViewPager2 + FragmentStateAdapter + TabLayoutMediator for tabbed interfaces
Each tab corresponds to a Fragment returned by createFragment() in the adapter
TabLayoutMediator connects tab titles/icons to ViewPager page positions
Pass data to fragments using Bundle arguments, never constructor parameters
Use childFragmentManager (pass the Fragment, not the Activity) when tabs are nested inside another Fragment
Call .attach() on TabLayoutMediator to activate the tab-page synchronization

Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course

Basis Lab

No course covers this one yet

Basis Lab writes one for you from a sentence about what you want to be able to do, then teaches it and checks you understood. Your first course is free.

Build my course

Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Where and how to populate my tab using fragment

Interview Questions practice on Codemia

Introduction

Dependencies

Activity Layout

Fragment Adapter

Activity Setup

Tab Fragments

Passing Data to Tab Fragments

Tabs with Icons

Using Fragment from a Parent Fragment

Common Pitfalls

Summary

Related reading

Tackling System Design Interview Problems

No course covers this one yet

Track what you have practised

Interview Questions practice on Codemia