Image Slider in Android

In this post we are  implementing an Image Slider in Android below a transparent toolbar using Kotlin.

For this example we are using Viewpager widget.

Android ViewPager introduced in API version 21 is a layout manager that allows the user to flip left and right through pages of data

Let's get Started

Step 1: Create Android Project with kotlin enabled

Step 2: Add required recourses 

For this example l have downloaded few images from internet and added in the drawable folder.

Update Style.xml file

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>
<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>


Step 3: Create slider image layout

<?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:orientation="vertical"
                                                   android:layout_width="match_parent"
                                                   android:layout_height="match_parent">

    <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent" tools:srcCompat="@tools:sample/avatars"
            android:id="@+id/imageView_slide" app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" android:scaleType="fitXY"/>
</androidx.constraintlayout.widget.ConstraintLayout>

 

Step 4: Create Slider Adapter class

package com.rrtutors.androidsamples.slider

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.viewpager.widget.PagerAdapter
import androidx.viewpager.widget.ViewPager
import com.rrtutors.androidsamples.R
import kotlinx.android.synthetic.main.slider_layout.view.*

class SliderAdapter(val context:Context) : PagerAdapter() {
    val images=arrayOf(R.drawable.corona_4,R.drawable.coronavirus_2,R.drawable.coronavirus_3)

    private var inflater: LayoutInflater? = null

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

        return view === `object`
    }


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

        inflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        val view = inflater!!.inflate(R.layout.slider_layout, null)
        view.imageView_slide.setImageResource(images[position])

        val vp = container as ViewPager
        vp.addView(view, 0)
        return view
    }

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

        val vp = container as ViewPager
        val view = `object` as View
        vp.removeView(view)
    }

    override fun getCount(): Int {
        return images?.size!!;
    }
}

 

Step 5: Update Activity and its xml file with below code

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

    <com.google.android.material.appbar.AppBarLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:theme="@style/AppTheme.AppBarOverlay">

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

            <androidx.viewpager.widget.ViewPager android:layout_width="match_parent"
                                                 android:layout_height="match_parent"

                                                 android:id="@+id/viewpager">
            </androidx.viewpager.widget.ViewPager>


            <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:layout_gravity="top"
                    android:background="@android:color/transparent"
                    app:popupTheme="@style/AppTheme.PopupOverlay"/>

        </FrameLayout>

    </com.google.android.material.appbar.AppBarLayout>




</LinearLayout>

 

package com.rrtutors.androidsamples.slider

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import androidx.appcompat.app.ActionBarDrawerToggle
import androidx.appcompat.widget.Toolbar
import androidx.core.view.GravityCompat
import androidx.drawerlayout.widget.DrawerLayout
import com.google.android.material.floatingactionbutton.FloatingActionButton
import com.google.android.material.navigation.NavigationView
import com.google.android.material.snackbar.Snackbar
import com.rrtutors.androidsamples.R
import kotlinx.android.synthetic.main.activity_image_slider.*

class ImageSlider : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_image_slider)
        val toolbar: Toolbar = findViewById(R.id.toolbar)
        setSupportActionBar(toolbar)


        imageSliderImplementation()


    }

    private fun imageSliderImplementation() {

        val adapter = SliderAdapter(this)
        viewpager.adapter = adapter


    }

}

 

Step 6: Let's run application

Image Slider Android

 

Image-Slider-Android