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.
<LinearLayout
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:
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:
<LinearLayout
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:
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()
}
} |