Android Image Slider With Dot Indicator Example [Updated]

In this post, I am going to explain about creating Android Image Slider with Dot Indicator. 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. Dot indicator used to show the image sliders count and current displaying Image slider.

This is my Second post for this Image Slider with Dot Indicator. Please check out my First Android Image Slider with dot indicator using Gallery.

Let’s get started to develop the application for Image slider with dot Indicator. I am using AndroidImageSlider Library for this Example.

Android Image Slider With Dot Indicator
Android Image Slider With Dot Indicator

Step 1: Add dependency libraries

Add Image Slider Library to your app gradle.build file.

compile 'com.android.support:recyclerview-v7:26.1.0'
compile 'com.android.support:cardview-v7:26.1.0'
compile 'com.daimajia.slider:library:[email protected]'
compile 'com.nineoldandroids:library:2.4.0'
compile 'com.squareup.picasso:picasso:2.3.2'

Related: Android recyclerview material design with Example [Download]

Related: Cardview Android Material Design with Example [Download]


Step 2: Create Slider layout

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

<android.support.v4.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" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:scrollbars="none" />

    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

Step 3: Setup Image Slider

image slider

Add Slider Image And Title into the HashMap And Set it into the slider Layout. TextSliderView used to display Slider Image title at the bottom of the image slider.

sliderLayout = (SliderLayout) findViewById(R.id.sliderLayout);
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);

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);
}
sliderLayout.setPresetTransformer(SliderLayout.Transformer.Accordion);
sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
sliderLayout.setCustomAnimation(new DescriptionAnimation());
sliderLayout.setDuration(3000);
sliderLayout.addOnPageChangeListener(this);

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.

@Override
public void onSliderClick(BaseSliderView 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.

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

}

@Override
public void onPageSelected(int position) {

}

@Override
public void onPageScrollStateChanged(int state) {

}

That’s All Now the Android Image Slider with Dot Indicator is Ready to display. In the example Code, I have developed the Android Image Slider with Recyclerview. Please download the Example and try it.


Glide – Image loading framework for Android

Android Recyclerview Material Design


Screenshot

Image Slider with dot indicator

http:\\velmm.com\downloads\ImageSliderWithIndicatorExample.zip

Leave a Reply

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

Back to Top