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.

android-working-with-glide-image-library

How to Use It?

Integrating Glide in your project is very easy. First add the glide dependency to your build.gradle.

dependencies {
    // glide
    compile 'com.github.bumptech.glide:glide:3.7.0'
}

Second load the image into ImageView using below code snippet.

String imgUrl = "https://api.androidhive.info/images/glide/medium/deadpool.jpg";

ImageView imageView = (ImageView) view.findViewById(R.id.thumbnail);

Glide.with(mContext).load(imgUrl)
                .thumbnail(0.5f)
                .crossFade()
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .into(imageView);

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.

JSON link: https://api.androidhive.info/json/glide.json

[{
	"name": "Deadpool",
	"url": {
		"small": "https://api.androidhive.info/images/glide/small/deadpool.jpg",
		"medium": "https://api.androidhive.info/images/glide/medium/deadpool.jpg",
		"large": "https://api.androidhive.info/images/glide/large/deadpool.jpg"
	},
	"timestamp": "February 12, 2016"
},
{
	"name": "Batman vs Superman",
	"url": {
		"small": "https://api.androidhive.info/images/glide/small/bvs.png",
		"medium": "https://api.androidhive.info/images/glide/medium/bvs.png",
		"large": "https://api.androidhive.info/images/glide/large/bvs.png"
	},
	"timestamp": "March 25, 2016"
}]

Now let’s start building the image gallery app.

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.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.2.1'
    compile 'com.android.support:design:23.2.1'
    compile 'com.android.support:support-v4:23.2.1'

    // RecyclerView
    compile 'com.android.support:recyclerview-v7:23.1.1'

    // volley
    compile 'com.android.volley:volley:1.0.0'

    // Glide
    compile 'com.github.bumptech.glide:glide:3.7.0'
}

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.

4. Create a class named AppController.java under app package. This is a singleton class in which we initialize the volley’s core objects.

package info.androidhive.glide.app;

import android.app.Application;
import android.text.TextUtils;

import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.toolbox.Volley;

public class AppController extends Application {

    public static final String TAG = AppController.class
            .getSimpleName();

    private RequestQueue mRequestQueue;

    private static AppController mInstance;

    @Override
    public void onCreate() {
        super.onCreate();
        mInstance = this;
    }

    public static synchronized AppController getInstance() {
        return mInstance;
    }

    public RequestQueue getRequestQueue() {
        if (mRequestQueue == null) {
            mRequestQueue = Volley.newRequestQueue(getApplicationContext());
        }

        return mRequestQueue;
    }

    public <T> void addToRequestQueue(Request<T> req, String tag) {
        // set the default tag if tag is empty
        req.setTag(TextUtils.isEmpty(tag) ? TAG : tag);
        getRequestQueue().add(req);
    }

    public <T> void addToRequestQueue(Request<T> req) {
        req.setTag(TAG);
        getRequestQueue().add(req);
    }

    public void cancelPendingRequests(Object tag) {
        if (mRequestQueue != null) {
            mRequestQueue.cancelAll(tag);
        }
    }
}

5. Open AndroidManifest.xml and add the AppController to <application> tag. Also add the INTERNET permission as we need to make HTTP calls.

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

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

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

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

</manifest>

Now our project is ready with all the dependencies added. Let’s start adding the grid gallery first.

Adding the Grid Gallery View

6. Open the layout files of your main activity and add the recyclerView. For my main activity I have two layout files activity_main.xml and content_main.xml

The activity_main.xml contains the general AppBar and Toolbar.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".activity.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

</android.support.design.widget.CoordinatorLayout>

The content_main.xml contains the recyclerView to load the images in grid.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="info.androidhive.glide.activity.MainActivity"
    tools:showIn="@layout/activity_main">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="vertical" />

</RelativeLayout>

7. Under helper package, create a class named SquareLayout.java. This class helps the images to display in square ratio in grid view.

package info.androidhive.glide.helper;

import android.annotation.TargetApi;
import android.content.Context;
import android.os.Build;
import android.util.AttributeSet;
import android.widget.RelativeLayout;

/**
 * Created by Lincoln on 05/04/16.
 */
class SquareLayout extends RelativeLayout {

    public SquareLayout(Context context) {
        super(context);
    }

    public SquareLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SquareLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public SquareLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // Set a square layout.
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
    }
}

8. Under res β‡’ layout, create a layout named gallery_thumbnail.xml. This layout contains an ImageView to display the thumbnail image in gallery view.

9. Under adapter package, create a class named GalleryAdapter.java This is a adapter class which inflates the gallery_thumbnail.xml and renders the images in recyclerView.

package info.androidhive.glide.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.GestureDetector;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.load.engine.DiskCacheStrategy;

import java.util.List;

import info.androidhive.glide.R;
import info.androidhive.glide.model.Image;

/**
 * Created by Lincoln on 31/03/16.
 */

public class GalleryAdapter extends RecyclerView.Adapter<GalleryAdapter.MyViewHolder> {

    private List<Image> images;
    private Context mContext;

    public class MyViewHolder extends RecyclerView.ViewHolder {
        public ImageView thumbnail;

        public MyViewHolder(View view) {
            super(view);
            thumbnail = (ImageView) view.findViewById(R.id.thumbnail);
        }
    }


    public GalleryAdapter(Context context, List<Image> images) {
        mContext = context;
        this.images = images;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.gallery_thumbnail, parent, false);

        return new MyViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        Image image = images.get(position);

        Glide.with(mContext).load(image.getMedium())
                .thumbnail(0.5f)
                .crossFade()
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .into(holder.thumbnail);
    }

    @Override
    public int getItemCount() {
        return images.size();
    }

    public interface ClickListener {
        void onClick(View view, int position);

        void onLongClick(View view, int position);
    }

    public static class RecyclerTouchListener implements RecyclerView.OnItemTouchListener {

        private GestureDetector gestureDetector;
        private GalleryAdapter.ClickListener clickListener;

        public RecyclerTouchListener(Context context, final RecyclerView recyclerView, final GalleryAdapter.ClickListener clickListener) {
            this.clickListener = clickListener;
            gestureDetector = new GestureDetector(context, new GestureDetector.SimpleOnGestureListener() {
                @Override
                public boolean onSingleTapUp(MotionEvent e) {
                    return true;
                }

                @Override
                public void onLongPress(MotionEvent e) {
                    View child = recyclerView.findChildViewUnder(e.getX(), e.getY());
                    if (child != null && clickListener != null) {
                        clickListener.onLongClick(child, recyclerView.getChildPosition(child));
                    }
                }
            });
        }

        @Override
        public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {

            View child = rv.findChildViewUnder(e.getX(), e.getY());
            if (child != null && clickListener != null && gestureDetector.onTouchEvent(e)) {
                clickListener.onClick(child, rv.getChildPosition(child));
            }
            return false;
        }

        @Override
        public void onTouchEvent(RecyclerView rv, MotionEvent e) {
        }

        @Override
        public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {

        }
    }
}

10. Finally open MainActivity.java and do the below changes

> Download the json by making volley http request. fetchImages() method is used for this purpose

> Parse the json and add the models to array list.

> Pass the array list to recyclerView’s adapter class.

package info.androidhive.glide.activity;

import android.app.ProgressDialog;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.util.Log;

import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.JsonArrayRequest;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.util.ArrayList;

import info.androidhive.glide.R;
import info.androidhive.glide.adapter.GalleryAdapter;
import info.androidhive.glide.app.AppController;
import info.androidhive.glide.model.Image;

public class MainActivity extends AppCompatActivity {

    private String TAG = MainActivity.class.getSimpleName();
    private static final String endpoint = "https://api.androidhive.info/json/glide.json";
    private ArrayList<Image> images;
    private ProgressDialog pDialog;
    private GalleryAdapter mAdapter;
    private RecyclerView recyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        recyclerView = (RecyclerView) findViewById(R.id.recycler_view);

        pDialog = new ProgressDialog(this);
        images = new ArrayList<>();
        mAdapter = new GalleryAdapter(getApplicationContext(), images);

        RecyclerView.LayoutManager mLayoutManager = new GridLayoutManager(getApplicationContext(), 2);
        recyclerView.setLayoutManager(mLayoutManager);
        recyclerView.setItemAnimator(new DefaultItemAnimator());
        recyclerView.setAdapter(mAdapter);

        /* recyclerView.addOnItemTouchListener(new GalleryAdapter.RecyclerTouchListener(getApplicationContext(), recyclerView, new GalleryAdapter.ClickListener() {
            @Override
            public void onClick(View view, int position) {
                Bundle bundle = new Bundle();
                bundle.putSerializable("images", images);
                bundle.putInt("position", position);

                FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
                SlideshowDialogFragment newFragment = SlideshowDialogFragment.newInstance();
                newFragment.setArguments(bundle);
                newFragment.show(ft, "slideshow");
            }

            @Override
            public void onLongClick(View view, int position) {

            }
        }));*/

        fetchImages();
    }

    private void fetchImages() {

        pDialog.setMessage("Downloading json...");
        pDialog.show();

        JsonArrayRequest req = new JsonArrayRequest(endpoint,
                new Response.Listener<JSONArray>() {
                    @Override
                    public void onResponse(JSONArray response) {
                        Log.d(TAG, response.toString());
                        pDialog.hide();

                        images.clear();
                        for (int i = 0; i < response.length(); i++) {
                            try {
                                JSONObject object = response.getJSONObject(i);
                                Image image = new Image();
                                image.setName(object.getString("name"));

                                JSONObject url = object.getJSONObject("url");
                                image.setSmall(url.getString("small"));
                                image.setMedium(url.getString("medium"));
                                image.setLarge(url.getString("large"));
                                image.setTimestamp(object.getString("timestamp"));

                                images.add(image);

                            } catch (JSONException e) {
                                Log.e(TAG, "Json parsing error: " + e.getMessage());
                            }
                        }

                        mAdapter.notifyDataSetChanged();
                    }
                }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                Log.e(TAG, "Error: " + error.getMessage());
                pDialog.hide();
            }
        });

        // Adding request to request queue
        AppController.getInstance().addToRequestQueue(req);
    }
}

If you run the app, you can see the images displayed in grid manner. Be sure that your device is connected to internet.

android-image-gallery-using-glide-library

Fullscreen Image Slideshow

Now we’ll see how to build a fullscreen image slider with swiping functionality. We use a DialogFragment and ViewPager for this purpose.

11. Create a layout named image_fullscreen_preview.xml under res β‡’ layout. This layout is used to display the image in fullscreen view.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">

    <ImageView
        android:id="@+id/image_preview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_centerInParent="true"
        android:scaleType="fitCenter" />

</RelativeLayout>

12. Under activity package, create a class named SlideshowDialogFragment.java. This is a fragment class which extends DialogFragment.

package info.androidhive.glide.activity;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.DialogFragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.load.engine.DiskCacheStrategy;

import java.util.ArrayList;

import info.androidhive.glide.R;
import info.androidhive.glide.model.Image;


public class SlideshowDialogFragment extends DialogFragment {
    private String TAG = SlideshowDialogFragment.class.getSimpleName();
    private ArrayList<Image> images;
    private ViewPager viewPager;
    private MyViewPagerAdapter myViewPagerAdapter;
    private TextView lblCount, lblTitle, lblDate;
    private int selectedPosition = 0;

    static SlideshowDialogFragment newInstance() {
        SlideshowDialogFragment f = new SlideshowDialogFragment();
        return f;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fragment_image_slider, container, false);
        viewPager = (ViewPager) v.findViewById(R.id.viewpager);
        lblCount = (TextView) v.findViewById(R.id.lbl_count);
        lblTitle = (TextView) v.findViewById(R.id.title);
        lblDate = (TextView) v.findViewById(R.id.date);

        images = (ArrayList<Image>) getArguments().getSerializable("images");
        selectedPosition = getArguments().getInt("position");

        Log.e(TAG, "position: " + selectedPosition);
        Log.e(TAG, "images size: " + images.size());

        myViewPagerAdapter = new MyViewPagerAdapter();
        viewPager.setAdapter(myViewPagerAdapter);
        viewPager.addOnPageChangeListener(viewPagerPageChangeListener);

        setCurrentItem(selectedPosition);

        return v;
    }

    private void setCurrentItem(int position) {
        viewPager.setCurrentItem(position, false);
        displayMetaInfo(selectedPosition);
    }

    //	page change listener
    ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {

        @Override
        public void onPageSelected(int position) {
            displayMetaInfo(position);
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        @Override
        public void onPageScrollStateChanged(int arg0) {

        }
    };

    private void displayMetaInfo(int position) {
        lblCount.setText((position + 1) + " of " + images.size());

        Image image = images.get(position);
        lblTitle.setText(image.getName());
        lblDate.setText(image.getTimestamp());
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setStyle(DialogFragment.STYLE_NORMAL, android.R.style.Theme_Black_NoTitleBar_Fullscreen);
    }

    //	adapter
    public class MyViewPagerAdapter extends PagerAdapter {

        private LayoutInflater layoutInflater;

        public MyViewPagerAdapter() {
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {

            layoutInflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View view = layoutInflater.inflate(R.layout.image_fullscreen_preview, container, false);

            ImageView imageViewPreview = (ImageView) view.findViewById(R.id.image_preview);

            Image image = images.get(position);

            Glide.with(getActivity()).load(image.getLarge())
                    .thumbnail(0.5f)
                    .crossFade()
                    .diskCacheStrategy(DiskCacheStrategy.ALL)
                    .into(imageViewPreview);

            container.addView(view);

            return view;
        }

        @Override
        public int getCount() {
            return images.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object obj) {
            return view == ((View) obj);
        }


        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }
}

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)

        recyclerView.addOnItemTouchListener(new GalleryAdapter.RecyclerTouchListener(getApplicationContext(), recyclerView, new GalleryAdapter.ClickListener() {
            @Override
            public void onClick(View view, int position) {
                Bundle bundle = new Bundle();
                bundle.putSerializable("images", images);
                bundle.putInt("position", position);

                FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
                SlideshowDialogFragment newFragment = SlideshowDialogFragment.newInstance();
                newFragment.setArguments(bundle);
                newFragment.show(ft, "slideshow");
            }

            @Override
            public void onLongClick(View view, int position) {

            }
        }));

Run the app once more and try tapping on thumbnail image. You should see the fullscreen image slider with swiping functionality enabled.

andorid-fullscreen-image-slider-using-glide-library
Ravi is hardcore Android programmer and Android programming has been his passion since he compiled his first hello-world program. Solving real problems of Android developers through tutorials has always been interesting part for him.
  • So much interesting tutorial. Thank you once again πŸ™‚

  • Samir Kelbeliyev

    very helpfull thanks… i try it fragment and getSupportFragmentManager make error can i use it?

    • Instead of getSupportFragmentManager(), try calling getFragmentManager ()

  • Leng AK

    Good tutorial. Mr. Ravi Tamada. But i want to know, does glide free for commercial use?

  • Maheswaran S

    good one and good change of website!! πŸ™‚ πŸ™‚ great work

  • sridhar

    please check the content_main.xml file .

  • vinod

    nice tutorial sir

  • @rpit Patel

    It’s been a long time happy to see you again and nice tutorial. one question in your opinion Which was the best library for parsing json?

  • Jaydeep Kacha

    Peoples are eagerly waiting for Retrofit tutorial !!!

  • Jaydeep Kacha

    Peoples are eagerly waiting for Retrofit tutorial !

  • Ankit Mehrotra

    I’m getting a Volley Error, error.getMessage()-> null, error.toString()-> timeOut error.

  • Afratul Kaoser

    very helpful for my project. but how can i show this images in offline? please help

  • ABDELKARIM TINGUER

    very useful tutorial, thank you. What you think about Retrofit and volley which one is the best ?

  • Nice article…

  • Mohamed emad

    How to import it to android studio as i can’t import it correctly

    • Harshit Pathak

      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

    • Judie

      I find it : compile ‘com.android.support:design:23.2.1’ compile ‘com.android.support:support-v4:23.2.1’

  • Myth

    tks for sharing!

  • Subhi Ayman

    A very great tutorial. Thank you, But when I click on a specific photo it does not getting larger but the application is staying at the Grid view. If you can help me with that?

    • Bruno Casado

      Same problem here. It’s always a longclick, so it doesn’t go full screen. Could you be able to solve?

    • akin

      Please help , I have same problem

  • Chaitanya Tanna

    Image.java is missing under model package

  • Asiedu Amoako

    A very good tutorial, thank you so much. I want to put the image name on the pictures in the gridview, how do i go about this. Thanks in advance.

    • You need to keep a TextView in gallery_thumbnail.xml and set the value in adapter class

  • Afratul Kaoser

    Please help me.. how can i save image or set as wallpaper from this?

  • superb

  • Sr

    Why do I get layout like this?

    http://i.imgur.com/JkWTKbi.png

    • Pradeep Pathak

      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

    • Ravi Tamada

      Right click on your main package -> New -> Package

    • Ismail G

      Hi sir hiw are you if u need code source contact me gismail095@gmail.com
      !

  • Murat

    I get an error. What is the reason?

    Error1 : Caused by: java.lang.NullPointerException: Attempt to invoke virtual method ‘void com.glide.app.glide.AppController.addToRequestQueue(com.android.volley.Request)’ on a null object reference

    Error2: java.lang.RuntimeException: Unable to start activity ComponentInfo{com.glide.app.glide/com.glide.app.glide.MainActivity}: java.lang.NullPointerException: Attempt to invoke virtual method ‘void com.glide.app.glide.AppController.addToRequestQueue(com.android.volley.Request)’ on a null object reference

    • It seems you forgot to AppController to manifest file. Check 5th point

    • Ismail G

      Hi sir hiw are you if u need code source contact me gismail095@gmail.com Γ·

  • Vajeng Patidar

    its nice one

  • tohin

    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

  • adam

    How you record this screen videos ?

  • Harshit Pathak

    The class under the model package is missing in this tutorial.

  • ohood

    i have my pictures and i want to create my json file for it and upload it to server could u please explain how and which server and if i have website “word press” can i use it for this example

  • Hi, thank you very much! But what about zoom?

  • ashwani Janu

    Hi ravi, Thank you so much for another great tutorial… i wanna point out that Image class inside model package and fragment_image_slider.xml layout files are missing…

    • Hi Ashwani

      I’ll check once again. Thank You

      • Ismail G

        Hi sir how are you if u need code sourc contact me gismail095@gmail.com

      • Nagaraj N

        Hi Ravi,

        fragment_image_slider.xml layout file is missing, Please help to get it.

    • Ismail G

      Hi sir how are you if u need code source contact me gismail095@gmail.com

  • biplab barik

    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

  • saranya

    Error in MainActivity class (JsonConnectivity) how to clear this Json Error.

    • saranya

      some classes are missing above the app.Then i faced most of the problem in this difficult WindowActionbar then java.lang.NullPointerException is raised.

  • ARASHI Funsho

    Please kindly add the style.xml and colour.xml files to the tutorial, or upload them separately. Thanks

    • FΓ‘bio Alves

      Agreed. Not that is was something difficult to do, but I had the download the source code in order to get it too. Before I did that, I thought I was doing something wrong or missing something.

  • Sage Pawan

    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.

        • Okay. Pls debug and let me know. Just to a quick check, give the url directly in Glide method and check whether it is loading or not.

          • akin

            Please I am having same issue

  • Mouadh Saidani

    Great tuto Ravi, can you please add Download wallpaper button to download each picture ?

  • Nikhil Singh

    Great tutorial Ravi bro. I want to make bitmap of the downloaded wallpapers so that i can perform some functions with it. Please tell me how to make bitmap from Glide images. Thanx

  • Mouadh Saidani

    Great tuto Ravi, can you please add Download wallpaper button to download each picture ?

  • Bruno Casado

    Hi, Ravi! I have a doubt. You didn’t put the Image Model on this example, did you? Would it be possible to put it? Thank you for your nice work!

  • sam jacky

    Model class is missing is there any one who created the model class if soo plz mail me at samjacky80@gmail.com thank you in advance and nice tutorial sir

    • Sandeep Pradhan

      download the code and extract and to go to respected folder to find the model.class

      • sam jacky

        dear sandeep pradhan there is an error while downloading the file due to which i am unable to download source code will you please mail me the source code at samjacky80@gmail.com thanks in advance

        • Sandeep Pradhan

          mailed bro check it

          • Sandeep Singh

            dear sandeep pradhan i have same problem::::Model class is missing is there any one who created the model class if soo plz mail me at sandeepsinghmbbs@gmail.com ..

  • tamer

    Hello ravi can i integrate a video with this library ? kindly advice .

  • Eswar

    Can it be used to show images from phone ? I mean I need to show all images and videos from sd card. Can someone guide me

    • Yes, everything is same. Just give the path of SD Card image. It should be like file:///_your_path_to_image

      • Eswar

        In which file? and I need to show all images from SD card. and how can i get the image paths of all images. Thanks in advance.

  • sam jacky

    is there anyone who have download source code if so plz mail me at samjacky80@gmail.com

  • mohd khalid Siddiqui

    fullscreen image slider with swiping functionality not working

  • Tatenda Kabike

    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

  • Umrbek Bekchanov

    Ravi how i can download your json create php file. Please send us your json create file

  • Leopold “Butters” Stotch

    Hi Ravi. Is there something similar to Glide for audio?

  • Muhammad Mohsin

    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

    The application’s PagerAdapter changed the adapter’s contents without calling PagerAdapter#notifyDataSetChanged! Expected adapter item count: 27, found: 36 Pager

    i post my code in stackoverflow but i didn’t gert answer

    http://stackoverflow.com/questions/38159404/pageradapter-changed-the-adapters-contents-without-calling-pageradapternotifyd?noredirect=1#comment63752724_38159404

  • 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().

    Also, Image image = new Image(); in MainActivity is saying “Image is abstract class, cannot be instantiated”.

    Please help me to solve this.

    • Ankur

      Same problem I am getting.. any clue?

      • Nagaraj N

        I have posted both Image.Java and fragment_image_slider.XML content in my above comment.

        • Ankur

          yes but you have import the wrong class… recheck it.. and import custum class

    • Ankur

      Problem Solve bro… add Image.java file under Image package.. and import it in the java file.

  • Nagaraj N

    I designed fragment_image_slider.xml and implemented Image class.

    Image.java

    public class Image {

    private String small;
    private String medium;
    private String large;
    private String name;
    private String timestamp;

    public Image() {
    super();
    }

    public Image(String small, String medium, String large, String name, String timestamp) {
    this.small = small;
    this.medium = medium;
    this.large = large;
    this.name = name;
    this.timestamp = timestamp;
    }

    public String getSmall() {
    return small;
    }

    public void setSmall(String small) {
    this.small = small;
    }

    public String getMedium() {
    return medium;
    }

    public void setMedium(String medium) {
    this.medium = medium;
    }

    public String getLarge() {
    return large;
    }

    public void setLarge(String large) {
    this.large = large;
    }

    public String getName() {
    return name;
    }

    public void setName(String name) {
    this.name = name;
    }

    public String getTimestamp() {
    return timestamp;
    }

    public void setTimestamp(String timestamp) {
    this.timestamp = timestamp;
    }
    }

  • Nagaraj N

    Image.java

    package com.codefordevs.glidesample;

    /**
    * Created by NAGARAJ SRJ on 7/25/2016.
    */

    public class Image {

    private String small;
    private String medium;
    private String large;
    private String name;
    private String timestamp;

    public Image() {
    super();
    }

    public Image(String small, String medium, String large, String name, String timestamp) {
    this.small = small;
    this.medium = medium;
    this.large = large;
    this.name = name;
    this.timestamp = timestamp;
    }

    public String getSmall() {
    return small;
    }

    public void setSmall(String small) {
    this.small = small;
    }

    public String getMedium() {
    return medium;
    }

    public void setMedium(String medium) {
    this.medium = medium;
    }

    public String getLarge() {
    return large;
    }

    public void setLarge(String large) {
    this.large = large;
    }

    public String getName() {
    return name;
    }

    public void setName(String name) {
    this.name = name;
    }

    public String getTimestamp() {
    return timestamp;
    }

    public void setTimestamp(String timestamp) {
    this.timestamp = timestamp;
    }
    }

    fragment_image_slider.xml

    • I can’t download the full code from the link above, so thank you very much for write this code here. You are a life saver πŸ™‚

  • pradeepkumar reddy

    Without making the constructor private in AppController.java how can you say that it is a singleton class

  • pradeepkumar reddy

    android.view.InflateException: Binary XML file line #2: Binary XML file line #2: Error inflating class in.lxltech.imagelibrary.helper.SquareLayout

  • pradeepkumar reddy

    can i implement onItemTouchListener with gridView to get the fullscreen sliding images

  • Alok Singh

    hi ravi , I am having an error in MainActivity.java :

    FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
    SlideShowDialogFragment newFragment = SlideShowDialogFragment.newInstance();
    newFragment.setArguments(bundle);
    newFragment.show(ft, “slideshow”);

    It shows error that : cannot resolve method show()

    Please help !

  • Desi.WTF

    Hi Ravi,
    Your volley tutorial helped me lot.. Now with 10k downloads of App.
    Can we have image categories from website in app in this tutorial. Please point me in right direction.
    Regards.

  • Hi Ravi,
    Your tutorials are always helpful for me and everyone.
    I am getting error in this one can you help me please,
    My Error is

    Error: java.net.UnknownHostException: Unable to resolve host “api.androidhive.info”: No address associated with hostname

    I just tried your code in my app

    i also tried by giving my domain path to this and also changed the object of JSON

    Thanks in advance

    • It happens in two occasions. When the url is not valid or you forgot to add INTERNET permission. Also make sure that your device is having proper internet connection.

  • Steve

    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;

    FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
    SlideshowDialogFragment newFragment = SlideshowDialogFragment.newInstance();
    newFragment.setArguments(bundle);
    newFragment.show(ft, “slideshow”);

  • Paijo RX

    Hi Ravi,

    Thank your for your great tutorial.

    I have a problem, the thumbnail not show square but rectangle.
    How to create square thumbnail ?

    Thank you

  • bhavin makwana

    can anybody post here “Image.java” file ???

  • bhavin makwana

    anybody can post Image.java file here
    i m trying to add interstitial ad with this
    i have a error “java.lang.RuntimeException: Parcel: unable to marshal value ……./model/Image.java

    • Please find the Image.java in downloaded source code. I’ll update meanwhile.

  • bhavin makwana

    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

    • Are you getting any errors in LogCat?

      • jeevan

        Thanks for the reply it was due to two tablayout one in menu directory and the other one in the given manActivity.java

        …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

  • jeevan

    Ravi Tameda is there any way to put a reloading button which redownloads the json file
    like when we change the json files valuues the photos change

    • You can use placeholder for that.

      • jeevan

        hmm fine

        …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:

    I use it to display information.

    And So you see when printing: http://lifes.com.co/vet_life/ejemplo.php

    Could you tell me what would be the code so that it can handle .json, I appreciate all your help.

    • Hi Mario

      You need to understand JSON parsing first by knowing the meaning of objects and arrays. Go through the below article to understand how to identify nodes and parse.
      http://www.androidhive.info/2012/01/android-json-parsing-tutorial/

      • Mario German Agudelo

        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

    • Is full screen dialog is launching?

      • akin

        When I launch the app, it only shows the square images, so when I click the image. Nothing happens

      • akin

        I have solved it , it was resolved in main activity at recyclerView section.

  • Nhat Dear

    Hello ravi, how can i load image from gallery by Glide ?
    I am using pick_action to open gallery and return with result. I passed to uri of data to Glide but it is not worked

    • Ajith Pandian

      Try like this, Glide.with(mContext)
      .load(new File(pictureUri.getPath())) // Uri of the picture
      .into(imageView)

  • Celmar Galindez

    Hi @ravi8x:disqus, thanks for this tutorial. But I got some error in using the following:
    image.setName()
    image.setSmall()
    image.setMedium()
    image.setLarge()
    image.setTimestamp()
    image.getMedium()

    I hope for your response. Thank you!

    • 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

    • HamidReza

      salam aghaye moradi, mamnoon misham baraye bande ham ersal namayid:
      mmaster0775@gmail.com

  • Jun Jie

    need help ,please. somebody who have the downloaded file can forward to me, cause i can’t download the file on the top .

    • Morteza Moradi

      i sended

  • Dayat San

    sorry i can’t download this source,, anyone please help me to send source by email….

    • Whats the problem?

      • Dayat San

        Thanks for response
        i following this code but get error in GalleryAdapter.Java in line Glide.with(mContext).load(image.getMedium())..
        i cant find funct getMedium or getLarge

  • Deepak Nair

    layout fragment_image_slider is missing in the tutorial
    ?

  • Dayat San

    how to make json like that in web service c#..?
    Help..

    • You need to search for ‘Building REST Api in C#’.

  • kyle

    How do i load images via flickr api, I’m looking everywhere but your son and android studio code is only specified to your own website and i don’t know how to load images from other sources πŸ™

  • Morteza Moradi

    how can add endless or lazy load to this recyclerview ?

    Does anyone know؟

    i use EndlessRecyclerOnScrollListener.java in github but it doesnot work?

  • bhavin makwana

    i want to put interstitial ad when i click back from full image view to square layout…which(where) is code from back click event from full screen view to square layout….

  • hari shankar

    Error:Failed to open zip file.
    Gradle’s dependency cache may be corrupt (this sometimes occurs after a network connection timeout.)
    Re-download dependencies and sync project (requires network)
    Re-download dependencies and sync project (requires network)

    i got this error ? why this happen ?

  • Javier Leonardo UΓ±ate Romero

    Hello ravi , Thank you very much for your tutorials,
    How can i use images like wallpapers? help please

  • 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…

  • 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 πŸ™

  • bhavin makwana

    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.

    Thank you!

    • Just remove the code related to swipe from dialog fragment.

      • b101

        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.

          • b101

            I managed to get it working. πŸ™‚ Thank you for this tutorial !

          • Okay.

  • Praveen Kumar

    Hi Ravi,
    Thank you very much for a good tutorial and source code too.

  • Yash Agrawal

    @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?

    • Do you have onCreateOptionsMenu() method implemented?

      • Ben Carson

        Thanks. I fixed the problem.

  • Rakesh Punjabi

    Hello Ravi Quick question,

    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.

    • Hi Rakesh

      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.

  • titi

    When you touch a picture to show big picture, all big pictures in the background loading operation and use of the Internet traffic goes up.
    what’s the solution?

  • eri cahyana

    can i zoom out/in image ?

  • Oscar Leon

    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

  • Sefat E Rahman

    Full screen Image Slide show is not working. Infact it is showing error in the following lines.
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
    Bundle savedInstanceState) {
    // View v = inflater.inflate(R.layout.fragment_image_slider, container, false);
    // viewPager = (ViewPager) v.findViewById(R.id.viewpager);
    // lblCount = (TextView) v.findViewById(R.id.lbl_count);
    lblTitle = (TextView) v.findViewById(R.id.title);
    // lblDate = (TextView) v.findViewById(R.id.date);
    I have commented the lines where i m facing difficulties. Java class is not finding this layouts. How can I solve it

    • Have you created the fragment_image_slider.xml? Also remove the unnecessary import statements in your fragment.

      • Sefat E Rahman

        No i didn’t .Where should I create it??Please consider me as beginer

  • Ok. Try to get the file from downloaded project meanwhile.

  • Sanaz Ramezani

    I tried to replace volley with Retrofit. But I can not deserialize the “url” in this way.
    Here is the Error: Expected BEGIN_ARRAY but was BEGIN_OBJECT

    Please give me some advice.
    Thanks in advanced

  • NuhK

    Hello can you please send me the Source Code?
    nuhkoca92@windowslive.com

  • Ibn E Adam

    The Image class is not mentioned in this post which was supposed to come under model package.

  • Parvathi M

    how to load images af gif in listview with glide some images are not animatinbg

  • Akshay Bhalerao

    Thanks for the tutorial
    ….

    I need to implement add to favorite button when images shows in full screen activity and display the images in separate fragment added to favorite.

    so please help me for that..

    if any one did plese send me a no i will contact you..

    My no. is 9823356982

  • Sanket Kumar

    thanks for this tutorial..

    I am loading image using Picasso in appbar Layout but it is scrolling slowly .
    how can i fix this ..

  • Resham Acharya

    where is your Image class can you please provide me your Image class and fragment_image_slider.xml
    resham.acharya94@gmail.com

  • Mayur Thole

    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.

  • chetan

    image.SetName(object.getString(“name”));

    JSONObject url = object.getJSONObject(“url”);

    image.setSmall(url.getString(“small”));
    image.setMedium(url.getString(“medium”));
    image.setLarge(url.getString(“large”));
    image.setTimestamp(object.getString(“timestamp”));

    image.setSmall(url.getString(“small”));
    image.setMedium(url.getString(“medium”));
    image.setLarge(url.getString(“large”));

    where this method is calling, i am getting error this image.setSmall,setMedium

    could you please explai

    please send me the project download link

  • chetan

    hi Raj

    mage.setSmall(url.getString(“small”));
    image.setMedium(url.getString(“medium”));
    image.setLarge(url.getString(“large”));
    image.setTimestamp(object.getString(“timestamp”));

    I am getting errror on this line

    Error:(90, 47) error: Image is abstract; cannot be instantiated
    Error:(91, 38) error: cannot find symbol method setName(String)
    Error:(94, 38) error: cannot find symbol method setSmall(String)
    Error:(95, 38) error: cannot find symbol method setMedium(String)
    Error:(96, 38) error: cannot find symbol method setLarge(String)

    • Ali Ussama

      i think we should create a class in package model which contain these methods but i have no idea what these methods contain !
      wish the author explain what should we do !

      • Yes, you are right. That is a model class with setter and getter methods. It seems I forgot to add the class in the article. You can find it in the downloaded project.

        • Praveen Manepalli

          hi sir when downloded you rar it ive me error please upload a good one

          • Praveen Manepalli

            where is your Image class can you please provide me your Image class and fragment_image_slider.xml
            manepally.praveen@gmail.com
            please send me code

  • Nikita Yatskivskiy

    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… πŸ™‚

  • Ibrahim Haouari

    import java.io.Serializable;

    /**
    * Created by Lincoln on 04/04/16.
    */
    public class Image implements Serializable{
    private String name;
    private String small, medium, large;
    private String timestamp;

    public Image() {
    }

    public Image(String name, String small, String medium, String large, String timestamp) {
    this.name = name;
    this.small = small;
    this.medium = medium;
    this.large = large;
    this.timestamp = timestamp;
    }

    public String getName() {
    return name;
    }

    public void setName(String name) {
    this.name = name;
    }

    public String getSmall() {
    return small;
    }

    public void setSmall(String small) {
    this.small = small;
    }

    public String getMedium() {
    return medium;
    }

    public void setMedium(String medium) {
    this.medium = medium;
    }

    public String getLarge() {
    return large;
    }

    public void setLarge(String large) {
    this.large = large;
    }

    public String getTimestamp() {
    return timestamp;
    }

    public void setTimestamp(String timestamp) {
    this.timestamp = timestamp;
    }
    }

  • Shankar Acharya

    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?

    I made StackOverflow question about this:

    https://stackoverflow.com/questions/44167973/close-dialogfragment-on-click

    • set cancellable true on dialog fragment before showing.

      • Bobby

        I just tried that. It still doesn’t close the dialog on click.

        Here is my code:


        FragmentTransaction ft = ((FragmentActivity) context).getSupportFragmentManager().beginTransaction();
        SlideshowDialogFragment slideshowFragment = SlideshowDialogFragment.newInstance();
        slideshowFragment.setCancelable(true);
        slideshowFragment.show(ft, "slideshow");

        I also tried adding setCancelable(true) to the onCreateView method:


        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fragment_slideshow, container, false);

        setCancelable(true);

        // I also tried this
        getDialog().setCancelable(true);

        ...
        }

  • fazeel zama

    @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() ?

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

    https://uploads.disquscdn.com/images/640e7495c018f68048448ae7ed0354dc013ae06bb0d9a83c4098b7b450122ffe.png

  • Fawad khan

    how to download these images using Gllide? i have done everything…now i want the wallpaper to be downloaded how can i do that with Glide?any help would be Appreciated!

  • sayali shinde

    I am getting below error and app is unfortunately closing

    android.view.InflateException: Binary XML file line #2: Binary XML file line #2: Error inflating class info.androidhive.glide.helper.SquareLayout

  • Paras Sidhu

    Sir, How to get the currently viewing Drawable?