This tutorial will guide you to implement Image Slider functionality in your project through a simple library. We will complete this tutorial using following some steps.

Step1- Introuduction

An Image Slider is an android feature in which we can slide and show multiple images on device screen one by one, we arrange images into sequences. Images can slide automatic at regular interval time or can be manually by user slide on next and previous touches.

This tutorial explains, how to slide multiple images with animation in android.

Step2- Download AndroidImageSlider Library

First, we need to download the AndroidImageSlider library from a following URL.

https://www.dropbox.com/s/41dw9mw7puo58g9/library.zip?dl=0

Step3- Adding library in the project

Next, add a library to your project, unzip the file into your project's directory and now add the following line into project's settings.gradle file.

include ':app',':library'

Step4- Adding Library in the dependencies

To compile a library, we need to add a library in project's build.gradle file as the dependency.

Step-5 Creating Layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.imagesliderdemo.MainActivity"
    tools:showIn="@layout/activity_main">

    <com.daimajia.slider.library.SliderLayout
        android:id="@+id/slider"
        android:layout_width="match_parent"
        custom:pager_animation="Accordion"
        custom:auto_cycle="true"
        custom:indicator_visibility="visible"
        custom:pager_animation_span="1100"
        android:layout_height="200dp"/>
</RelativeLayout>

Step6- Implement listener to MainActivity.java file

/**
 * When you want to make your own slider view, you must implements from BaseSliderView and ViewPagerEx class.
 */
public class MainActivity extends AppCompatActivity
                          implements BaseSliderView.OnSliderClickListener,
                                     ViewPagerEx.OnPageChangeListener{
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
    }
 
    @Override
    public void onSliderClick(BaseSliderView slider) {
        Toast.makeText(this,slider.getBundle().get("extra") + "",Toast.LENGTH_SHORT).show();
    }
 
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}
 
    @Override
    public void onPageSelected(int position) {
        Log.e("Slider Demo", "Page Changed: " + position);
    }
 
    @Override
    public void onPageScrollStateChanged(int state) {}
}

Step7- Initialize the Id of SliderLayout in onCreate() method
 

private SliderLayout imageSlider;
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageSlider = (SliderLayout)findViewById(R.id.slider);

    }

Step8- Creating HashMap

We will use HashMap to store image list.

private SliderLayout imageSlider;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageSlider = (SliderLayout)findViewById(R.id.slider);


        // creating HashMap
        HashMap<String,String> image_maps = new HashMap<String, String>();
        image_maps.put("Hannibal","http://static2.hypable.com/wp-content/uploads/2013/12/hannibal-season-2-release-date.jpg");
        image_maps.put("Big Bang Theory","http://tvfiles.alphacoders.com/100/hdclearart-10.png");
        image_maps.put("House of Cards", "http://cdn3.nflximg.net/images/3093/2043093.jpg");
        image_maps.put("Game of Thrones", "http://images.boomsbeat.com/data/images/full/19640/game-of-thrones-season-4-jpg.jpg");

}

Step9- Adding the TextSliderView in SliderLayout

private SliderLayout imageSlider;
 
   @Override
   protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    imageSlider = (SliderLayout)findViewById(R.id.slider);  // initialize the id of SliderLayout
 
    // creating HashMap
    HashMap<String,String> image_maps = new HashMap<String, String>();
     image_maps.put("Hannibal",
           "http://static2.hypable.com/wp-content/uploads/2013/12/hannibal-season-2-release-date.jpg");
     image_maps.put("Big Bang Theory",
           "http://tvfiles.alphacoders.com/100/hdclearart-10.png");
     image_maps.put("House of Cards",
           "http://cdn3.nflximg.net/images/3093/2043093.jpg");
     image_maps.put("Game of Thrones",
           "http://images.boomsbeat.com/data/images/full/19640/game-of-thrones-season-4-jpg.jpg");

 
      for(String name : image_maps.keySet()){
            TextSliderView textSliderView = new TextSliderView(this);
            // initialize a SliderLayout
            textSliderView
                    .description(name)
                    .image(image_maps.get(name))
                    .setScaleType(BaseSliderView.ScaleType.Fit)
                    .setOnSliderClickListener(this);
 
            //add your extra information
            textSliderView.bundle(new Bundle());
            textSliderView.getBundle()
                    .putString("extra",name);
 
            imageSlider.addSlider(textSliderView);
        }
 
    }

Step10- Adding Animation Type to sliding view
 

Add following line of code just after for each loop in onCreate() method       

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

@Override protected void onStop() {
 // To prevent a memory leak on rotation, make sure to call stopAutoCycle() on the slider // before activity or fragment is destroyed

 imageSlider.stopAutoCycle(); 
super.onStop(); 
}