Trending Articles       10 Flutter Listview Examples       Flutter Custom Button Example       Flutter Audio Recording       Flutter 2.0 Autocomplete TextField       Current Location Google Maps

Image Slider in Android

Published April 05, 2020

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="https://schemas.android.com/apk/res/android"
                                                   xmlns:app="https://schemas.android.com/apk/res-auto"
                                                   xmlns:tools="https://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="https://schemas.android.com/apk/res/android"
        xmlns:app="https://schemas.android.com/apk/res-auto"
        xmlns:tools="https://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


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

724 Views

Flutter Questions

Android Questions

© 2021 RRTutors . All Rights Reserved.