Make an Image Carousel in Android Studio and Kotlin using ViewPager

In this tutorial, I'm going to show you how to create an image slider in Android Studio and Kotlin and ViewPager, for this tutorial, we will create a simple photo swipe app like in Tinder so let's begin

first, add the dependencies 

first, we need to add the design library to our project

just copy and paste this line in your Gradle.app 

implementation 'com.android.support:design:28.0.0'

now let's create the layout of the app
layout_main.xml

<?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">

    <LinearLayout

        android:id="@+id/linear"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        app:layout_constraintTop_toTopOf="parent"

        android:gravity="center"

        android:orientation="horizontal"

        >

        <TextView

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:textAlignment="center"

            android:text="Your Acount"

            android:layout_marginVertical="12dp"

            android:textSize="32sp"

            />

    </LinearLayout>

    <androidx.viewpager.widget.ViewPager

        android:layout_marginVertical="20dp"

        android:foregroundGravity="center"

        android:layout_width="match_parent"

        android:layout_height="450dp"

        app:layout_constraintTop_toBottomOf="@id/linear"

        android:id="@+id/pager"

        />

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal"

        app:layout_constraintTop_toBottomOf="@id/pager"

        android:gravity="center"

        android:padding="20dp"

        >

        <com.google.android.material.floatingactionbutton.FloatingActionButton

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:id="@+id/cancel_btn"

            android:src="@drawable/ic_clear_black_24dp"

            app:fabSize="auto"

            android:clickable="true"

            android:backgroundTint="#fff"

            android:layout_marginVertical="20dp"

            />

        <com.google.android.material.floatingactionbutton.FloatingActionButton

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:id="@+id/fav_btn"

            android:src="@drawable/ic_star_black_24dp"

            android:layout_marginHorizontal="20dp"

            app:fabSize="auto"

            android:clickable="true"

            android:backgroundTint="#fff"

            android:layout_marginVertical="20dp"

            />

        <com.google.android.material.floatingactionbutton.FloatingActionButton

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:id="@+id/match_btn"

            android:src="@drawable/ic_favorite_black_24dp"

            app:fabSize="auto"

            android:clickable="true"

            android:backgroundTint="#fff"

            android:layout_marginVertical="20dp"

            />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

now let's create the item for our carousel cards
item.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    xmlns:app="http://schemas.android.com/apk/res-auto">

            <ImageView

                android:id="@+id/simpleimg"

                android:layout_width="match_parent"

                android:layout_height="match_parent"

                android:src="@drawable/img1"

                app:layout_constraintEnd_toEndOf="parent"

                app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

now create the pager adapter class, I'll call it Adapter
Adapter.kt

package tn.doctorcode.swiper

import android.content.Context

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

import android.widget.ImageView

import androidx.viewpager.widget.PagerAdapter

public class Adapter(var list: List<Int>, var ctx: Context) : PagerAdapter() {

    private lateinit var ImgList:List<Int>

    lateinit var layoutInflater:LayoutInflater

    lateinit var context:Context

    override fun getCount(): Int {

        return list.size

    }

    override fun isViewFromObject(view: View, `object`: Any): Boolean {

        return view.equals(`object`)

    }

    override fun instantiateItem(container: ViewGroup, position: Int): Any {

        layoutInflater = LayoutInflater.from(ctx)

        var view = layoutInflater.inflate(R.layout.item,container,false)

        val img = view.findViewById<ImageView>(R.id.simpleimg)

        img.setImageResource(list[position])

        container.addView(view,0)

        return view

    }

    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {

        container.removeView(`object` as View)

    }

}

now let's implement the method

package tn.doctorcode.tutorial

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        var imgs = listOf<Int>(R.drawable.img1,R.drawable.img2,R.drawable.img3)

        var adapter = Adapter(imgs,this)

        pager.adapter = adapter

    }

}

and that's it, now don't forget to add some images and call it whatever you want, for my example I added 3 images and call them img1,2 and 3
also, I added some vector images using android studio, it's simple to do that, just go to drawable>new>vector assets and add these icons

• clear icon
• star icon
• fav icon