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 .
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.
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.
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 :
Click here to download Android Multiple Auto Image Slider Example Tutorial using Online URL project with source code.
Related Posts
Store/Save ImageView image in Gallery in android programmatically
Add Pinch Zoom MultiTouch Effect on ImageView in Android
Android Save Download Image from WebView on Long Press Image Tutorial
Create website Visitor Hit Click Pageviews counter in PHP script example tutorial
Android ImageSwitcher Animation Slideshow Widget Example Tutorial
Get/Pick image from gallery in android programmatically
Android Select Image from Gallery Upload to Server example tutorial using JSON
Android AutoFit Text Resize-Scale Within Bounds Example Tutorial
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.
Thank You Sir
Your Tutorial Are very helping me to learning android application development.
Thanks once again.
Welcome Vittu.
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
You have to update to newer version and if it still shows you the same error then mail me your project on [email protected] . I will check your project by myself.
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);
Thank you soo much sir.
Welcome Taha
How can I remove the slider animation? Thank you so much
you cannot remove animation here .
Is there any way to slide the images only manually instead of swiping them automatically ? Thank you
I already fixed it using sliderLayout.stopAutoCycle();
Now, I would like to order of photos in slider, is that possible? Thanks
What do you mean by order of photos please explain .
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.
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); ‘.
thank you so much for your help
i was trying to code this from 2 days
you are genious
Welcome Siddhesh.
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); ‘.
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)
JUST use the image url same as you have use to open that image in web browser.
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.
Then you need to parse that json ans set that JSon as URL in here.
Is it possible to display text in other color?
No priyanka .
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.
sanju send your code on my mail : [email protected]
hi. thanks. its working fine now. But now Im trying to implement it in a different activity. the problem here is that , the json that im parsing is now a JSONArray. ex: { cars:[1,2,3,4]}
As you can see, 1,2,3,4 are values to which “cars” is the only key. So is it ok to assume that hashmap wont work here? if not hash map, How can we implement this using array list? Thanks in advance
Just insert image path in array list then convert array list into hashmap Sanju.
i tried switch cases inside for loop. it worked. Thanks for the response. please consider adding pinch to zoom functionality
read my this tutorial this would help you : https://www.android-examples.com/add-pinch-zoom-multitouch-effect-imageview-android/
thanks!
help me please
Yes Harlan ? Ask
working perfectly but i want to add this in above cardview how can i do that?
Just create a card view and put that view inside the cardview.
it is working perfectly but if i add this xml in another xml the view is not showing
I have problem with slider style
‘Failed to find style ‘SliderStyle’ in current theme. fix the style referance
Osamah just download and import the project.
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.
It is working in Activity class but not in fragment. It is coming blank.
works perfectly.
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?
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?
Ok thanks for mentioning this issue , i am going the check all the code .
thankyou.. Actually i urgently need to fix this issue but failed in doing so..
How to image zoom ?
Dinesh read my this tutorial to zoom the image https://www.android-examples.com/add-pinch-zoom-multitouch-effect-imageview-android/
How can I pass authentication token to the server to get image using this library?
Bipin please explain your question more briefly ?
Sir could you please tell me how to load image dynamically in above code
Ashok images is already calling using dynamic method .
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.
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.
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…
Rosy then just define the slide layout code inside the navigation drawer.
Sir i have a byte[] ….. how can i use your slider , i cannot use graphics.Drawble or bitmap ……
Hello….How do i set a default image until the image is being loaded
For that ruby you need to read this plugin documentation .
I cleared that….thank u…..now i want to change the image when ever the image is being changed from same url
Ruby the images will automatically changed when the URL is changed .
Thanks for finally talking about >Android Multiple Auto Image Slider Example Tutorial
using Online URL – Android Examples <Loved it!
sir,how to handle image click events in the slide show…??
i want to open different urls for different image clicks..!!