How to Implement Stepper Functionality in Android?

A Stepper widget allows you to organize content in a sequence of steps, and the user can navigate between them. In this article we are going to implement a Stepper-like functionality in an Android app here we take the help of Tablayout to achieve this. A Sample video is attached below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio and select the language as Kotlin.

Step 2: Change the StatusBar Color

Navigate to app > res > values > themes > themes.xml and add the below code under the style section in the themes.xml file.

<item name="android:statusBarColor" tools:targetApi="l">#308d46</item>

Step 3: Working with fragment_step.xml

Create a new Fragment resource file named it as fragment_step.xml it contains two text views for displaying the content of each step.

XML

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/stepTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:textStyle="bold"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="16dp" />

    <TextView
        android:id="@+id/stepDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:layout_gravity="center_horizontal" />

</LinearLayout>

Step 4: Working with StepFragment.kt file

Create a new fragment kotlin file named it as StepFragment.kt . It contains two methods.

onCreateView Function:

• It is responsible for inflating (loading) the fragment’s layout XML file (fragment_step.xml) and returning the root View of that layout.
• The layout defined in fragment_step.xml is inflated and added to the fragment’s UI.

onViewCreated Function:

• In this function, you can interact with the views defined in the fragment’s layout.
• Here, it’s setting the text for two TextViews (stepTitle and stepDescription) with values passed in through the fragment’s arguments (title and description).

StepFragment.kt:

Kotlin

package com.example.gfg

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import kotlinx.android.synthetic.main.fragment_step.*

// TODO: Rename parameter arguments, choose names that match
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
private const val ARG_PARAM1 = "param1"
private const val ARG_PARAM2 = "param2"

/**
 * A simple [Fragment] subclass.
 * Use the [StepFragment.newInstance] factory method to
 * create an instance of this fragment.
 */
class StepFragment(private val title: String, private val description: String) : Fragment() {
    // TODO: Rename and change types of parameters
    private var param1: String? = null
    private var param2: String? = null

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_step, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        // Set the title and description on the UI
        stepTitle.text = title
        stepDescription.text = description
    }

}

Step 5: Working with activity_main.xml

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. This xml file represents our app UI, our UI contains an Tablayout and an viewpager.

activity_main.xml:

XML

<LinearLayout
    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"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

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

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

Step 6: Working with the MainActivity.kt file

Go to the MainActivity.kt and follow the below code. Below is the code for the MainActivity.kt. Comments are added inside the code to understand the code in more detail. In this class we are going to implement the fumtionality of the stepper in the application.

MainActivity.kt:

Kotlin

package com.example.gfg

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.viewpager2.adapter.FragmentStateAdapter
import com.google.android.material.tabs.TabLayoutMediator
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        // List of steps, where each step is represented by a StepFragment
        val steps = listOf(
            StepFragment("Step 1", "Description for Step 1"),   // Step 1
            StepFragment("Step 2", "Description for Step 2"),   // Step 2
            StepFragment("Step 3", "Description for Step 3")    // Step 3
        )

        // Create an adapter for the ViewPager2 that manages the steps
        val adapter = object : FragmentStateAdapter(this) {
            override fun getItemCount(): Int = steps.size
            override fun createFragment(position: Int): Fragment = steps[position]
        }

        // Set the adapter for the ViewPager2
        viewPager.adapter = adapter

        // Attach the TabLayout to the ViewPager2 and set tab labels
        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
              // Set tab labels like "Step 1," "Step 2," etc.
            tab.text = "Step ${position + 1}"
        }.attach()
    }
}

Output: