Android Viewpager2 with Kotlin Example

In this article, We are going to learn how to implement android viewpager2 in our android apps and how to use android viewpager2 with recyclerview using kotlin example.

ViewPager2 is an improved version of ViewPager. It comes with important new features and performance improvements. ViewPager is normally used to showcase important app features one at a time and to use swipeable tabs in android apps. You can also checkout sample app at HERE.

Difference between ViewPager2 & ViewPager

  • In ViewPager2, We can use RecyclerView to add items dynamically which is not possible in old ViewPager.
  • In old ViewPager, Vertical swiping is not possible. We can only use horizontal swipe. But in ViewPager2, We can use both orientations for swiping.
  • Right-to-left layout support for app locale is not provided in old viewpager. But in ViewPager2, this feature is enabled.
  • We can use animations for swipeable pages when they are switching because ViewPager2 supports page transformations.  

We will create swipeable tabs using ViewPager2 in this example. We also use databinding to bind data in xml layouts. I already explained how to use databinding in android apps in my previous article How to use Data Binding Library for RecyclerView using Kotlin in Android.

 

Add below dependency in your app level build.gradle

implementation androidx.viewpager2:viewpager2:1.0.0 

Add ViewPager2 in xml layout

You can also change orientation of swipeable pages. If you want to swipe pages vertically, then you need to add android:orientation=”vertical” in viewpager2 view in xml layout. 

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/view_pager_main"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

 

Create POJO Class to pass data

package com.example.viewpager2sample

data class Club(var logo:Int, var name:String, var desc:String, var color:Int) {}

 

Create Swipeable Page layout

In this layout, I generate custom binding adapter methods to set club logo and page background color. You can also create custom methods as below to use in xml layouts.
 
package com.example.viewpager2sample

import android.content.Context
import android.widget.ImageView
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.core.content.ContextCompat
import androidx.databinding.BindingAdapter

object Utils {

    @BindingAdapter("setBackgroundColor")
    @JvmStatic
    fun ConstraintLayout.setBgColor(color:Int){
        setBackgroundColor(ContextCompat.getColor(this.context,color))
    }

    @BindingAdapter("setImage")
    @JvmStatic
    fun ImageView.setLogo(resource:Int){
        setImageResource(resource)
    }

}

 

Create RecyclerView Adapter for ViewPager2

We need to create recyclerview adapter for swipeable tabs like we use for horizontal recyclerview.

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>
        <variable
            name="club"
            type="com.example.viewpager2sample.Club" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:setBackgroundColor="@{club.color}">

        <TextView
            android:id="@+id/txt_title_row"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="100dp"
            android:gravity="center_horizontal"
            android:textColor="#FFFFFF"
            android:textSize="30sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:text="@{club.name}"  />

        <ImageView
            android:id="@+id/img_logo_item"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_marginTop="40dp"
            app:setImage="@{club.logo}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/txt_title_row"/>

        <TextView
            android:id="@+id/txt_desc_row"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:gravity="center_horizontal"
            android:layout_marginTop="40dp"
            android:text="@{club.desc}"
            android:textColor="#FFFFFF"
            android:textSize="22sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/img_logo_item" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

 

package com.example.viewpager2sample

import android.content.Context
import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.databinding.DataBindingUtil
import androidx.recyclerview.widget.RecyclerView
import com.example.viewpager2sample.databinding.ClubRowBinding

class ClubsAdapter(private var ctx: Context?, private var listClubs: MutableList<Club>?) :
    RecyclerView.Adapter<ClubsAdapter.MyViewHolder>() {

    class MyViewHolder(val itemBinding: ClubRowBinding) : RecyclerView.ViewHolder(itemBinding.root){

        private var binding : ClubRowBinding? = null

        init {
            this.binding = itemBinding
        }

    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val inflater = LayoutInflater.from(ctx)
        val binding: ClubRowBinding = DataBindingUtil.inflate(inflater, R.layout.club_row,parent,false)
        return MyViewHolder(binding)
    }

    override fun getItemCount(): Int {
        listClubs?.let {
            return it.size
        }
        return 0
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
       holder.itemBinding.club = listClubs?.get(position)
    }

}

 

Integrate Adapter to ViewPager2

package com.example.viewpager2sample

import android.app.Activity
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import com.example.viewpager2sample.databinding.ActivityMainBinding

class MainActivity : Activity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val binding: ActivityMainBinding = DataBindingUtil.setContentView(this@MainActivity, R.layout.activity_main)

        val listClubs = mutableListOf<Club>()
        listClubs.add(Club(R.drawable.premier_league,"Premier League","English Premier League or EPL",android.R.color.holo_purple))
        listClubs.add(Club(R.drawable.laliga,"La Liga","The Campeonato Nacional de Liga de Primera DivisiĆ³n",android.R.color.holo_orange_dark))
        listClubs.add(Club(R.drawable.bundesliga,"Bundesliga","Federal League",android.R.color.holo_red_dark))
        listClubs.add(Club(R.drawable.serie_a,"Serie A","Lega Nazionale Professionisti Serie A",android.R.color.holo_blue_dark))
        listClubs.add(Club(R.drawable.ligue_one,"Ligue 1","Ligue 1 Conforama",android.R.color.holo_orange_light))

        val adapter = ClubsAdapter(this@MainActivity, listClubs)
        binding.viewPagerMain.adapter = adapter

    }
}




android viewpager2
 
 
 
 
android viewpager2
 
 
android viewpager2
 
 



Leave a Reply