Auto Image Slider In Android

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

<?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>

<?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>

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.