Android Multiple Auto Image Slider Example Tutorial using Online URL

How to create image slider gallery with indicators left to right animation with multiple images.

Automatic image slider gallery with swipeable image view looks awesome on android mobile screen and gives a quick overview of your application by showing multiple images one by one. Displaying images on screen is the easiest way to describe your app so its user can know what your application actually used for. Now here comes the most important part after finding a lot on internet finally i have found an GitHub library named as AndroidImageSlider with such an amazing functionality which gives its user to create image slider with both static and dynamic images and here dynamic images means you can describe the image URL into HashMap and it will automatically parse them and set into image slider. So here is the complete step by step tutorial for Android Multiple Auto Image Slider Example Tutorial using Online URL .

android-project-download-code-button

Watch Live App Preview :

Note :  Please follow the below steps very carefully in order to AndroidImageSlider library in your android application project :

1. Open your project’s build.gradle ( Module : app ) file.

build-gradle-app

2. Please add below code inside your build.gradle ( Module : app ) file.

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

3. Screenshot of build.gradle ( Module : app ) file after adding above code.

image-slider-library

Here your go friends….Now We are going start coding

Please add Internet permission and READ_EXTERNAL_STORAGE permission to your AndroidManifest.xml file.

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

<uses-permission android:name="android.permission.INTERNET" />

Android Multiple Auto Image Slider Example Tutorial using Online URL.

Code for MainActivity.java file.

package com.android_examples.autoimageslider_android_examplescom;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
import com.daimajia.slider.library.Animations.DescriptionAnimation;
import com.daimajia.slider.library.SliderLayout;
import com.daimajia.slider.library.SliderTypes.BaseSliderView;
import com.daimajia.slider.library.SliderTypes.TextSliderView;
import com.daimajia.slider.library.Tricks.ViewPagerEx;
import java.util.HashMap;

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

    SliderLayout sliderLayout;
    HashMap<String,String> Hash_file_maps ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        Hash_file_maps = new HashMap<String, String>();

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

        Hash_file_maps.put("Android CupCake", "http://androidblog.esy.es/images/cupcake-1.png");
        Hash_file_maps.put("Android Donut", "http://androidblog.esy.es/images/donut-2.png");
        Hash_file_maps.put("Android Eclair", "http://androidblog.esy.es/images/eclair-3.png");
        Hash_file_maps.put("Android Froyo", "http://androidblog.esy.es/images/froyo-4.png");
        Hash_file_maps.put("Android GingerBread", "http://androidblog.esy.es/images/gingerbread-5.png");

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

            TextSliderView textSliderView = new TextSliderView(MainActivity.this);
            textSliderView
                    .description(name)
                    .image(Hash_file_maps.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);
    }
    @Override
    protected void onStop() {

        sliderLayout.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.d("Slider Demo", "Page Changed: " + position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {}
}

Code for activity_main.xml layout file.

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.android_examples.autoimageslider_android_examplescom.MainActivity">


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

</RelativeLayout>

Code for AndroidManifest.xml file.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.android_examples.autoimageslider_android_examplescom">

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Screenshots :

Android Multiple Auto Image Slider Example Tutorial using Online URL

android-auto-image-slider-2

Click here to download Android Multiple Auto Image Slider Example Tutorial using Online URL project with source code.

72 Comments

  1. Sir how and where you add photo online. I want to replace photo with other photo can you please help me.

    • Yes Vittu you can find images URL in my post all you have to do is remove the old URL’s and place your image URL at their place.

  2. Thank You Sir
    Your Tutorial Are very helping me to learning android application development.
    Thanks once again.

  3. in my project it says can not create baseslider,viewpagerEx inshort it is not able to import the required classes for above compatibility please tell me what is the problem

    • Vips try again with new project and make sure when you have add the libraries into build.gradle ( Module : app ) your internet connection is start because it will download the whole libraries online.

      • ok i will try again thanks

      • whenever i try to add those dependencies in my gradle it says that it should not use appcombat version 24 because this projects compile version is 23 so i decided to go with the older version and there are no errors in the code but when i try to run it the app crashes while opening the activity which contains this slider so could it be a reason that i did not update to version 24 ,the app is not working and if yes than how to solve it thanks

  4. Sir in your tutorial you are pushing images using url. How can i push images in android studio using drawable driectory.

    • Taha all you have to do is change the HashMap 2nd argument as integer . Than you can use R.drawable.image_name instead the place of URL . like this :

      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);

  5. How can I remove the slider animation? Thank you so much

  6. Hi, to be more clear, how can order Photos in the slider? I would like to display in the same order of Array. Thank u so much

    • Dave i am really unable to understand your query here do you want to display images from array or drawable resource .

      • Hi, the slider shows the images in a random order but I would like to parse them into the slider in the same order as the HashMap list ->eg: 1. cupcake image. 2. donut .3 éclair and so on..
        Hash_file_maps.put(“Android CupCake”, “http://androidblog.esy.es/images/cupcake-1.png”);
        Hash_file_maps.put(“Android Donut”, “http://androidblog.esy.es/images/donut-2.png”);
        Hash_file_maps.put(“Android Eclair”, “http://androidblog.esy.es/images/eclair-3.png”);
        Hash_file_maps.put(“Android Froyo”, “http://androidblog.esy.es/images/froyo-4.png”);
        Hash_file_maps.put(“Android GingerBread”, “http://androidblog.esy.es/images/gingerbread-5.png”);

        Thank you so much, 🙂

        • There is a sequence of image slider here is- 4 – 5 – 3 – 1 – 2 here . So you can set images accourding to this sequence.

  7. I tried to implement this inside a fragment. But as soon as i run the app, it crashes and gives java.lang.NullPointerException error in the line
    ‘ sliderLayout.addSlider(textSliderView); ‘.

  8. thank you so much for your help
    i was trying to code this from 2 days
    you are genious

  9. I tried to implement this inside a fragment. But as soon as i run the app, it crashes and gives java.lang.NullPointerException error in the line
    ‘ sliderLayout.addSlider(textSliderView); ‘.

  10. Thank You Sir
    Your Tutorial Are very helping to us your code working for me but i want changes
    how to add your image path Hash_file_maps.put(“Android CupCake”, “http://androidblog.esy.es/images/cupcake-1.png”) replace by FirebaseStorage Image Path (gs://………appspot.com/photos/donut-2.png)

  11. Great tutorial. Very helpful.
    Please I want to load the images from an array(JSON). How can I implement that because I don’t want a definite number of images.

    Thanks once more.

  12. Is it possible to display text in other color?

  13. hi. worked for me. I have got an API from which I got to download the images and corresponding title. So I called the asyncTask and used gson to get the json. now there are multiple jsonObjects. How to add the String which contains name and image urls to hash_key_map?

    String jsonStr = sh.makeServiceCall(URL);
    Gson gson = new Gson();

    if (jsonStr != null) {
    try {
    // Locate the array name in JSON
    JSONArray jsonArray = new JSONArray(jsonStr);
    for (int i = 0; i < jsonArray.length(); i++) {
    JSONObject finalItem = jsonArray.getJSONObject(i);
    Response modelObject1 = gson.fromJson(finalItem.toString(), Response.class);
    Hash_file_maps.put(modelObject1.getTitle(), modelObject1.getImage());

    }

    here Hash fileMap value is not displaying in the imageslider
    would be great if i can get some help.

  14. working perfectly but i want to add this in above cardview how can i do that?

  15. it is working perfectly but if i add this xml in another xml the view is not showing

  16. I have problem with slider style
    ‘Failed to find style ‘SliderStyle’ in current theme. fix the style referance

  17. Sir, it’s a amazing slider tutorial. I have a question, when I used com.daimajia.slider.library.SliderLayout and TextView on the same activity, the TextView’s attribute: android:ellipsize=”marquee”….But the TextView cannot scroll, how can I fix it? Thank you very much.

  18. It is working in Activity class but not in fragment. It is coming blank.

  19. works perfectly.

  20. Well explained Juned Mughal, Thank you for your this amazing tutorial. Works Fine and one query is that how to remove the text and black background behind the text in the slider?

  21. Thankyou 🙂
    i have implemented it, it works fine but only Landscape Images are displayed, potrait Images are not displaying in slider.. is there any method for this?

  22. How can I pass authentication token to the server to get image using this library?

  23. Sir could you please tell me how to load image dynamically in above code

  24. Hi This lib. is nice . But i want to remove bottom show layout also page indicator only show image. so what will have to do ……

    • Udayvir please visit the library official page on Github you will sure find all the modification methods there.

  25. How to edit backgeoundsize, I mean setScyleType like in ImageView

    • Kabir just set android:layout_width=”fill_parent and android:layout_height=”320dp” attributes as the size you want.

  26. very informative… thank u.. actually i want to display this slider inside the mainactivity layout incase of navigation drawer activity… how to processed???
    plz help…

  27. Sir i have a byte[] ….. how can i use your slider , i cannot use graphics.Drawble or bitmap ……

  28. Hello….How do i set a default image until the image is being loaded

  29. Thanks for finally talking about >Android Multiple Auto Image Slider Example Tutorial
    using Online URL – Android Examples <Loved it!

  30. sir,how to handle image click events in the slide show…??
    i want to open different urls for different image clicks..!!

Leave a Reply

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