Android image slider with indicator example

In this post, I am going to explain about creating Android Image Slider with Indicator. Automatic Image Slider is very useful to highlight the important items at the top of the screen.

With the help of a slider, We can able to show many sliders at the top of the screen. Image Slider indicator used to show the image sliders count and current displaying Image slider.

Automatic image slider have a option to slide image slider automatically without any action.

Android image slider demo

In this android image slider example, I am using AndroidImageSlider Library. With this, You can easily load images from an internet URL, drawable, or file. And there are many kinds of amazing animations you can choose. 

Lets, getting started into create android image slider with indicator example.

Adding image slider dependency

Add ImageSliderLibrary, Recyclerview, Cardview and  Material design dependencies.

Also, using Picasso library to load image slider images.

To know more about Cardview , Recyerview please check in my another post.

implementation 'com.daimajia.slider:library:1.1.5@aar'
implementation 'com.nineoldandroids:library:2.4.0'
implementation 'com.squareup.picasso:picasso:2.3.2'
implementation 'com.google.android.material:material:1.1.0'

Create Image Slider layout

In your activity_main.xml add sliderLayout inside the NestedScrollView to make the image slider scrollable.

<androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="none">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:focusableInTouchMode="true"
            android:orientation="vertical">

            <com.daimajia.slider.library.SliderLayout
                android:id="@+id/sliderLayout"
                android:layout_width="fill_parent"
                android:layout_height="250dp" />

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recyclerview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                tools:listitem="@layout/recyclarview_adapter"
                android:scrollbars="none" />

Setup Slider with indicator

Image Slider

1. Prepare data for automatic image slider

Add Slider Image And Title into the HashMap And Set it into the slider Layout.

sliderImages = new HashMap<>();
sliderImages.put("Great Indian Deal", R.drawable.amazon_1);
sliderImages.put("New Deal Every Hour",R.drawable.snapdeal_1);
sliderImages.put("Appliances Sale", R.drawable.amazon_2);
sliderImages.put("UnBox snapdeal",R.drawable.snapdeal_2);
sliderImages.put("Great Deals", R.drawable.amazon_3);

2. Add Image Slider with data

TextSliderView used to display Slider Image, and the title at the bottom of the image slider.

TextSliderView Methods

description() – To set the Description for the Slider Image.

image() – Set the Slider Image.

setScaleType() – Set ScaleType for the Image.

setOnSliderClickListener() – Set Click Listener for the Image Slider.

By using, the prepared data create TextSliderView. and then add it into sliderLayout.

for (String name : sliderImages.keySet()) {

    TextSliderView textSliderView = new TextSliderView(this);
    textSliderView
            .description(name)
            .image(sliderImages.get(name))
            .setScaleType(BaseSliderView.ScaleType.Fit)
            .setOnSliderClickListener(this);
    textSliderView.bundle(new Bundle());
    textSliderView.getBundle()
            .putString("extra", name);
    sliderLayout.addSlider(textSliderView);
}

3. slider layout configuration

Already, we set the slider into sliderLayout. Now, we are adding indicator and animation configuration to the android image slider.

Slider Layout Methods

setPresetIndicator() – Used to set the Position for the Dot Indicator.

setCustomAnimation() – Set the Animation for the Image Slider.

setDuration() – used to set the Image Sliding interval.

addOnPageChangeListener() – Provide the callback method for the Image Slider changes.

Also, SliderLayout having the interface for the callback on click and slider image indicator changes.

@Override
public void onSliderClick(BaseSliderView slider) {

}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {

}

@Override
public void onPageScrollStateChanged(int state) {

}

code for the slider Layout configuration,

sliderLayout.setPresetTransformer(SliderLayout.Transformer.Accordion);
sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
sliderLayout.setCustomAnimation(new DescriptionAnimation());
sliderLayout.setDuration(3000);
sliderLayout.addOnPageChangeListener(this);

we are done with the android image slider example. Please download the example from github.

Conclusion

Thank you for the reading.  Please try this and let me know your feedback in the comments.

Leave a Reply

Your email address will not be published. Required fields are marked *