Image Slider in Android
Android Image Slider Example with ViewPager and Kotlin. Learn fragments, menus, services, and more with tutorials on rrtutors.com. Start building today!
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
