Course on Kotlin Android App Development, Tab Layout – Tab Button Configuration

In Android app development, user interface (UI) is a crucial element. If the UI is intuitive and easy to use, the user experience (UX) will be significantly improved, positively impacting the success of the application. This course will explore how to create basic tab buttons using Tab Layout with Kotlin and Android.

Table of Contents

Understanding Tab Layout

Tab Layout is a UI component that helps users easily switch between multiple screens using tabs. Tabs are primarily used to distinguish the main functions of the app, allowing users to select the desired tab on the top of the screen to switch content.

To implement tabs in Android, we utilize two components: TabLayout and ViewPager. TabLayout displays the actual tab buttons, while ViewPager manages multiple pages corresponding to the tabs. By using these two components together, we can create swipeable tabs.

Constructing Tab Layout

To construct the Tab Layout, there are several steps to follow.

  1. Create a project and set up Gradle
  2. Create the layout file
  3. Connect the tabs and ViewPager
  4. Set up the Fragment for the tabs

1. Create a project and set up Gradle

Create a new project through Android Studio. Select Empty Activity and choose to use Kotlin. Add the following dependency in the build.gradle file of the created project:

implementation 'com.google.android.material:material:1.4.0'

2. Create the layout file

Modify the res/layout/activity_main.xml file in the project as follows:

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

3. Connect the tabs and ViewPager

Now, open the MainActivity.kt file and write the following:

import android.os.Bundle
    import androidx.appcompat.app.AppCompatActivity
    import androidx.fragment.app.Fragment
    import androidx.fragment.app.FragmentPagerAdapter
    import androidx.viewpager.widget.ViewPager
    import com.google.android.material.tabs.TabLayout

    class MainActivity : AppCompatActivity() {

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

            val tabLayout: TabLayout = findViewById(R.id.tabLayout)
            val viewPager: ViewPager = findViewById(R.id.viewPager)

            viewPager.adapter = object : FragmentPagerAdapter(supportFragmentManager) {
                override fun getItem(position: Int): Fragment {
                    return when (position) {
                        0 -> Fragment1()
                        1 -> Fragment2()
                        else -> Fragment3()
                    }
                }

                override fun getCount(): Int = 3
                
                override fun getPageTitle(position: Int): CharSequence? {
                    return when (position) {
                        0 -> "Tab 1"
                        1 -> "Tab 2"
                        2 -> "Tab 3"
                        else -> null
                    }
                }
            }

            tabLayout.setupWithViewPager(viewPager)
        }
    }

4. Set up the Fragment for the tabs

Create Fragment classes to be used for the tabs. Create Fragment1.kt, Fragment2.kt, and Fragment3.kt and write the following for each:

import android.os.Bundle
    import androidx.fragment.app.Fragment
    import android.view.LayoutInflater
    import android.view.View
    import android.view.ViewGroup

    class Fragment1 : Fragment() {
        override fun onCreateView(
            inflater: LayoutInflater, container: ViewGroup?,
            savedInstanceState: Bundle?
        ): View? {
            return inflater.inflate(R.layout.fragment_1, container, false)
        }
    }

Write the rest of the Fragments similarly.

Example of Tab Layout

Now, when you build and run the entire project, you will see an app with three tabs. Each time you select a tab, the corresponding Fragment will be displayed. This time, let’s add some simple content to each Fragment. Create the layout files for each Fragment.

fragment_1.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is the content of the first tab"
            android:layout_gravity="center"/>

    </FrameLayout>

fragment_2.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is the content of the second tab"
            android:layout_gravity="center"/>

    </FrameLayout>

fragment_3.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is the content of the third tab"
            android:layout_gravity="center"/>

    </FrameLayout>

Customizing Tab Layout

TabLayout provides many styling options by default. You can adjust the tab’s color, size, icons, etc., to create a more appealing UI. Below are some customization methods.

Setting Tab Colors

You can change the text color and background color of the tabs.

tabLayout.setTabTextColors(Color.parseColor("#FFFFFF"), Color.parseColor("#FF0000"))

Setting Tab Icons

tabLayout.getTabAt(0)?.setIcon(R.drawable.icon1)
    tabLayout.getTabAt(1)?.setIcon(R.drawable.icon2)
    tabLayout.getTabAt(2)?.setIcon(R.drawable.icon3)

Conclusion

In this course, we learned how to construct a tab layout in an Android app using Kotlin. We were able to build a UI that easily switches between multiple Fragments using TabLayout and ViewPager, and also explored basic customization methods. By utilizing various APIs and libraries, we hope you create amazing apps that enhance the user experience!

In the next lecture, we will explore how to implement additional tab actions and animation effects. We appreciate your interest!