Add viewPager in kotlin android

View pager Let us or users slide pages on a single screen (activity). it gives to contain multiple pages in a single activity.

In this tutorial, I am using fragments because if there will need to handle some programs can be managed easily in fragments like, handling clicks, showing list and more this

After Sliding a little

Can we show viewPager without fragment?

Yes, you can but you need to manage it or it may be troubleshooting for you. For more information visit this link: https://stackoverflow.com/questions/18710561/can-i-use-view-pager-with-views-not-with-fragments

Let’s understand what is the need for showing it

For adding viewPager in our app we need four things

1. ViewPager attribute in XML file

2. ViewPagerAdapter in the activity (MainActivity.kt or AnotherActivity.kt file)

3. Fragments, how much you want to show (pages) or add in viewPager

4. Adding ViewPager on ViewPagerAdapter

Let’s see codding

1. ViewPager attribute in XML file

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

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/myViewpager"
            android:layout_width="match_parent"
            android:layout_height="600dp"/>

    </RelativeLayout>
    </ScrollView>

</RelativeLayout>

2 & 4. ViewPagerAdapter in Activity and adding adapter on viewPager

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentPagerAdapter
import androidx.viewpager.widget.ViewPager

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

        val viewPager = findViewById<ViewPager>(R.id.myViewpager)
// Adding adapter on viewpager
        val myAdapter = ViewPagerAdapter(supportFragmentManager)
// adding Fragments in adapter
        myAdapter.addFragment(TeachersFragment(), "Teachers")
        myAdapter.addFragment(StudentsFragment(), "Students")

        viewPager.adapter  = myAdapter
    }
// creating adapter for ViewPager
    class ViewPagerAdapter(fragment: FragmentManager) : FragmentPagerAdapter(fragment){
        private var fragmentList: MutableList<Fragment> = ArrayList()
        private var titleList : MutableList<String> = ArrayList()

        override fun getCount(): Int {
            return fragmentList.size
        }

        override fun getItem(position: Int): Fragment {
            return fragmentList[position]
        }

        fun addFragment(fragment: Fragment, title: String){
            fragmentList.add(fragment)
            titleList.add(title)
        }

        override fun getPageTitle(position: Int): CharSequence? {
            return titleList[position]
        }
    }
}

3. Fragments in this article I am adding two fragments. You can add more

For crating fragments:

From this way you can create a fragment

TeachersFragments.kt

import android.content.Intent
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Button


class TeachersFragment : Fragment() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val rowView = inflater.inflate(R.layout.fragment_teachers, container, false)
        val btnViewPager = rowView.findViewById<Button>(R.id.button_forViewPager)
        btnViewPager.setOnClickListener {
            val intent = Intent(activity, ViewPagerActivity::class.java)
            startActivity(intent)
        }
        return rowView
    }
}// it's layuot is bellow

fragment_teachers.xml (layout ). // add color code by yourself

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TeachersFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Slide Left to right"
        android:textColor="@color/purple_700"
        android:textSize="22sp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="50dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Teachers"
        android:layout_gravity="center"
        android:textSize="22sp"/>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/button_forViewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View Pager"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:layout_gravity="bottom"
        android:layout_marginLeft="150dp"
        android:layout_marginBottom="50dp"/>

</FrameLayout>

StudentsFragment.kt

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class StudentsFragment : Fragment() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        val rowView = inflater.inflate(R.layout.fragment_students, container, false)
        return rowView
    }
} // it's layout is bellow

fragment_students.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".StudentsFragment"
    android:background="@color/purple_700">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Slide right to left"
        android:textColor="@color/white"
        android:textSize="22sp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="50dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Students"
        android:layout_gravity="center"
        android:textColor="@color/white"
        android:textSize="22sp"/>

</FrameLayout>

That’s all for this tutorial,

It’s working smoothly .you can try these codes.✔✔✔

source code: https://gitlab.com/sudishkumar/viewpager-app-android-kotlin/-/tree/master/app/src/main

I hope you are enjoying it. Thank🙏🙏🙏 you a lot for reading this article.