In this tutorial, I am going to teach you how to load an image from the internet or maybe from you server using Glide image library. I’ll also teach you how to create a good UI design like Instagram using Card View and Recycler View.

What is Glide image library?

Glide is a fast and efficient open source media management and image loading framework for Android OS. It can wrap media decoding, memory and disk caching, and resource pooling into a simple and easy to use interface.

Glide’s primary focus is on making scrolling any kind of a list of images as smooth and fast as possible, but Glide is also effective for almost any case where you need to fetch, resize, and display a remote image.

 

To use Glide Image Library, You need to add this dependency in your build.gradle.

And also add this permission in your AndroidManifest.xml. You’re images won’t show if you forget to include this uses-permission tag.

 

What are card views and recycler views?

Card views and recycler views are more efficient alternative widget for list views and custom views. You can use them to create complex lists and cards with material design styles in your apps such as elevation(drop shadow), corner radius and many more.  It also simplifies the display and handling of large data sets by providing layout managers and common animations.

 

In this tutorial, we’ll try to create an Instagram feed like app using Glide, card view and recycler view. The final output will look like this.

 

You can download all the icons that we’ll use in this link: icons

Open your Android Studio and create a new blank project. Create new classes just like what you see in the image below.

 

Open Feed.java then copy and paste the codes provided below. This will be the model for our recycler view items. Every feed in our list contains the user’s name, location, display image,  description of the photo and time stamp.

 

Now let’s create the layout for our card view. Create a new xml layout file and name it cardview_feed.xml.

Now you should have a layout that looks like in the image below.

 

Then open FeedAdapter.java and the following codes. I’ve put some comments so you can understand the codes below.

 

Now open your activity_main.xml and add a recycler view in your xml layout.

 

Then open MainActivity.java then add the following codes.

 

Now you can run and test you app if it is working. The final output of this tutorial should be like this.

 

If you’re having trouble reaching up to this point, then you can download the full source code here: Download Link