This tutorial explains, how to slide multiple image with animation in Android Appliaction using AndroidImageSlider Library

Introduction

An Image Slider is used to show a series of images on the screen one by one. Sliding through the images can be automatic at regular intervals or manually respond to user interaction like swipe to view next or previous slides. In this tutorial, we will expalin how to create multiple image slider with animation in Android Application using AndroidImageSlider library. We will load images from Server or drawable directory.






Download AndroidImageSlider Library & Adding library in the project

Click here to download AndroidImageSlider library. Unzip the downloaded file into the project’s directory. Now open your settings.gradle file and include the directory name of the library.

include ':app',':library'

Adding library in the Dependencies

To compile the AndroidImageSlider library, we need to add the library in the app’s dependencies. Open the app’s build.gradle file. Add the project in the dependencies. It will compile the library at run time.

dependencies {
    compile project(':library')
}

Creating Slider

To create image slider, we will use com.daimajia.slider.library.SliderLayout tag.

<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" />

Implements Sliderclicklistner and PageChangeListener

To display slider, we need to implement the BaseSliderView.OnSliderClickListener and ViewPagerEx.OnPageChangeListener in Activity Class. These Listener used to call the following methods :

  • onSliderClick() method is used when we want our components to react on user’s click over Image Slider.
  • onPageScrolled() method is used to handle scrolling, either automatic or user initiated touch scroll
  • onPageSelected() method is used, when a new image is selected
  • onPageScrollStateChanged() method handles the scenario where the scroll state changes.
public class MainActivity extends AppCompatActivity 
      implements BaseSliderView.OnSliderClickListener, 
                       ViewPagerEx.OnPageChangeListener{

    private SliderLayout imageSlider;
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageSlider = (SliderLayout)findViewById(R.id.slider);
    }
    @Override
    protected void onStop() {
        // make sure to call stopAutoCycle() on the slider before activity 
       or fragment is destroyed
        imageSlider.stopAutoCycle();
        super.onStop();
    }

    @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) {}

}

Adding HashMap & TextSliderView in SliderLayout

To store image list, we need to use HashMap. If we want to load image from server side then we have to use HashMap<String, String> and we wan to load image from drawable directory then we have to use HashMap<String,Integer>. Also add TextSliderView in the SliderLayout via addSlider() method. The TextSliderView stores the information about image such as its description, image url, scale or some more other information.

public class MainActivity extends AppCompatActivity 
          implements BaseSliderView.OnSliderClickListener, 
                              ViewPagerEx.OnPageChangeListener{

    private SliderLayout imageSlider;

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

        HashMap<String,String> url_maps = new HashMap<String, String>();
        url_maps.put("Hannibal", "https://www.studytutorial.in/wp-content/uploads/
                                                2017/06/facebook_login_with_php-min.jpg");
        url_maps.put("Big Bang Theory", "https://www.studytutorial.in/
                                      wp-content/uploads/2016/02/maxresdefault-2.jpg");
        url_maps.put("House of Cards", "https://www.studytutorial.in
                                  /wp-content/uploads/2016/10/multiseries_bar_chart.jpg");
        url_maps.put("Game of Thrones", "https://www.studytutorial.in/
                                wp-content/uploads/2017/04/studytutorial-logo.png");

        HashMap<String,Integer> file_maps = new HashMap<String, Integer>();
//        file_maps.put("Hannibal",R.drawable.hannibal);
//        file_maps.put("Big Bang Theory",R.drawable.bigbang);
//        file_maps.put("House of Cards",R.drawable.house);
//        file_maps.put("Game of Thrones", R.drawable.game_of_thrones);

        for(String name : url_maps.keySet()){
            TextSliderView textSliderView = new TextSliderView(this);
            // initialize a SliderLayout
            textSliderView
                    .description(name)
                    .image(url_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);
        }
    }
}

Adding Animation

We can add the Sliding animation via setPresetTransformer() method. We can also set the Sliding Indicator via setPresetIndicator() method and set the auto sliding image duration via setDuration() method.
This Library supports the following animation:

  • Accordion : Images appears like the bellows of an accordion.
  • Background2Foreground : First removes the background, then displays next image.
  • CubeIn : Removes the current image in cubic format.
  • DepthPage : Displays the image just below the current image.
  • Fade : First the current image disappears, then displays the next image.
  • FlipHorizontal : Flips the image horizontally.
  • FlipPage : Removes the current image by sliding it to left and displays image from left to right.
  • Foreground2Background : Displays the next image and then removes current image from background.
  • RotateDown : Removes the current image by rotating it downwards.
  • RotateUp : Removes the current image by rotating it upwards.
  • Stack : Gives illusion that all images are stacked over one another and displays the next image by removing the current image from top.
  • Tablet : Removal of current image looks like that next one is pushing it to the left side of screen.
  • ZoomIn : Hides current image by zooming it out and shows the next image by zooming it in.
  • ZoomOut : Opposite of ZoomIn
  • ZoomOutSlide : Current image zoom outs and slides to the left.
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageSlider = (SliderLayout)findViewById(R.id.slider);

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

        HashMap<String,Integer> file_maps = new HashMap<String, Integer>();
//        file_maps.put("Hannibal",R.drawable.hannibal);
//        file_maps.put("Big Bang Theory",R.drawable.bigbang);
//        file_maps.put("House of Cards",R.drawable.house);
//        file_maps.put("Game of Thrones", R.drawable.game_of_thrones);

        for(String name : url_maps.keySet()){
            TextSliderView textSliderView = new TextSliderView(this);
            // initialize a SliderLayout
            textSliderView
                    .description(name)
                    .image(url_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);
        }
        imageSlider.setPresetTransformer(SliderLayout.Transformer.Accordion);
        imageSlider.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
        imageSlider.setCustomAnimation(new DescriptionAnimation());
        imageSlider.setDuration(2000);
        imageSlider.addOnPageChangeListener(this);


    }