Skip to main content

How to create multiple fragments with ViewPager2 in Kotlin Android

How to create multiple fragments with ViewPager2 in Kotlin Android.

Here's a step-by-step tutorial on how to create multiple fragments with ViewPager2 in Kotlin for Android.

Step 1: Create a new Android Studio project​

Start by creating a new Android Studio project and choose an Empty Activity template.

Step 2: Add ViewPager2 to your project​

Open the app-level build.gradle file and add the ViewPager2 dependency to your project.

dependencies {
    // Other dependencies...
    implementation 'androidx.viewpager2:viewpager2:1.0.0'
}

Sync your project to make sure the dependency is added successfully.

Step 3: Create the fragment layouts​

Create the layouts for each of your fragments. For example, you can create two fragment layouts called "FragmentOneLayout" and "FragmentTwoLayout". Customize these layouts based on your requirements.

Step 4: Create the fragment classes​

Create the fragment classes for each of your fragments. For example, you can create two fragment classes called "FragmentOne" and "FragmentTwo". Extend the Fragment class and inflate the respective layout in the onCreateView() method.

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

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

Step 5: Create the ViewPager2 adapter​

Create a new Kotlin class called "ViewPagerAdapter" to serve as the adapter for the ViewPager2. Extend the FragmentStateAdapter class and override the getItemCount() and createFragment() methods.

class ViewPagerAdapter(fragmentManager: FragmentManager) :
    FragmentStateAdapter(fragmentManager, lifecycle) {

    override fun getItemCount(): Int {
        return 2 // Number of fragments in the ViewPager2
    }

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> FragmentOne()
            1 -> FragmentTwo()
            else -> FragmentOne()
        }
    }
}

Step 6: Implement the ViewPager2 in your activity layout​

Open the activity_main.xml layout file and add the ViewPager2 widget.

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

Step 7: Set up the ViewPager2 in your activity​

Open the MainActivity.kt file and initialize the ViewPager2 in the onCreate() method. Set the adapter and orientation for the ViewPager2.

class MainActivity : AppCompatActivity() {
    private lateinit var viewPager: ViewPager2

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

        viewPager = findViewById(R.id.viewPager)
        viewPager.adapter = ViewPagerAdapter(supportFragmentManager)
        viewPager.orientation = ViewPager2.ORIENTATION_HORIZONTAL
    }
}

Step 8: Run your app​

Build and run your app on an emulator or a physical device. You should now see the ViewPager2 with the two fragments displayed.

That's it! You have successfully created multiple fragments with ViewPager2 in Kotlin for Android. You can customize the fragments, layouts, and adapter based on your specific requirements.