Output

Let’s have a quick demo of things we want to cover in this tutorial –

Getting Started

We can define android ViewPager2 widget as below –

ViewPager2 is advanced version of androidx.viewpager2.widget.ViewPager2 that supports right-to-left layout support, vertical orientation, modifiable Fragment collections etc.

Now, how do we use ViewPager2 in android application ?

Creating New Project

At first, we will create an application.
So, follow steps below to create any android project in Kotlin –

Newbie in Android ?

Some very important concepts (Recommended to learn before you move ahead)

• Install Android Studio
• Create New Project in Android Studio
• Android Project Structure
• Run / Debug / Test Android App

Before we move ahead, we need to setup for viewBinding to access Android ViewPager2 Using Kotlin file without using findViewById() method.

Setup ViewBinding

Add viewBinding true in app/build.gradle file.

 
 android { 
 	// OTHER CODE... 
 	buildFeatures { 
 		viewBinding true 
 	} 
 } 
 

Now, set content in activity using view binding.
Open MainActivity.kt file and write below code in it.

 
 class MainActivity : AppCompatActivity() { 
 	
 	private lateinit var binding: ActivityMainBinding 
 	
 	override fun onCreate(savedInstanceState: Bundle?) { 
 		super.onCreate(savedInstanceState) 
 		binding = ActivityMainBinding.inflate(layoutInflater) 
 		val view = binding.root 
 		setContentView(view) 
 	} 
 } 
 

Now, we can access view in Kotlin file without using findViewById() method.

Using ViewPager2 in Kotlin

Follow steps below to use ViewPager2 in newly created project –

• We are using an image, tw_logo.png, in our application. So, download this image and save it in res/drawable folder.
  
• Open res/values/strings.xml file. Then, add below code into it.

  <resources>
      <string name="app_name">ViewPagerWithFragment</string>
  </resources>
  

• Now, we need to create ui for single view inside viewPager2. So, create a new file, item_holder.xml, in res/layout folder. Then, add below code into it –

  <?xml version="1.0" encoding="utf-8"?>
  <androidx.constraintlayout.widget.ConstraintLayout 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">
  
      <ImageView
          android:id="@+id/labelHeader"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginBottom="20dp"
          android:contentDescription="@string/app_name"
          android:src="@drawable/tw_logo"
          app:layout_constraintBottom_toTopOf="@+id/label"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent" />
  
      <TextView
          android:id="@+id/label"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textSize="20sp"
          android:textStyle="bold"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" />
  
  </androidx.constraintlayout.widget.ConstraintLayout>
  

• Now, we need to create a fragment for each view in viewPager2. So, create a new file, ItemFragment.kt, in com.tutorialwing.viewpagerwithfragment package. Then, add below code into it –

  package com.tutorialwing.viewpagerwithfragment
  
  import android.graphics.Color
  import android.os.Bundle
  import android.view.LayoutInflater
  import android.view.View
  import android.view.ViewGroup
  import androidx.fragment.app.Fragment
  import com.tutorialwing.viewpagerwithfragment.databinding.ItemHolderBinding
  
  class ItemFragment : Fragment() {
  
  	private lateinit var binding: ItemHolderBinding
  
  	override fun onCreateView(
  		inflater: LayoutInflater,
  		container: ViewGroup?,
  		savedInstanceState: Bundle?
  	): View {
  		binding = ItemHolderBinding.inflate(layoutInflater)
  		return binding.root
  	}
  
  	override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
  		super.onViewCreated(view, savedInstanceState)
  
  		setupData()
  	}
  
  	private fun setupData() {
  		binding.label.text = getString(R.string.app_name)
  
  		val color = arguments?.getString("color")
  		binding.root.setBackgroundColor(Color.parseColor(color))
  
  		val position = arguments?.getString("label")
  		binding.label.text = position
  	}
  }
  

• Now, we need to create an adapter, ViewPagerAdapter.kt, in com.tutorialwing.viewpagerwithfragment package. Then, add below code into it –

  package com.tutorialwing.viewpagerwithfragment
  
  import androidx.fragment.app.Fragment
  import androidx.fragment.app.FragmentActivity
  import androidx.viewpager2.adapter.FragmentStateAdapter
  import android.os.Bundle
  
  class ViewPagerAdapter(fragmentActivity: FragmentActivity, var colorList: ArrayList<String>) :
  	FragmentStateAdapter(fragmentActivity) {
  
  	override fun getItemCount(): Int {
  		return colorList.size
  	}
  
  	override fun createFragment(position: Int): Fragment {
  		val fragment = ItemFragment()
  		val args = Bundle()
  		args.putString("color", colorList[position])
  		args.putString("label", "Fragment Number: ${position + 1}")
  		fragment.arguments = args
  		return fragment
  	}
  }
  

• Open res/layout/activity_main.xml file. Then, add below code in it –

  <?xml version="1.0" encoding="utf-8"?>
  <androidx.constraintlayout.widget.ConstraintLayout 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"
      tools:context=".MainActivity">
  
      <androidx.viewpager2.widget.ViewPager2
          android:id="@+id/viewPager"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintRight_toRightOf="parent"
          app:layout_constraintTop_toTopOf="parent" />
  
  </androidx.constraintlayout.widget.ConstraintLayout>
  

• Now, create a new file, ZoomOutPageTransformer.kt, in com.tutorialwing.viewpagerwithfragment package. Then, add below code in it –

  package com.tutorialwing.viewpagerwithfragment
  
  import android.view.View
  import androidx.viewpager2.widget.ViewPager2
  
  private const val MIN_SCALE = 0.85f
  private const val MIN_ALPHA = 0.5f
  
  class ZoomOutPageTransformer : ViewPager2.PageTransformer {
  
  	override fun transformPage(view: View, position: Float) {
  		view.apply {
  			val pageWidth = width
  			val pageHeight = height
  			when {
  				position < -1 -> { // [-Infinity,-1)
  					// This page is way off-screen to the left.
  					alpha = 0f
  				}
  				position <= 1 -> { // [-1,1]
  					// Modify the default slide transition to shrink the page as well
  					val scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position))
  					val vertMargin = pageHeight * (1 - scaleFactor) / 2
  					val horzMargin = pageWidth * (1 - scaleFactor) / 2
  					translationX = if (position < 0) {
  						horzMargin - vertMargin / 2
  					} else {
  						horzMargin + vertMargin / 2
  					}
  
  					// Scale the page down (between MIN_SCALE and 1)
  					scaleX = scaleFactor
  					scaleY = scaleFactor
  
  					// Fade the page relative to its size.
  					alpha = (MIN_ALPHA +
  							(((scaleFactor - MIN_SCALE) / (1 - MIN_SCALE)) * (1 - MIN_ALPHA)))
  				}
  				else -> { // (1,+Infinity]
  					// This page is way off-screen to the right.
  					alpha = 0f
  				}
  			}
  		}
  	}
  }
  

  This class is used to set animation while we navigate from one view to another in viewPager2.

• We can also access it in Kotlin File, MainActivity.kt, as below –

  package com.tutorialwing.viewpagerwithfragment
  
  import androidx.appcompat.app.AppCompatActivity
  import android.os.Bundle
  import com.tutorialwing.viewpagerwithfragment.databinding.ActivityMainBinding
  
  class MainActivity : AppCompatActivity() {
  
  	private lateinit var binding: ActivityMainBinding
  
  	override fun onCreate(savedInstanceState: Bundle?) {
  		super.onCreate(savedInstanceState)
  
  		binding = ActivityMainBinding.inflate(layoutInflater)
  		setContentView(binding.root)
  
  		setupViewPager2()
  	}
  
  	private fun setupViewPager2() {
  		val colorList = arrayListOf("#00ff00", "#ff0000", "#0000ff", "#f0f0f0")
  		binding.viewPager.adapter = ViewPagerAdapter(this, colorList)
  
  		binding.viewPager.setPageTransformer(ZoomOutPageTransformer())
  	}
  
          // This function handles back button press. When user press back button, previous view in viewPager2 
          // is displayed.
  	override fun onBackPressed() {
  		val viewPager = binding.viewPager
  		if (viewPager.currentItem == 0) {
  			// If the user is currently looking at the first step, allow the system to handle the
  			// Back button. This calls finish() on this activity and pops the back stack.
  			super.onBackPressed()
  		} else {
  			// Otherwise, select the previous step.
  			viewPager.currentItem = viewPager.currentItem - 1
  		}
  	}
  
  }
  

Now, run the application. We will get output as below –

That’s end of tutorial on viewPager2 With Fragment using Kotlin.