Android Glide Image Library – Building Image Gallery App

Loading an image from internet is pretty easier using Volley library. But here is a much better solution than volley i.e Glide image library. When compared to volley, Glide wins in lot of scenarios in terms of performance and usability. Below are the advantages of Glide over volley

> Supports fetching, decoding, and displaying video stills, images, and animated GIFs> Placeholder can be added before the loading the media> Loads thumbnail (blurred) first and then loads the high resolution image like in WhatsApp or Facebook.> Crossfading effects between the media> Supports image arbitrary transformations like loading image in circular shape or any other shape.> Better Memory and disk caching mechanisms> Works well with both Volley and OkHttp libraries

This article explains how to build a simple image gallery app where all the images will be loaded from internet. First all the thumbnail images displayed in a grid manner and upon selecting the single image, a fullscreen image slider will be launched.

Sample JSON

To build the gallery app, I have created a sample JSON which contains the image urls required. Each image is highly compressed and resized in three different resolutions i.e Higher, medium and smaller. For the grid display, we load the medium resolution image and for the fullscreen image slider, we load the higher resolution image.

Building Image Gallery App

1. Create a new project in Android Studio from File ⇒ New Project. When it prompts you to select the default activity, select Blank Activity and proceed.

2. Open build.gradle and add Glide, Volley and RecyclerView dependencies. Volley is used to download the gallery json by making HTTP call. RecyclerView is used to show the gallery images in a Grid fashion.

Hi there! I am Founder at androidhive and programming enthusiast. My skills includes Android, iOS, PHP, Ruby on Rails and lot more. If you have any idea that you would want me to develop? Let’s talk: ravi@androidhive.info

Download a jar file of Glide. Move it to the libs folder of your project app. (You can do this from the explorer). Then in Android Studio, Go to the Project panel in the left, then to that libs folder. Right click and then “Add as library”.

Afratul Kaoser

How can i set selected images as wallpaper? please help

Judie

here: 13. Open MainActivity.java and add the click event to recyclerView in onCreate() method. (This code is already provided in above step, just uncomment it)……

Judie

Here’s a mistake Error:(2) No resource identifier found for attribute ‘layout_behavior’ in package ‘com.my.asus.myglide’ in the content_main.xml app:layout_behavior=”@string/appbar_scrolling_view_behavior” who can tell me how to do

you did this. super.onMeasure(widthMeasureSpec, heightMeasureSpec);
instead of super.onMeasure(widthMeasureSpec, widthMeasureSpec); in SquareLayout Class

Kareem Hassan

welcome back Ravi and Congratulations for new style

Sahad

3. Create three packages named activity, adapter, app, model and helper and place your MainActivity.java under activity package. These packages helps in keeping your project organized.
How to make this step, i’m beginner

This is also a nice tutorial bro, would u give this ans plz? i completed the android basic level work, now i want to learn android advanced level how can i learn android advanced level? and Android Udacity android Courses are helpful or not for android developer ? please tell me, if u give me this ans it will help me plz, thank u

Hello. I use byethost to host my images. but when i am replacing “http://api.androidhive.info/json/glide.json” with “http://admingtrack.byethost18.com/glide/glide.json” it is not working .
The error is : “E/MainActivity: Error: org.json.JSONException: Value <script of type java.lang.String cannot be converted to JSONArray"

shivam pandey

Thanks ravi, for another great tutorial. I wanted to know how can I make a feature like when the user refresh the app then it should make the call to server for new content unless it should show images from the cache at least thumbnails. Thanks again

Great tutorial bro. I am having one issue though. Once a movie thumbnail is selected, the view pager adapter in SlideshowDialogFragment is unable to load the large image on fullscreen. I am using the same code. I even tried it with Picasso library but still same issue.

Is the image url you are loading is correct. Is it opening in browser?

Sage Pawan

Yes bro. I logged the image.getLarge(), it gives the url for large image which does open in the browser. And yet the glide is somehow not loading the image into full screen imageview. Just to ensure it is not device issue, I checked it in multiple emulator devices too. Still same.

Edit – I had hardcoded everything following your guide. So I might have missed something. I will double check through the code and debug again.

Great tutorial Ravi, i implemented this tutorial by replacing Glide with fresco library from facebook the performance still good, i would want to know which image library is better between Glide and Fresco,

Purushottam Kumar

Hello Ravi Nice one but i want add zoom in and zoom out in the lage image pls help me ASAP ; Thanks For this Nice example

Hi, its a very very nice post, i really like it. But i need just one favor can you please tell how to show loader.gif when there is no internet connection or any error image in imageview.

Thanks,

Amar Ilindra

Glide supports place holder. You can keep loader.gif in placeholder

Siddharth Vohra

‘add(android.media.Image)’ in ‘java.util.ArrayList’ cannot be applied to ‘(com.wordpress.connectwithsid.gliderealgallery.model.Image)’
getting this error

Muh Irzaq

hai ravi,
I can not make json php file. could you give me a php file ? please help mi

tamer

How to create the json file ?

regards

Rahul Pawar

HI RAVI ..
In MainActivity , inside fetchImages() , Image() is an abstract method.. It implements its methods wt should i do now .. and wt should i pass inside the image() implementation methods…

Thank u

ar ta

Hi Ravi
i follow your tutorial and it’s very useful. i wan’t add more load to Recyclerview and in every scroll fetch more image from server.i add some code to your project and it’s work for me but somtime when i scroll Recyclerview and quickly click on one of image the app is crashing and show me this error in logcat

Volley is capable of downloding json, text, and images which is great. Glide only does images and this is a problem because you would need to import two libraries because of the added space in the app. Glide is so fast I would just forget about the added space if I need to load a list of high quality images in RecyclerView.

Raja

Hi guys, I can’t call the methods from the Image.java on other classes. The class “Image” is never used. Any help? I am a beginner.

Vigraman Padmanaban

I want to say, just Thanks. You are Marvelous

ar ta

Hi Ravi
can you tell me how can i add Load more to Recyclerview on this Tutorial?

Gabriel

Dis a great app but am still new to Android devel

Fayaz aralikatti

Can someone help me add a download button(probably Fab) so that the image will be written as bitmap in storage!

Raverito Stone

Good tutorial, I have a question, as I do to the image zoom

Nagaraj N

I am getting compilation error in GallertAdapter that “cannot resolve getMedium()” in line image.getMedium().

I’m not sure I understand how to download the code. The button takes me to a login screen that I can’t seem to get past. Anyone want to help out with an email of the code? (Or how to successfully create an account to log in to?)

Kennedy Ndegwa

Hi Ravi
Can i get to use one image slider for many galleries instead of repeatedly creating a slider for every gallery… CCause am trying to use a switch case for my data and its not working

Syamsul

hi ravi
i try this in fragmentactivity but i find the problem in getSupportFragmentManager()
i use import android.app.Fragment;

my app run well ,but when i add interstitial ad or native ad …app run grid view .after click on grid view image comes with large view …after come interstitial ad its suddenly stop working ….

if anybody know how to solve this error :-

FATAL EXCEPTION: main
Process: com.example, PID: 12867
java.lang.RuntimeException: Parcel: unable to marshal value com.exaple.model.Image@220b8bf
at android.os.Parcel.writeValue(Parcel.java:1418)
at android.os.Parcel.writeList(Parcel.java:759)
at android.os.Parcel.writeValue(Parcel.java:1365)
at android.os.Parcel.writeArrayMapInternal(Parcel.java:686)
at android.os.BaseBundle.writeToParcelInner(BaseBundle.java:1330)
at android.os.Bundle.writeToParcel(Bundle.java:1079)
at android.os.Parcel.writeBundle(Parcel.java:711)
at android.support.v4.app.FragmentState.writeToParcel(Fragment.java:137)
at android.os.Parcel.writeTypedArray(Parcel.java:1254)
at android.support.v4.app.FragmentManagerState.writeToParcel(FragmentManager.java:385)
at android.os.Parcel.writeParcelable(Parcel.java:1437)
at android.os.Parcel.writeValue(Parcel.java:1343)
at android.os.Parcel.writeArrayMapInternal(Parcel.java:686)
at android.os.BaseBundle.writeToParcelInner(BaseBundle.java:1330)
at android.os.Bundle.writeToParcel(Bundle.java:1079)
at android.os.Parcel.writeBundle(Parcel.java:711)
at android.app.ActivityManagerProxy.activityStopped(ActivityManagerNative.java:3178)
at android.app.ActivityThread$StopInfo.run(ActivityThread.java:3438)
at android.os.Handler.handleCallback(Handler.java:746)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:148)
at android.app.ActivityThread.main(ActivityThread.java:5443)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:728)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:618)

Amit Raj

HI ravi …….
you have any gif loader realated code to show as a background in button??….
Thnks for help…….

xSkArx

Hi, iI downloaded the code and compile project, the first time I open the app, work it, but later dont work, show me blank home screen in mainactivity, logs are fine, why don’t work?

sorry bad english

Stefan

I believe you have to have internet connection each time you start up the activity with the pictures.

Ilson Gates

Where is the class image.java

dopetech

download the code(At the first) and then go to app>src> main>then search the class

doptech

Ravi tameda your code was very helpfull but my app is not able to launch the main activity–i even checked themanifest and the codes of all the class are perfect is there a way to contact you and show my program

…I hava an other request is it possible to set a download button to store the photo in phone
…Is it possible to have Make this app run on kitkat(From Kitkat and above)

And thanks for Introducing me to glide is there any other api which will help me to buffer online videos and save them on my device if the user wants

Is it possible to implement all these in a view pager like as a fragment

Please update this tutorial cause there are very less known tutorials of glide and these are one of the best(the Images classes in model package)

i wish you write me back soon as possible

Stefan

Dear Ravi,
Excellent tutorial! I was just wondering. You fetch the images with volley and then load them with Glide. The second time you turn up the same activity, are the images already cached with Glide and shown or are they fetched once again from the server and shown with Glide?
Regards,
Stefan

tanzid203

How do I can set the number of items in gallery recyclerView limited to 4? and make the last image with “+8 more photos” text across it (similar to the Facebook posts with multiple photos) ?

sandeep jaiswal

can u please help me out on instagram integration using volley…..

maryum

i want to display images of tourist places in gallery also their description. how to add name and description with each image? please help

You need to add a TextView to gallery_thumbnail.xml and set the image description in adapter class just like image.

Mario German Agudelo

Hello Ravi,

That good tutorial, thank you to share all your conocimento with us, I have the following question: I have hosted all information in a remote database, but not as I do to show in a contect json as you indicate in the tutorial, I’m driving with a json php fact, this is the code in php:

Hi, Ravi thanks for your explanation, I wanted to ask if you have any tutorial on how to make a chat, I appreciate the help you can give me.

Grek Martinez

Link Caido

bhavin makwana

hi,
my Glide Image Library working well ,thanks to ravi sir..my app goes well..
now i want to add detail text view( long text like one page of text ) under full image view like news app…
help me regarding this if any one have idea

Check the full screen image layout file where I have added the fullscreen image along with text. Use the code as reference.

bhavin makwana

I can add textview code in our -android project but How to add too much text in json..or any other way to carry text from server or
.Txt file…
???

akin

Hello ravi , Thank you very much for your tutorials, you practically taught me how to code android. For this tutorial , everything went well but the pictures are not inflating when clicked , I don’t know what went wrong

Do you have class named Image.java? If not, find that class in downloaded folder.

Jun Jie

@ravi8x:disqus i can’t download the folder , need help TT

Jun Jie

@ravi8x:disqus

Yash Agrawal

sir, what if we have to download a huge set of images like 500 images each of 4kb-5kb ,then while downloading those images using glide how can i keep track of indivisual image cache and use by its name afterwards as per use but not putting all of them in some imageview which glide does as default?
Purpose being when user opens app images should be downloaded without being accessible in gallery but only in app itself,so how can i do this? Your response will really help. Thank You !

@Ravi Tamada ,Please review ,if possible .

Morteza Moradi

hi, ravi , thanks for this
i have a problem !
i want to set endless (lazyload) for this recyclerview but i cant , how can do this??
thanks

Jun Jie

hey bro , do you have the downloaded code file? can you forward to me please. cause i can;t download the file after tried a few time . This is my hotmail.junjie19950602@hotmail.com

what (where) is a code(above code) from full image image view to come back (click back) to thumb image view…plz let me know…otherwise all work well …i develop my app with this code and all going well …thanks to ravi sir…

kyle

How do i parse flickr api JSON? I checked out your parsing tutorial and i dont see how it relates to flickr sir.

kyle

How do i parse flickr api JSON? I checked out your parsing tutorial and i dont see how it relates to flickr sir. I search everywhere how to intergrate flickr api into android but in all of them it seems that pretty much all of your code i will need to change. please help. All i want to do is display flickr images into gridview 🙁

lol you seem to think im familiar with coding. but im not, i havent the sligthtest clue how to code, but i am planning to take computer science at uni to learn. To make me stand out at uni i want to build a simple app. So instead of trying to parse…i copied flickers static urls into your JSON code and replaced your urls with them. Now for my final question, how do i make the JSON images dowloadable so users when they click on an image are able to download it. thanks .

i want to attach interstitial ads when user back press from full image view to small grid image view …
plz help me where to put interstitial code ….if anybody have knowledge guide me …i will appreciate ur help

Prashant Rathore

not opening full preview on image click?
why?
no error

Juan Rodriguez Martinez

Hi It’s because that part of code is commented, you need to uncomment in the MainActivity

yogi puranik

Ravi sir can u show me u r porject structure bcz i dnt know how to create package i m new in android. i m little bit confusing to create a packages

b101

Hello Ravi,

everything worked fine, your very appreciated! I have one question tho, I want my Images to be opened inside the DialogFragment but I do NOT want the possibility to switch between the Images while the DialogFragment is open. So I basically I would have to exit the DialogFragment in order to see another detailed view of an Image. I want to omit the swiping, if that makes any sense.

hmm sorry, but I can’t really seem to find it. Could you give me a hint?

b101

I got it thanks, @ravi8x:disqus ! Do you know where I can get a tutorial for a RecyclerView with clickable buttons inside every Row/Item, whereas the buttons have Faceboook Share/Like functions ? Your Tutorial covers most part and I already implemented the click functions and can differentiate between the buttons clicked but the facebook implementation is not working yet.

@ravi8x:disqus sir, what if we have to download a huge set of images like 500 images ,then while downloading those images using glide how can i keep track of individual image cache and use by its name afterwards as per use but not putting all of them in some imageview which glide does as default?
I tried this with your Http cache image tutorial but it is working a little slow than Glide. Your response will really help. Thank You !

bhavin makwana

what (where) is a code(above code) from full image image view to come back (click back) to thumb image view…plz let me know…otherwise all work well …i develop my app with this code and all going well …thanks to ravi sir…

bhavin makwana

any one know regarding this knowledge plz share ….i need it urgent ….i have to add interstitial ads on back click …plz guys help…

To come from full image view to thumbnail view you don’t need code. That can be done by touching back button on device.

bhavin makwana

ya our project working well but i want to put interstitial ads on back button (from full image view to thumbnail view) so i m finding this code …where to put interstitial ads code so its come when back click …

Oh ok. You need to override onBackPressed method which will be invoked when back key is pressed. You can show the ad in that function and call finish() in adClosed method.

bhavin makwana

in our code onBackPressed in main activity ….n it works for go outside of app….but how to put between full image view to thumbnail view bcz when i put override onBackPressed method to SlideshowDialogFragment.java …its come error that “method does not override method from its superclass “

diego

Add a button to the fragment_image_slider, next to the lbl_count.

Then from the fragment do this inside the click listener.
if (prev != null) {
DialogFragment df = (DialogFragment) prev;
df.dismiss();
}

That’s it.

Manisha Khatke

how can we give the grid padding between images??

shashi patil

write method in activity

Rakesh Gopalakrishnan

I am looking to save the image on the current page of the viewpager to sdcard. I have tried numerous things like adding a button to image_fullscreen_preview.xml and an onclicklistener in onCreateView method of Slideshow fragment. However, when i save the image, it’s nothing but a blank image. I tried saving the content of image_preview in image_fullscreen_preview.xml. Do I have to do it in instantiateItem? The button doesn’t seem to respond when i add it there? Where am I going wrong? Can anyone help or provide a snippet? I have searched for hours now and couldn’t find anything on SO.
Any help appreciated. Thanks.

Kyle

Hello sir, how can I add a favourite button, so that when a user clicks on it the image will be saved in a new activity ?

Ben Carson

When I install this apk on my phone it dosent show up on the app menu. How do i fix this?

Is the smaller image compression really necessary. I plan to host my images on amazon S3 servers and it will cost me money to host the images. If i upload numerous images say 100, it will have to make 3 different resolutions making the image count 300. Is it safe for me to remove the smaller image compression to reduce the cost of image hosting? because it dosent seem like it is used in your example.

The smaller image is necessary to make the app faster and consume less memory. If you load all the grid images in high resolution, the app might crash with out of memory error. Also downloading high resolution images takes long time depending on internet speed.

Rakesh Punjabi

Thanks. Its fine I’ve sorted out the bandwidth issue. My app will be just fine.

Hello i get this error” android.graphics.drawable.RippleDrawable’, referenced from method android.support.v7.widget.AppCompatImageHelper.hasOverlappingRendering”. How i fix it?. I am using Android 6.0
Thanks for the atetion

I used Glide image lib. but still i am getting out of memory error. or Fatal signal 6 (SIGABRT) at 0x000023e2 (code=-6), thread 9186 (rm.android.test) error on scroll of list view of images. please reply.

Hello, Ravi!
Why did you use a DialogFragment instead of Fragment? What are the benefits of using DialogFragment in this case?
Thanks.

itsaseven

Hello @ravi8x:disqus! Please, can you give me a tip: how to get Bitmap from fullscreen image slider? Certainly yours, Alex.

bharat

facing problem in squrelayout

bharat

android.view.InflateException

Ajay

hello Ravi,
can you help me my question is that, how to download file from server and display all download files in separate activity

prashant godhani

Don’t able to download code here in model package image.class is missing so provide download link..

Paperwrk Labs

The App opens normally but nothing shows on the screen I get this message
Before Android 4.1, method int android.support.v7.widget.ListViewCompat.lookForSelectablePosition(int, boolean) would have incorrectly overridden the package-private method in android.widget.List

bluetoro

can i implement this to fetch images from sdcard?

Nicky N

yah

Aravindhan Gs

i got image from server and shown in viewpager i want to download current image which is in imageview…there is any way??

Gokul Raj Sgr

Thanks a Lot for your lessons. Can you tell how to pick an GIF image from Gallery using Intents?

Dhruv Gupta

awesome tutorial sir ..thanx alot!!

Yogesh Nandha

i want to add progress bar before loading large image .
How to do it ?

Himanshu Gangwar

Hey Ravi,
Thanks for this project.
I found a lot of your projects helpful… 🙂

Hey Ravi,
I want to extend this idea to handle audio and video too. Can you provide me with suggestions.
Thanks in andvance.

Nicky N

i think you just can do the same way, unless you have a specific idea in mind

Kristina Kaiser

To all experts: How can i access the image from the fullscreen and share it? :/

Sahil Khan Rao

for share add permissions

Supply Logistucs Solutions

I probably missed it, but I couldn’t get it to work until I added internet permission to my manifest. See the line below:

adel

Hi Ravi
Thanks for this great tutorial.

how can we use Indian font for name of movies instead of english?!?!?!

many thanks man

Shiva

Can i use Glide Image library for free in my Gallery App? What is the licence? Please tell me,

Machtal Nuar

I try to retrieve image from my Firebase and it’s work, but the image title can’t change after I swipe it. Can you guys help me to show where is from above code which do that function(function to change title while swipe) ?Please help me 🙁

Tamil Arasu

how can i set default image while retriving image path doesnt have image file

Bobby

@ravi8x:disqus

How can I hide/dismiss the DialogFragment when the user clicks anywhere on the screen?

@ravi8x:disqus The code is not giving any error, but when i am running it on my real device the app gets crash. Is it because of fetchImage() method is calling in main thread i.e in main activity rather than in doInBackground() ?

Ramji Seetharaman

@fazeelzama:disqus – Change the endpoint to https:// and it should work

kavie

Hi,

Please check this,

After Implementing recyclerView.addOnItemTouchListener() in MainActivity.

1.Scrolling is not working for recyclerView.If i scroll immediately,Dialog fragment will open
2.If I click on recyclerView ,All Images are showing in Dialog Fragment,If I click on back button it is not working properly.
3.Image are not showing as you shown in demo (Screenshot is added here)

You have used particular urls for showing images on glide,I want to know that how to do it with the help of cloudinary or firebase cloud like I have uploaded 1000 wallpapers now I don’t want to make an array of 1000 urls so how can I load all the images like a wallpaper app does without making an array of 1000 links .

Are you seeing any errors in LogCat? Is the click event added to RecyclerView?

Prakash

how to create a json file ? i dont have anyone i use Firebase as server.

Prakash

java.lang.NullPointerException: Attempt to invoke virtual method ‘void jawstudio.studiorj.AppController.addToRequestQueue(com.android.volley.Request)’ on a null object reference
i get this error please help me!

Hello sir i had an one error from this file while import :-
Error:Failed to find target with hash string ‘Google Inc.:Google APIs:23’ in: C:UsersAdminAppDataLocalAndroidSdk

Kutluhan Ozan Köse

Dear Ravi,
Thank you for tutorial. I have 2 recyclerview in one activity and they both have Image slide parsed with volley and from two different URL’s. My first glide does not response while second glide works properly. I checked first volley by turning my ımageview to textview and I saw that Json parsed properly. So I determined the problem origined by the glide. Why it can be you think?