Auto Image Slider in Android

Auto Image Slider is one of the most seen UI components in Android. This type of slider is mostly seen inside the apps of big E-commerce sites such as Flipkart, Amazon, and many more. Auto Image Slider is used to represent data in the form of slides that changes after a specific interval of time.

In this article, you will learn how to create your nested Auto Image Example of nested Auto Image​ in Android. So let’s take example of nested AutoImage activity codes  in Android of Mobile application.  

 Example of nested AutoImage

                                                 

 Add below Dependencies  

 implementation(group = "com.github.Fuadafdhal", name = "Auto-Image-Slider", version = "1.0")

       

Step-by-Step Im​plementation 

​Step 1: Create a New Project in Android ​studio (File >new  project).  


Step 2: Create an main_activity.xml file in your layout folder . path (res>layout) 
Implement the same in​voke the following code inside main_activity.xml file.  
 <?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity3">

    <com.afdhal_fa.imageslider.ImageSlider
        android:id="@+id/imageSlide"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        app:iss_auto_cycle="true"
        app:iss_delay="0"
        app:iss_period="1000"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 </androidx.constraintlayout.widget.ConstraintLayout>
Step 3: Create an MainActivity.kt file in your layout folder 

Implement the same in​voke the following code inside MainActivity.kt file.  

 import android.os.Bundle
 import androidx.activity.enableEdgeToEdge
 import androidx.appcompat.app.AppCompatActivity
 import com.afdhal_fa.imageslider.model.SlideUIModel

 class MainActivity3 : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(R.layout.activity_main4)
        val imageSlide = findViewById<com.afdhal_fa.imageslider.ImageSlider>(
            R.id.imageSlide
        )
        val imageList = ArrayList<SlideUIModel>()
        imageList.add(SlideUIModel("https://images.pexels.com/photos/929778/pexels-photo-929778.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260", "Blackpink - Jennie"))
        imageList.add(SlideUIModel("https://images.pexels.com/photos/747964/pexels-photo-747964.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260", "Blackpink - Lisa"))
        imageList.add(SlideUIModel("https://images.pexels.com/photos/929778/pexels-photo-929778.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260", "Blackpink - Jennie"))
        imageList.add(SlideUIModel("https://images.pexels.com/photos/747964/pexels-photo-747964.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260", "Blackpink - Lisa"))
        imageSlide.setImageList(imageList)
    }
 }

Step 4 : Output of above example.

                                              

Happy coding!

365Bloggy July 24, 2024
Share this post
Tags
SUBSCRIBE THIS FORM

Subscribe Thanks

Recent Posts
How to add a Snackbar in Android
0 1211
Zoom In and Out to TextView in Android
0 412
How to underline text in textview
0 341
Shine Effect in Android
0 291
How to Create Marquee Text in Android?
0 262
Our blogs
Archive