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.