Auto Image Slider In Android

Introduction

In this article, we are going to learn how to create an auto image slider in Android. First, we need to add a dependency in our gradle folder. Then, we have to design our layout files. We will use sliderview in the auto image slider example. The working of sliderview is the same as that of recyclerview.

Prerequisites:

• The latest version of the android studio
• Basic knowledge of recyclerview.
• Basic knowledge of Java 

Let's start with the implementation.

Step 1

Create a new project in Android studio and select an empty activity.

 

Click on the finish button.

Step 2

Go to build Gradle(Module) and add the following dependency:

implementation 'com.github.smarteist:autoimageslider:1.4.0'

Step 3

Go to activity_main.xml and add the following code:

activity_main.xml

<?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"
    android:orientation="horizontal"
    tools:context=".MainActivity">
    
    <com.google.android.material.card.MaterialCardView
        app:cardCornerRadius="15dp"
        android:layout_margin="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.smarteist.autoimageslider.SliderView
            android:id="@+id/imageSlider"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            app:sliderAnimationDuration="600"
            app:sliderAutoCycleDirection="right"
            app:sliderAutoCycleEnabled="true"
            app:sliderIndicatorAnimationDuration="600"
            app:sliderIndicatorGravity="center_horizontal|bottom"
            app:sliderIndicatorMargin="15dp"
            app:sliderIndicatorOrientation="horizontal"
            app:sliderIndicatorPadding="3dp"
            app:sliderIndicatorRadius="2dp"
            app:sliderIndicatorSelectedColor="#5A5A5A"
            app:sliderIndicatorUnselectedColor="#FFF"
            app:sliderScrollTimeInSec="1"
            app:sliderStartAutoCycle="true" />

    </com.google.android.material.card.MaterialCardView>


</LinearLayout>

Explanation

Here we took a linear layout with a horizontal orientation and a material cardview inside this linear layout. Then, we took a sliderview inside this material cardview. We defined sliderview attributes such as duration, direction, height, slider id, indicator color, indicator radius, etc.

Step 4

Create a new layout resource file. 

slider_item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout

    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/bg_overlay"
        android:layout_alignParentBottom="true">

        <TextView
            android:id="@+id/textdescription"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Product Images"
            android:textColor="@color/white"
            android:gravity="center"
            android:paddingBottom="15dp"
            android:textStyle="bold"
            android:textSize="22sp"/>

    </RelativeLayout>

</RelativeLayout>

Explanation
When we use recyclerview then we need a custom_item_layout. The same build concept is applied here. Here we create slider_item_layout and define the component that is required. We take an imageview and textview in this layout.

Step 4

Create a new drawable resource file inside the drawable folder. 

bg_overlay.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
    android:startColor="@android:color/tab_indicator_text"
    android:endColor="@android:color/transparent"
    android:angle="90"/>
</shape>

Explanation

This xml file is used to set the background color of the relative layout, which is defined in slider_item_layout.xml.

Step 5

Now we need the images that we want to show on our slider. I am using five images. You need to download some images as your requirement and paste all images into a drawable folder.

 

Here I took five images to illustrate the concept.

Step 6

Create an adapter class inside the Java folder.

SliderAdapterExample.java

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import com.smarteist.autoimageslider.SliderViewAdapter;

public class SliderAdapterExample extends SliderViewAdapter<SliderAdapterExample.SliderViewHolder>{
    private int images[];
    private String text[];
    public SliderAdapterExample(int[] images, String[] text) {
        this.images = images;
        this.text = text;
    }
    @Override
    public SliderViewHolder onCreateViewHolder(ViewGroup parent) {
        View view=LayoutInflater.from(parent.getContext()).inflate(R.layout.slider_item_layout,null);
        return new SliderViewHolder(view);
    }
    @Override
    public void onBindViewHolder(SliderViewHolder viewHolder, int position) {
        viewHolder.imageView.setImageResource(images[position]);
        viewHolder.textView.setText(text[position]);
    }
    @Override
    public int getCount() {
        return images.length;
    }
    public class SliderViewHolder extends ViewHolder {
        private  ImageView imageView;
        private TextView textView;
        public SliderViewHolder(View itemView) {
            super(itemView);
          imageView=itemView.findViewById(R.id.image);
          textView=itemView.findViewById(R.id.textdescription);
        }
    }
}

Explanation

Here we created two arrays that receive data from mainactivity.java when the constructor is called. Inside the onCreateViewHolder() method, we inflate slider_item_layout. Inside the onBindViewHolder() method, we set the image using the viewholder. SliderAdapterExample extends the SliderViewHolder class. Inside the SliderViewHolder class, we need to find the component that is defined in slider_item_layout. 

Step 7

Go to MainActivity.java and add the following code.

MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import com.smarteist.autoimageslider.IndicatorView.animation.type.IndicatorAnimationType;
import com.smarteist.autoimageslider.SliderAnimations;
import com.smarteist.autoimageslider.SliderView;

public class MainActivity extends AppCompatActivity {

    private  int images[];
    private  String text[];
    private SliderAdapterExample adapter;
    private SliderView sliderView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        sliderView=findViewById(R.id.imageSlider);
        images= new int[]{R.drawable.apple, R.drawable.guava, R.drawable.grapes, R.drawable.pineapple, R.drawable.kiwi};
        text=new String[]{"Apple","Guava","Grapes","Pineapple","Kiwi"};
        adapter=new SliderAdapterExample(images,text);
        sliderView.setSliderAdapter(adapter);
        sliderView.setSliderTransformAnimation(SliderAnimations.SIMPLETRANSFORMATION);
        sliderView.setIndicatorAnimation(IndicatorAnimationType.SLIDE);
        sliderView.startAutoCycle();
    }
}

Explanation

Here, we create two arrays that are used for images and text. Images array is used to find the ID of images that are present in the drawable folder. Text array is used to store the name of the images, with this name visible in the sliderview. Now we create an adapter class object and sliderview object. Inside the onCreate() method, we initialize these objects. We call the adaptor class from here, and pass the images and text to the adapter class.

Step 7

Press the run button and launch the application.

Output

 

Conclusion

In this article, we have seen how to create an image slider in android studio. I hope you enjoyed this article, and if you have any suggestions/queries please leave a comment in the comment section. Thanks for reading this article.

You can read my other articles by clicking here.