Android

Creating a Banner-Style Image Slider Using ViewPager in Android

In this tutorial, you will learn how to create an Android application that implements a banner-like sliding image effect from left to right using ViewPager. ViewPager is a powerful component in Android that facilitates the creation of image sliders, carousels, or banner views by allowing seamless swiping between different fragments or views.
Submitted on July 07, 2024

To create an Android app that implements a banner-like sliding image effect from left to right using ViewPager, you can follow these steps. ViewPager is commonly used for implementing image sliders or banner views in Android applications. Here's how you can achieve this in Kotlin:

Step-by-Step Implementation:

1. Create a New Android Project

Open Android Studio and create a new project with an Empty Activity template.

2. Add ViewPager and ImageView to activity_main.xml

Open res/layout/activity_main.xml and add a ViewPager and ImageView that will display the sliding images.

Copy Code


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

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_centerInParent="true"/>

</RelativeLayout>

3. Create ViewPager Adapter:

Create a new Kotlin file named ImagePagerAdapter.kt for the ViewPager adapter.

Copy Code


package com.example.slidingimagebanner

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

class ImagePagerAdapter(private val context: Context, private val imageList: List<Int>) : PagerAdapter() {

    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        val imageView = ImageView(context)
        imageView.setImageResource(imageList[position])
        imageView.scaleType = ImageView.ScaleType.CENTER_CROP
        container.addView(imageView)
        return imageView
    }

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

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

    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        container.removeView(`object` as ImageView)
    }
}

Implement MainActivity.kt

Open MainActivity.kt and implement the logic to set up the ViewPager with images.

Copy Code


package com.example.slidingimagebanner

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.viewpager.widget.ViewPager

class MainActivity : AppCompatActivity {

    private lateinit var viewPager: ViewPager
    private lateinit var imageList: List<Int>

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

        viewPager = findViewById(R.id.viewPager)
        imageList = listOf(
            R.drawable.image1,
            R.drawable.image2,
            R.drawable.image3
        )

        val adapter = ImagePagerAdapter(this, imageList)
        viewPager.adapter = adapter
    }
}

Explanation:

activity_main.xml:
- Contains a ViewPager (viewPager) that will display the sliding images.
ImagePagerAdapter.kt:
- Adapter for the ViewPager that inflates image views (ImageView) with images from the imageList.
MainActivity.kt:
- onCreate():
  - Initializes viewPager and imageList.
  - Sets up viewPager with ImagePagerAdapter to display the sliding images (image1, image2, image3).

Testing:

Run the app on an emulator or a physical device.
Observe the ViewPager (viewPager) displaying the images (image1, image2, image3) in a sliding manner from left to right.

This implementation demonstrates how to create a simple image slider/banner view using ViewPager in an Android app using Kotlin. You can customize the images (image1, image2, image3) and adjust the layout or appearance based on your specific requirements or additional features needed in your app, such as adding indicators or implementing automatic sliding.