Image Slider in Android with library [Easy and Fast Implementation]

How to make Image Slider in Android App

How to make image slider in android

Today, I am going to show you how you can make a decent image slider in your android app very easily without writing lots of code.

check this gif below for end result what we will be going to make.

is it look beautiful? To make this type of image slider or image carousel. Follow these simple step which is given below.

First, of course, you have to create a new project in android studio.

Choose an empty activity and then choose the app name and hit the finish button.

Wait for some time to build your project and after the build.

Move your images to your drawable folder.

here as you can see, I have move 3 images name img1, img2 and img3.

After this, now we have to add our dependency for image slider.

Add this dependency in your build.gradle(app) file

implementation 'com.synnapps:carouselview:0.1.5'

view raw build.gradle hosted with ❤ by GitHub

After adding the dependency hit the sync now button (top right corner).

Now go to the activity xml file.

Remove Textview from the xml file and also remove ConstraintLayout and add LinearLayout

Your file will look like this below.

Now it's time to add code for Image Slider.

Copy below code and paste it in LinearLayout.

	<com.synnapps.carouselview.CarouselView
	android:id="@+id/carouselView"
	android:layout_width="match_parent"
	android:layout_height="200dp"
	app:fillColor="#FFFFFFFF"
	app:pageColor="#00000000"
	app:radius="6dp"
	app:slideInterval="3000"
	app:strokeColor="#FF777777"
	app:strokeWidth="1dp"/>

view raw imageSlider.xml hosted with ❤ by GitHub

You can experiment with the attributes of Image Slider and go with which suits your requirements.

Your xml file now looks like this.

Now it's time to set Images to the Image Slider.

Go to your java activity file e.g MainActivity.java

Now add this code in your onCreate method.

	CarouselView carouselView = findViewById(R.id.carouselView);
	final int[] drawableImages = {R.drawable.img1, R.drawable.img2, R.drawable.img3};
	carouselView.setPageCount(drawableImages.length);
	carouselView.setImageListener(new ImageListener() {
	@Override
	public void setImageForPosition(int position, ImageView imageView) {
	imageView.setImageResource(drawableImages[position]);
	}
	});

view raw imageSlider.java hosted with ❤ by GitHub

Code Explanation:

first, we are getting the carousel view from xml by using the findViewById method.

then we store the reference of images in an integer array.

After that, we set how many image sliders will be there by specifying the image array length.

in the next line, we set the image listener which accept an interface and in the listener, we are getting the position of each slide

By using this position we are setting our image resource from array of images.

Now your whole file should look like this.

Now hit the run button and run your app in your device

Voila! Your nice beautiful image slider is ready to rock.

Customize your Image slide as per your need and make a beautiful mobile app.

So This comes to the end of a great tutorial. If you like this tutorial share it with your friends and mates. Thank You.