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() } } |
Contact Us