Create gallery android application – Android Picasso Image Library

by Amardeep Yadav · Published November 5, 2017 · Updated November 7, 2017

Loading Images from internet or device it is very hard task to do and create gallery android application becomes lot more difficult as it contains images everywhere. If we load images directly in android, then it will take lots of run-time memory which lead to memory exceptions. This can be handled by using proper image caching. Building this image caching system can take long time. There are many libraries which can be used to load images from internet or device efficiently like Picasso, Glide or Universal Image Loader.

This Libraries take well care of image caching and displaying. In this post we will learn how to create gallery android application. Application will display images from specific bucket from device storage. Clicking on any image grid will display that image in full screen and at bottom there will be a strip of thumbnails with all images listed in it so that user does not have to come back for selecting another image.

Download Code

DOWNLOAD PROJECT

Demo

How to use Picasso

Adding Picasso library in your project is super easy just add following line of code inside dependency section of build.gradle(module app) file.

dependencies {

    /*add Picasso Library Here*/
    compile 'com.squareup.picasso:picasso:2.5.2'
}

dependencies {

/*add Picasso Library Here*/

compile 'com.squareup.picasso:picasso:2.5.2'

}

Following is snippets how we can load image using Picasso inside ImageView

Picasso.with(context).load(Path_to_image).into(targetImageView);

1	Picasso.with(context).load(Path_to_image).into(targetImageView);

How to create gallery android application

1.Create new android studio project File -> New Project with name as you want and select add no activity and proceed

2.Open build.gradle file and modify it according to following

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.2"
    defaultConfig {
        applicationId "com.loopwiki.androidmaterialgallery"
        minSdkVersion 15
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:26.+'
    compile 'com.android.support:design:26.+'
    compile 'com.android.support:support-v4:26.+'
    testCompile 'junit:junit:4.12'

    /*add Picasso Library Here*/
    compile 'com.squareup.picasso:picasso:2.5.2'
}

apply plugin: 'com.android.application'

android {

compileSdkVersion 26

buildToolsVersion "26.0.2"

defaultConfig {

applicationId "com.loopwiki.androidmaterialgallery"

minSdkVersion 15

targetSdkVersion 26

versionCode 1

versionName "1.0"

testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

}

buildTypes {

release {

minifyEnabled false

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

}

dependencies {

compile fileTree(dir: 'libs', include: ['*.jar'])

androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {

exclude group: 'com.android.support', module: 'support-annotations'

})

compile 'com.android.support:appcompat-v7:26.+'

compile 'com.android.support:design:26.+'

compile 'com.android.support:support-v4:26.+'

testCompile 'junit:junit:4.12'

/*add Picasso Library Here*/

compile 'com.squareup.picasso:picasso:2.5.2'

}

3.Create new class layout -> SquareLayout.java this class will help to keep ImageView in square ratio

package com.loopwiki.androidmaterialgallery;

/**
 * Created by amardeep on 11/3/2017.
 */

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

//square layout
public 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) {
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
    }
}

package com.loopwiki.androidmaterialgallery;

/**

* Created by amardeep on 11/3/2017.

import android.annotation.TargetApi;

import android.content.Context;

import android.os.Build;

import android.util.AttributeSet;

import android.widget.RelativeLayout;

//square layout

public 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) {

super.onMeasure(widthMeasureSpec, widthMeasureSpec);

}

4. Create new layout -> custom_row_gallery_item.xml. This will be structure of single grid. Add ImageView and TextView which will be used for displaying image thumbnail and image name respectively.

<?xml version="1.0" encoding="utf-8"?>
<com.loopwiki.androidmaterialgallery.SquareLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<!--Thumbnail of gallery item-->
    <ImageView
        android:id="@+id/imageViewThumbnail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop" />
<!--Textview for image name-->
    <TextView
        android:id="@+id/textViewImageName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageViewThumbnail"
        android:background="#89000000"
        android:ellipsize="end"
        android:lines="1"
        android:padding="4dp"
        android:textAppearance="@style/TextAppearance.AppCompat.Small" />


</com.loopwiki.androidmaterialgallery.SquareLayout>

<?xml version="1.0" encoding="utf-8"?>

<com.loopwiki.androidmaterialgallery.SquareLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<ImageView

android:id="@+id/imageViewThumbnail"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:scaleType="centerCrop" />

<TextView

android:id="@+id/textViewImageName"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignBottom="@+id/imageViewThumbnail"

android:background="#89000000"

android:ellipsize="end"

android:lines="1"

android:padding="4dp"

android:textAppearance="@style/TextAppearance.AppCompat.Small" />

</com.loopwiki.androidmaterialgallery.SquareLayout>

5.Create new class package name->GalleryItem.java . This class is blueprint of data inside single gallery item. This class contains two fields Uri of image and name of image.

package com.loopwiki.androidmaterialgallery;

/**
 * Created by amardeep on 11/3/2017.
 */
//This class represents single gallery item
public class GalleryItem {
    public String imageUri;
    public String imageName;
    public boolean isSelected = false;

    public GalleryItem(String imageUri, String imageName) {
        this.imageUri = imageUri;
        this.imageName = imageName;
    }
}

package com.loopwiki.androidmaterialgallery;

/**

* Created by amardeep on 11/3/2017.

//This class represents single gallery item

public class GalleryItem {

public String imageUri;

public String imageName;

public boolean isSelected = false;

public GalleryItem(String imageUri, String imageName) {

this.imageUri = imageUri;

this.imageName = imageName;

}

6.Create new class Package name ->ScreenUtils.java. This class used to get width and height of screen. Actually we did not need to create this class we can get screen width and height directly but to keep things organized we are creating this class.

package com.loopwiki.androidmaterialgallery;

import android.app.Activity;
import android.content.Context;
import android.database.Cursor;
import android.net.Uri;
import android.provider.MediaStore;
import android.util.DisplayMetrics;

/**
 * Created by amardeep on 11/3/2017.
 */

public class ScreenUtils {

    //static method to get screen width
    public static int getScreenWidth(Context context) {
        DisplayMetrics displayMetrics = new DisplayMetrics();
        ((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        return displayMetrics.widthPixels;
    }

    //static method to get screen height
    public static int getScreenHeight(Context context) {
        DisplayMetrics displayMetrics = new DisplayMetrics();
        ((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        return displayMetrics.heightPixels;
    }
}

package com.loopwiki.androidmaterialgallery;

import android.app.Activity;

import android.content.Context;

import android.database.Cursor;

import android.net.Uri;

import android.provider.MediaStore;

import android.util.DisplayMetrics;

/**

* Created by amardeep on 11/3/2017.

public class ScreenUtils {

//static method to get screen width

public static int getScreenWidth(Context context) {

DisplayMetrics displayMetrics = new DisplayMetrics();

((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);

return displayMetrics.widthPixels;

}

//static method to get screen height

public static int getScreenHeight(Context context) {

DisplayMetrics displayMetrics = new DisplayMetrics();

((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);

return displayMetrics.heightPixels;

}

7. Create new class Package name -> GalleryUtils.java. This class helps to get images from device storage from Download folder. You can modify CAMERA_IMAGE_BUCKET_NAME to other folders like “/DCIM/Camera” or any other folder.

package com.loopwiki.androidmaterialgallery;

import android.content.Context;
import android.database.Cursor;
import android.os.Environment;
import android.provider.MediaStore;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by amardeep on 10/25/2017.
 */

public class GalleryUtils {

    //Define bucket name from which you want to take images Example '/DCIM/Camera' for camera images
    public static final String CAMERA_IMAGE_BUCKET_NAME = Environment.getExternalStorageDirectory().toString() + "/Download";

    //method to get id of image bucket from path
    public static String getBucketId(String path) {
        return String.valueOf(path.toLowerCase().hashCode());
    }

    //method to get images
    public static List<GalleryItem> getImages(Context context) {
        final String[] projection = {MediaStore.Images.Media.DISPLAY_NAME, MediaStore.Images.Media.DATA};
        final String selection = MediaStore.Images.Media.BUCKET_ID + " = ?";
        final String[] selectionArgs = {GalleryUtils.getBucketId(CAMERA_IMAGE_BUCKET_NAME)};
        final Cursor cursor = context.getContentResolver().query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
                projection,
                selection,
                selectionArgs,
                null);
        ArrayList<GalleryItem> result = new ArrayList<GalleryItem>(cursor.getCount());
        if (cursor.moveToFirst()) {
            final int dataColumn = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
            final int nameColumn = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DISPLAY_NAME);
            do {
                GalleryItem galleryItem = new GalleryItem(cursor.getString(dataColumn), cursor.getString(nameColumn));
                result.add(galleryItem);
            } while (cursor.moveToNext());
        }
        cursor.close();
        return result;

    }
}

package com.loopwiki.androidmaterialgallery;

import android.content.Context;

import android.database.Cursor;

import android.os.Environment;

import android.provider.MediaStore;

import java.util.ArrayList;

import java.util.List;

/**

* Created by amardeep on 10/25/2017.

public class GalleryUtils {

//Define bucket name from which you want to take images Example '/DCIM/Camera' for camera images

public static final String CAMERA_IMAGE_BUCKET_NAME = Environment.getExternalStorageDirectory().toString() + "/Download";

//method to get id of image bucket from path

public static String getBucketId(String path) {

return String.valueOf(path.toLowerCase().hashCode());

}

//method to get images

public static List<GalleryItem> getImages(Context context) {

final String[] projection = {MediaStore.Images.Media.DISPLAY_NAME, MediaStore.Images.Media.DATA};

final String selection = MediaStore.Images.Media.BUCKET_ID + " = ?";

final String[] selectionArgs = {GalleryUtils.getBucketId(CAMERA_IMAGE_BUCKET_NAME)};

final Cursor cursor = context.getContentResolver().query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,

projection,

selection,

selectionArgs,

null);

ArrayList<GalleryItem> result = new ArrayList<GalleryItem>(cursor.getCount());

if (cursor.moveToFirst()) {

final int dataColumn = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);

final int nameColumn = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DISPLAY_NAME);

do {

GalleryItem galleryItem = new GalleryItem(cursor.getString(dataColumn), cursor.getString(nameColumn));

result.add(galleryItem);

} while (cursor.moveToNext());

}

cursor.close();

return result;

}

8.Create new class which will serve as Adapter for our Main gallery view on app startup package name->GalleryAdapter.java add following code to it

package com.loopwiki.androidmaterialgallery;

import android.content.Context;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.squareup.picasso.Picasso;

import java.io.File;
import java.util.ArrayList;
import java.util.List;

/**
 * Created by amardeep on 11/3/2017.
 */

public class GalleryAdapter extends RecyclerView.Adapter {
    //Declare GalleryItems List
    List<GalleryItem> galleryItems;
    Context context;
    //Declare GalleryAdapterCallBacks
    GalleryAdapterCallBacks mAdapterCallBacks;

    public GalleryAdapter(Context context) {
        this.context = context;
        //get GalleryAdapterCallBacks from contex
        this.mAdapterCallBacks = (GalleryAdapterCallBacks) context;
        //Initialize GalleryItem List
        this.galleryItems = new ArrayList<>();
    }

    //This method will take care of adding new Gallery items to RecyclerView
    public void addGalleryItems(List<GalleryItem> galleryItems) {
        int previousSize = this.galleryItems.size();
        this.galleryItems.addAll(galleryItems);
        notifyItemRangeInserted(previousSize, galleryItems.size());

    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(context);
        View row = inflater.inflate(R.layout.custom_row_gallery_item, parent, false);
        return new GalleryItemHolder(row);
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
        //get current Gallery Item
        GalleryItem currentItem = galleryItems.get(position);
        //Create file to load with Picasso lib
        File imageViewThoumb = new File(currentItem.imageUri);
        //cast holder with gallery holder
        GalleryItemHolder galleryItemHolder = (GalleryItemHolder) holder;
        //Load with Picasso
        Picasso.with(context)
                .load(imageViewThoumb)
                .centerCrop()
                .resize(ScreenUtils.getScreenWidth(context) / 2, ScreenUtils.getScreenHeight(context) / 3)//Resize image to width half of screen and height 1/3 of screen height
                .into(galleryItemHolder.imageViewThumbnail);
        //set name of Image
        galleryItemHolder.textViewImageName.setText(currentItem.imageName);
        //set on click listener on imageViewThumbnail
        galleryItemHolder.imageViewThumbnail.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //call onItemSelected method and pass the position and let activity decide what to do when item selected
                mAdapterCallBacks.onItemSelected(position);
            }
        });

    }

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

    public class GalleryItemHolder extends RecyclerView.ViewHolder {
        ImageView imageViewThumbnail;
        TextView textViewImageName;

        public GalleryItemHolder(View itemView) {
            super(itemView);
            imageViewThumbnail = itemView.findViewById(R.id.imageViewThumbnail);
            textViewImageName = itemView.findViewById(R.id.textViewImageName);

        }
    }

    //Interface for communication of Adapter and MainActivity
    public interface GalleryAdapterCallBacks {
        void onItemSelected(int position);
    }


}

100

101

102

package com.loopwiki.androidmaterialgallery;

import android.content.Context;

import android.support.v7.widget.RecyclerView;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.TextView;

import com.squareup.picasso.Picasso;

import java.io.File;

import java.util.ArrayList;

import java.util.List;

/**

* Created by amardeep on 11/3/2017.

public class GalleryAdapter extends RecyclerView.Adapter {

//Declare GalleryItems List

List<GalleryItem> galleryItems;

Context context;

//Declare GalleryAdapterCallBacks

GalleryAdapterCallBacks mAdapterCallBacks;

public GalleryAdapter(Context context) {

this.context = context;

//get GalleryAdapterCallBacks from contex

this.mAdapterCallBacks = (GalleryAdapterCallBacks) context;

//Initialize GalleryItem List

this.galleryItems = new ArrayList<>();

}

//This method will take care of adding new Gallery items to RecyclerView

public void addGalleryItems(List<GalleryItem> galleryItems) {

int previousSize = this.galleryItems.size();

this.galleryItems.addAll(galleryItems);

notifyItemRangeInserted(previousSize, galleryItems.size());

}

@Override

public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

LayoutInflater inflater = LayoutInflater.from(context);

View row = inflater.inflate(R.layout.custom_row_gallery_item, parent, false);

return new GalleryItemHolder(row);

}

@Override

public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {

//get current Gallery Item

GalleryItem currentItem = galleryItems.get(position);

//Create file to load with Picasso lib

File imageViewThoumb = new File(currentItem.imageUri);

//cast holder with gallery holder

GalleryItemHolder galleryItemHolder = (GalleryItemHolder) holder;

//Load with Picasso

Picasso.with(context)

.load(imageViewThoumb)

.centerCrop()

.resize(ScreenUtils.getScreenWidth(context) / 2, ScreenUtils.getScreenHeight(context) / 3)//Resize image to width half of screen and height 1/3 of screen height

.into(galleryItemHolder.imageViewThumbnail);

//set name of Image

galleryItemHolder.textViewImageName.setText(currentItem.imageName);

//set on click listener on imageViewThumbnail

galleryItemHolder.imageViewThumbnail.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

//call onItemSelected method and pass the position and let activity decide what to do when item selected

mAdapterCallBacks.onItemSelected(position);

}

});

}

@Override

public int getItemCount() {

return galleryItems.size();

}

public class GalleryItemHolder extends RecyclerView.ViewHolder {

ImageView imageViewThumbnail;

TextView textViewImageName;

public GalleryItemHolder(View itemView) {

super(itemView);

imageViewThumbnail = itemView.findViewById(R.id.imageViewThumbnail);

textViewImageName = itemView.findViewById(R.id.textViewImageName);

}

//Interface for communication of Adapter and MainActivity

public interface GalleryAdapterCallBacks {

void onItemSelected(int position);

}

Breaking GalleryAdapter

Following method used to manage adding of new gallery items and notifying Adapter to update its view whenever new items gets added

//This method will take care of adding new Gallery items to RecyclerView
public void addGalleryItems(List<GalleryItem> galleryItems) {
        int previousSize = this.galleryItems.size();
        this.galleryItems.addAll(galleryItems);
        notifyItemRangeInserted(previousSize, galleryItems.size());

    }

//This method will take care of adding new Gallery items to RecyclerView

public void addGalleryItems(List<GalleryItem> galleryItems) {

int previousSize = this.galleryItems.size();

this.galleryItems.addAll(galleryItems);

notifyItemRangeInserted(previousSize, galleryItems.size());

}

Now when user will click on any gallery item how we can notify activity that which item is clicked ? For that we have interface class GalleryAdapterCallBacks which will handle communication between activity and Adapter.

//Interface for communication of Adapter and MainActivity
    public interface GalleryAdapterCallBacks {
        //call this method to notify about item is clicked 
        void onItemSelected(int position);
    }

//Interface for communication of Adapter and MainActivity

public interface GalleryAdapterCallBacks {

//call this method to notify about item is clicked

void onItemSelected(int position);

}

9. Now we will create activity which will contain Recyclerview. So create new layout -> actvitiy_main.xml. Add Recyclerview in layout as shown below

<?xml version="1.0" encoding="utf-8"?>
<!--Define Gallery RecyclerView-->
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/recyclerViewGallery"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical"
    tools:context="com.loopwiki.androidmaterialgallery.MainActivity"
    tools:showIn="@layout/activity_main">


</android.support.v7.widget.RecyclerView>

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/recyclerViewGallery"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scrollbars="vertical"

tools:context="com.loopwiki.androidmaterialgallery.MainActivity"

tools:showIn="@layout/activity_main">

</android.support.v7.widget.RecyclerView>

Create new class under Package name -> MainActivity.java

package com.loopwiki.androidmaterialgallery;

import android.Manifest;
import android.content.pm.PackageManager;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v4.app.ActivityCompat;
import android.support.v4.app.DialogFragment;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.widget.Toast;

import java.util.List;

//Remember to implement  GalleryAdapter.GalleryAdapterCallBacks to activity  for communication of Activity and Gallery Adapter
public class MainActivity extends AppCompatActivity implements GalleryAdapter.GalleryAdapterCallBacks {
    //Deceleration of list of  GalleryItems
    public List<GalleryItem> galleryItems;
    //Read storage permission request code
    private static final int RC_READ_STORAGE = 5;
    GalleryAdapter mGalleryAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //setup RecyclerView
        RecyclerView recyclerViewGallery = (RecyclerView) findViewById(R.id.recyclerViewGallery);
        recyclerViewGallery.setLayoutManager(new GridLayoutManager(this, 2));
        //Create RecyclerView Adapter
        mGalleryAdapter = new GalleryAdapter(this);
        //set adapter to RecyclerView
        recyclerViewGallery.setAdapter(mGalleryAdapter);
        //check for read storage permission
        if (ContextCompat.checkSelfPermission(this, Manifest.permission.READ_EXTERNAL_STORAGE) == PackageManager.PERMISSION_GRANTED) {
            //Get images
            galleryItems = GalleryUtils.getImages(this);
            // add images to gallery recyclerview using adapter
            mGalleryAdapter.addGalleryItems(galleryItems);
        } else {
            //request permission
            ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.READ_EXTERNAL_STORAGE}, RC_READ_STORAGE);
        }


    }


    @Override
    public void onItemSelected(int position) {
        //create fullscreen SlideShowFragment dialog
        SlideShowFragment slideShowFragment = SlideShowFragment.newInstance(position);
        //setUp style for slide show fragment
        slideShowFragment.setStyle(DialogFragment.STYLE_NORMAL, R.style.DialogFragmentTheme);
        //finally show dialogue
        slideShowFragment.show(getSupportFragmentManager(), null);
    }

    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);
        if (requestCode == RC_READ_STORAGE) {
            if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                //Get images
                galleryItems = GalleryUtils.getImages(this);
                // add images to gallery recyclerview using adapter
                mGalleryAdapter.addGalleryItems(galleryItems);
            } else {
                Toast.makeText(this, "Storage Permission denied", Toast.LENGTH_SHORT).show();
            }
        }
    }
}

package com.loopwiki.androidmaterialgallery;

import android.Manifest;

import android.content.pm.PackageManager;

import android.os.Bundle;

import android.support.annotation.NonNull;

import android.support.v4.app.ActivityCompat;

import android.support.v4.app.DialogFragment;

import android.support.v4.content.ContextCompat;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.GridLayoutManager;

import android.support.v7.widget.RecyclerView;

import android.widget.Toast;

import java.util.List;

//Remember to implement GalleryAdapter.GalleryAdapterCallBacks to activity for communication of Activity and Gallery Adapter

public class MainActivity extends AppCompatActivity implements GalleryAdapter.GalleryAdapterCallBacks {

//Deceleration of list of GalleryItems

public List<GalleryItem> galleryItems;

//Read storage permission request code

private static final int RC_READ_STORAGE = 5;

GalleryAdapter mGalleryAdapter;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//setup RecyclerView

RecyclerView recyclerViewGallery = (RecyclerView) findViewById(R.id.recyclerViewGallery);

recyclerViewGallery.setLayoutManager(new GridLayoutManager(this, 2));

//Create RecyclerView Adapter

mGalleryAdapter = new GalleryAdapter(this);

//set adapter to RecyclerView

recyclerViewGallery.setAdapter(mGalleryAdapter);

//check for read storage permission

if (ContextCompat.checkSelfPermission(this, Manifest.permission.READ_EXTERNAL_STORAGE) == PackageManager.PERMISSION_GRANTED) {

//Get images

galleryItems = GalleryUtils.getImages(this);

// add images to gallery recyclerview using adapter

mGalleryAdapter.addGalleryItems(galleryItems);

} else {

//request permission

ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.READ_EXTERNAL_STORAGE}, RC_READ_STORAGE);

}

@Override

public void onItemSelected(int position) {

//create fullscreen SlideShowFragment dialog

SlideShowFragment slideShowFragment = SlideShowFragment.newInstance(position);

//setUp style for slide show fragment

slideShowFragment.setStyle(DialogFragment.STYLE_NORMAL, R.style.DialogFragmentTheme);

//finally show dialogue

slideShowFragment.show(getSupportFragmentManager(), null);

}

@Override

public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {

super.onRequestPermissionsResult(requestCode, permissions, grantResults);

if (requestCode == RC_READ_STORAGE) {

if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {

//Get images

galleryItems = GalleryUtils.getImages(this);

// add images to gallery recyclerview using adapter

mGalleryAdapter.addGalleryItems(galleryItems);

} else {

Toast.makeText(this, "Storage Permission denied", Toast.LENGTH_SHORT).show();

}

Braking MainActivity

Following Piece of code will initialize and will setup Recyclerview . Set layout manager as GridLayoutManager with span count of 2 ( Read this post if you want to know more about layout managers refer this post Android RecyclerView Tutorial – Layout Managers )

        //setup RecyclerView
        RecyclerView recyclerViewGallery = (RecyclerView) findViewById(R.id.recyclerViewGallery);
        recyclerViewGallery.setLayoutManager(new GridLayoutManager(this, 2));
        //Create RecyclerView Adapter
        mGalleryAdapter = new GalleryAdapter(this);
        //set adapter to RecyclerView
        recyclerViewGallery.setAdapter(mGalleryAdapter);

//setup RecyclerView

RecyclerView recyclerViewGallery = (RecyclerView) findViewById(R.id.recyclerViewGallery);

recyclerViewGallery.setLayoutManager(new GridLayoutManager(this, 2));

//Create RecyclerView Adapter

mGalleryAdapter = new GalleryAdapter(this);

//set adapter to RecyclerView

recyclerViewGallery.setAdapter(mGalleryAdapter);

Beginning in Android 6.0 (API level 23), users grant permissions to apps while the app is running, not when they install the app. So we need to ask Read Storage permission before getting images from device or it will lead to crash. In following snippet we are first checking user already granted permission. Case 1 : User already granted permission we will query images from Device storage. Now case 2 : when if user is launching app for first time then permission is not given yet so ask for permission.

        //check for read storage permission
        if (ContextCompat.checkSelfPermission(this, Manifest.permission.READ_EXTERNAL_STORAGE) == PackageManager.PERMISSION_GRANTED) {
            //Get images
            galleryItems = GalleryUtils.getImages(this);
            // add images to gallery recyclerview using adapter
            mGalleryAdapter.addGalleryItems(galleryItems);
        } else {
            //request permission
            ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.READ_EXTERNAL_STORAGE}, RC_READ_STORAGE);
        }

//check for read storage permission

if (ContextCompat.checkSelfPermission(this, Manifest.permission.READ_EXTERNAL_STORAGE) == PackageManager.PERMISSION_GRANTED) {

//Get images

galleryItems = GalleryUtils.getImages(this);

// add images to gallery recyclerview using adapter

mGalleryAdapter.addGalleryItems(galleryItems);

} else {

//request permission

ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.READ_EXTERNAL_STORAGE}, RC_READ_STORAGE);

}

After asking permission we will get result of permission in onRequestPermissionsResult() method. Check result. Case 1 : user granted permission then query images. Case 2 : user denied permission then show error message to user or handle it accordingly following piece of code handles result of permission.

 @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);
        if (requestCode == RC_READ_STORAGE) {
            if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                //Get images
                galleryItems = GalleryUtils.getImages(this);
                // add images to gallery recyclerview using adapter
                mGalleryAdapter.addGalleryItems(galleryItems);
            } else {
                Toast.makeText(this, "Storage Permission denied", Toast.LENGTH_SHORT).show();
            }
        }
    }

@Override

public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {

super.onRequestPermissionsResult(requestCode, permissions, grantResults);

if (requestCode == RC_READ_STORAGE) {

if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {

//Get images

galleryItems = GalleryUtils.getImages(this);

// add images to gallery recyclerview using adapter

mGalleryAdapter.addGalleryItems(galleryItems);

} else {

Toast.makeText(this, "Storage Permission denied", Toast.LENGTH_SHORT).show();

}

Building Full Screen Dialogue

10. Now when user will select any image from above grid we will launch full screen dialogue fragment. This dialogue will contain ViewPager to display selected image. Also ViewPager will help to load next or previous image on screen swipes. This dialogue also contains horizontal Recyclerview strip in which we will load small size thumbnails of all images so that user does not have to go back to select another image. Now first we will prepare our ViewPager Adapter and Horizontal Recyclerview strip Adapter. Create new layout -> pager_item.xml this layout will contain ImageView.

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitCenter"
    android:id="@+id/imageViewThumbnail"
    android:orientation="vertical">

</ImageView>

<?xml version="1.0" encoding="utf-8"?>

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="fitCenter"

android:id="@+id/imageViewThumbnail"

android:orientation="vertical">

</ImageView>

11.Create new class Package name -> SlideShowPagerAdapter.java this class will serve as Adpater for viewpager

package com.loopwiki.androidmaterialgallery;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;

import java.io.File;
import java.util.List;

/**
 * Created by amardeep on 11/3/2017.
 */

public class SlideShowPagerAdapter extends PagerAdapter {

    Context mContext;
    //Layout inflater
    LayoutInflater mLayoutInflater;
    //list of Gallery Items
    List<GalleryItem> galleryItems;

    public SlideShowPagerAdapter(Context context, List<GalleryItem> galleryItems) {
        mContext = context;
        mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        //set galleryItems
        this.galleryItems = galleryItems;
    }

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

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View itemView = mLayoutInflater.inflate(R.layout.pager_item, container, false);
        ImageView imageView = (ImageView) itemView.findViewById(R.id.imageViewThumbnail);
        //load current image in viewpager
        Picasso.with(mContext).load(new File(galleryItems.get(position).imageUri)).fit().into(imageView);
        container.addView(itemView);
        return itemView;
    }

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

}

package com.loopwiki.androidmaterialgallery;

import android.content.Context;

import android.support.v4.view.PagerAdapter;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import com.squareup.picasso.Picasso;

import java.io.File;

import java.util.List;

/**

* Created by amardeep on 11/3/2017.

public class SlideShowPagerAdapter extends PagerAdapter {

Context mContext;

//Layout inflater

LayoutInflater mLayoutInflater;

//list of Gallery Items

List<GalleryItem> galleryItems;

public SlideShowPagerAdapter(Context context, List<GalleryItem> galleryItems) {

mContext = context;

mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

//set galleryItems

this.galleryItems = galleryItems;

}

@Override

public int getCount() {

return galleryItems.size();

}

@Override

public boolean isViewFromObject(View view, Object object) {

return view == ((ImageView) object);

}

@Override

public Object instantiateItem(ViewGroup container, int position) {

View itemView = mLayoutInflater.inflate(R.layout.pager_item, container, false);

ImageView imageView = (ImageView) itemView.findViewById(R.id.imageViewThumbnail);

//load current image in viewpager

Picasso.with(mContext).load(new File(galleryItems.get(position).imageUri)).fit().into(imageView);

container.addView(itemView);

return itemView;

}

@Override

public void destroyItem(ViewGroup container, int position, Object object) {

container.removeView((ImageView) object);

}

12. Create new layout -> custom_row_gallery_strip_item.xml. This is structure of single item in horizontal Recyclerview strip.

<?xml version="1.0" encoding="utf-8"?>
<com.loopwiki.androidmaterialgallery.SquareLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/squareLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/imageViewThumbnail"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:padding="2dp"
        android:scaleType="fitXY" />


</com.loopwiki.androidmaterialgallery.SquareLayout>

<?xml version="1.0" encoding="utf-8"?>

<com.loopwiki.androidmaterialgallery.SquareLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/squareLayout"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

<ImageView

android:id="@+id/imageViewThumbnail"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_centerInParent="true"

android:padding="2dp"

android:scaleType="fitXY" />

</com.loopwiki.androidmaterialgallery.SquareLayout>

12. Now we need to create Adapter for Horizontal Recyclerview Strip. Create new class Package name -> GalleryStripAdapter.java this class will serve as adapter for horizontal strip Recyclerview.

package com.loopwiki.androidmaterialgallery;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.media.ThumbnailUtils;
import android.support.v4.content.ContextCompat;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;


import java.util.List;


public class GalleryStripAdapter extends RecyclerView.Adapter {
    //Declare list of GalleryItems
    List<GalleryItem> galleryItems;
    Context context;
    GalleryStripCallBacks mStripCallBacks;
    GalleryItem mCurrentSelected;

    public GalleryStripAdapter(List<GalleryItem> galleryItems, Context context, GalleryStripCallBacks StripCallBacks, int CurrentPosition) {
        //set galleryItems
        this.galleryItems = galleryItems;
        this.context = context;
        //set stripcallbacks
        this.mStripCallBacks = StripCallBacks;
        //set current selected
        mCurrentSelected = galleryItems.get(CurrentPosition);
        //set current selected item as selected
        mCurrentSelected.isSelected = true;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(context);
        View row = inflater.inflate(R.layout.custom_row_gallery_strip_item, parent, false);
        SquareLayout squareLayout = row.findViewById(R.id.squareLayout);
        return new GalleryStripItemHolder(squareLayout);
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
        //get Curent Gallery Item
        GalleryItem mCurrentItem = galleryItems.get(position);
        //get thumb square size 1/6 of screen width
        final int thumbSize = ScreenUtils.getScreenWidth(context) / 6;
        //cast holder to galleryStripItemHolder
        GalleryStripItemHolder galleryStripItemHolder = (GalleryStripItemHolder) holder;
        //get thumb size bitmap by using ThumbnailUtils
        Bitmap ThumbImage = ThumbnailUtils.extractThumbnail(BitmapFactory.decodeFile(mCurrentItem.imageUri),
                thumbSize, thumbSize);
        //set thumbnail
        galleryStripItemHolder.imageViewThumbnail.setImageBitmap(ThumbImage);
        //set current selected
        if (mCurrentItem.isSelected) {
            galleryStripItemHolder.imageViewThumbnail.setBackgroundColor(ContextCompat.getColor(context, android.R.color.white));
        } else {
            //value 0 removes any background color
            galleryStripItemHolder.imageViewThumbnail.setBackgroundColor(0);
        }
        galleryStripItemHolder.imageViewThumbnail.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //call onGalleryStripItemSelected on click and pass position
                mStripCallBacks.onGalleryStripItemSelected(position);
            }
        });
    }

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

    public class GalleryStripItemHolder extends RecyclerView.ViewHolder {
        ImageView imageViewThumbnail;

        public GalleryStripItemHolder(View itemView) {
            super(itemView);
            imageViewThumbnail = itemView.findViewById(R.id.imageViewThumbnail);
        }
    }

    //interface for communication on gallery strip interactions
    public interface GalleryStripCallBacks {
        void onGalleryStripItemSelected(int position);
    }

    //Method to highlight  selected item on gallery strip
    public void setSelected(int position) {
        //remove current selection
        mCurrentSelected.isSelected = false;
        //notify recyclerview that we changed  item to update its view
        notifyItemChanged(galleryItems.indexOf(mCurrentSelected));
        //select gallery item
        galleryItems.get(position).isSelected = true;
        //notify recyclerview that we changed  item to update its view
        notifyItemChanged(position);
        //set current selected
        mCurrentSelected = galleryItems.get(position);

    }

    //method to remove selection
    public void removeSelection() {
        mCurrentSelected.isSelected = false;
    }


}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

package com.loopwiki.androidmaterialgallery;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.media.ThumbnailUtils;

import android.support.v4.content.ContextCompat;

import android.support.v7.widget.RecyclerView;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import java.util.List;

public class GalleryStripAdapter extends RecyclerView.Adapter {

//Declare list of GalleryItems

List<GalleryItem> galleryItems;

Context context;

GalleryStripCallBacks mStripCallBacks;

GalleryItem mCurrentSelected;

public GalleryStripAdapter(List<GalleryItem> galleryItems, Context context, GalleryStripCallBacks StripCallBacks, int CurrentPosition) {

//set galleryItems

this.galleryItems = galleryItems;

this.context = context;

//set stripcallbacks

this.mStripCallBacks = StripCallBacks;

//set current selected

mCurrentSelected = galleryItems.get(CurrentPosition);

//set current selected item as selected

mCurrentSelected.isSelected = true;

}

@Override

public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

LayoutInflater inflater = LayoutInflater.from(context);

View row = inflater.inflate(R.layout.custom_row_gallery_strip_item, parent, false);

SquareLayout squareLayout = row.findViewById(R.id.squareLayout);

return new GalleryStripItemHolder(squareLayout);

}

@Override

public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {

//get Curent Gallery Item

GalleryItem mCurrentItem = galleryItems.get(position);

//get thumb square size 1/6 of screen width

final int thumbSize = ScreenUtils.getScreenWidth(context) / 6;

//cast holder to galleryStripItemHolder

GalleryStripItemHolder galleryStripItemHolder = (GalleryStripItemHolder) holder;

//get thumb size bitmap by using ThumbnailUtils

Bitmap ThumbImage = ThumbnailUtils.extractThumbnail(BitmapFactory.decodeFile(mCurrentItem.imageUri),

thumbSize, thumbSize);

//set thumbnail

galleryStripItemHolder.imageViewThumbnail.setImageBitmap(ThumbImage);

//set current selected

if (mCurrentItem.isSelected) {

galleryStripItemHolder.imageViewThumbnail.setBackgroundColor(ContextCompat.getColor(context, android.R.color.white));

} else {

//value 0 removes any background color

galleryStripItemHolder.imageViewThumbnail.setBackgroundColor(0);

}

galleryStripItemHolder.imageViewThumbnail.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

//call onGalleryStripItemSelected on click and pass position

mStripCallBacks.onGalleryStripItemSelected(position);

}

});

}

@Override

public int getItemCount() {

return galleryItems.size();

}

public class GalleryStripItemHolder extends RecyclerView.ViewHolder {

ImageView imageViewThumbnail;

public GalleryStripItemHolder(View itemView) {

super(itemView);

imageViewThumbnail = itemView.findViewById(R.id.imageViewThumbnail);

}

//interface for communication on gallery strip interactions

public interface GalleryStripCallBacks {

void onGalleryStripItemSelected(int position);

}

//Method to highlight selected item on gallery strip

public void setSelected(int position) {

//remove current selection

mCurrentSelected.isSelected = false;

//notify recyclerview that we changed item to update its view

notifyItemChanged(galleryItems.indexOf(mCurrentSelected));

//select gallery item

galleryItems.get(position).isSelected = true;

//notify recyclerview that we changed item to update its view

notifyItemChanged(position);

//set current selected

mCurrentSelected = galleryItems.get(position);

}

//method to remove selection

public void removeSelection() {

mCurrentSelected.isSelected = false;

}

Breaking GalleryStripAdapter

Following code will create small thumbnail and set it to ImageView.

  //get Curent Gallery Item
        GalleryItem mCurrentItem = galleryItems.get(position);
        //get thumb square size 1/6 of screen width
        final int thumbSize = ScreenUtils.getScreenWidth(context) / 6;
        //cast holder to galleryStripItemHolder
        GalleryStripItemHolder galleryStripItemHolder = (GalleryStripItemHolder) holder;
        //get thumb size bitmap by using ThumbnailUtils
        Bitmap ThumbImage = ThumbnailUtils.extractThumbnail(BitmapFactory.decodeFile(mCurrentItem.imageUri),
                thumbSize, thumbSize);
        //set thumbnail
        galleryStripItemHolder.imageViewThumbnail.setImageBitmap(ThumbImage);

//get Curent Gallery Item

GalleryItem mCurrentItem = galleryItems.get(position);

//get thumb square size 1/6 of screen width

final int thumbSize = ScreenUtils.getScreenWidth(context) / 6;

//cast holder to galleryStripItemHolder

GalleryStripItemHolder galleryStripItemHolder = (GalleryStripItemHolder) holder;

//get thumb size bitmap by using ThumbnailUtils

Bitmap ThumbImage = ThumbnailUtils.extractThumbnail(BitmapFactory.decodeFile(mCurrentItem.imageUri),

thumbSize, thumbSize);

//set thumbnail

galleryStripItemHolder.imageViewThumbnail.setImageBitmap(ThumbImage);

Now when user will select any image then we need to highlight that item on Horizontal Recyclerview Strip for that we used following snippets

if (mCurrentItem.isSelected) {
            galleryStripItemHolder.imageViewThumbnail.setBackgroundColor(ContextCompat.getColor(context, android.R.color.white));
        } else {
            //value 0 removes any background color
            galleryStripItemHolder.imageViewThumbnail.setBackgroundColor(0);
        }

if (mCurrentItem.isSelected) {

galleryStripItemHolder.imageViewThumbnail.setBackgroundColor(ContextCompat.getColor(context, android.R.color.white));

} else {

//value 0 removes any background color

galleryStripItemHolder.imageViewThumbnail.setBackgroundColor(0);

}

But when user will select any other image on Horizontal Recyclerview Strip then we have change selected image highlight and done by using following code

 //Method to highlight  selected item on gallery strip
    public void setSelected(int position) {
        //remove current selection
        mCurrentSelected.isSelected = false;
        //notify recyclerview that we changed  item to update its view
        notifyItemChanged(galleryItems.indexOf(mCurrentSelected));
        //select gallery item
        galleryItems.get(position).isSelected = true;
        //notify recyclerview that we changed  item to update its view
        notifyItemChanged(position);
        //set current selected
        mCurrentSelected = galleryItems.get(position);

    }

//Method to highlight selected item on gallery strip

public void setSelected(int position) {

//remove current selection

mCurrentSelected.isSelected = false;

//notify recyclerview that we changed item to update its view

notifyItemChanged(galleryItems.indexOf(mCurrentSelected));

//select gallery item

galleryItems.get(position).isSelected = true;

//notify recyclerview that we changed item to update its view

notifyItemChanged(position);

//set current selected

mCurrentSelected = galleryItems.get(position);

}

13. Seems our adapters and layout are ready now will create Full screen dialogue fragment. Create new layout -> fragment_silde_show.xml. Add ViewPager and at bottom add Recyclerview.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.loopwiki.androidmaterialgallery.SlideShowFragment">

<!--Viewpager to show slideshow of images-->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPagerGallery"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/recyclerViewGalleryStrip" />
<!--Image name textview-->
    <TextView
        android:id="@+id/textViewImageName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/recyclerViewGalleryStrip"
        android:background="#aa000000"
        android:ellipsize="end"
        android:gravity="center_horizontal"
        android:padding="16dp"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium" />

        <!--Gallery strip Recyclerview-->
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerViewGalleryStrip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" />

</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context="com.loopwiki.androidmaterialgallery.SlideShowFragment">

<android.support.v4.view.ViewPager

android:id="@+id/viewPagerGallery"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_above="@+id/recyclerViewGalleryStrip" />

<TextView

android:id="@+id/textViewImageName"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_above="@+id/recyclerViewGalleryStrip"

android:background="#aa000000"

android:ellipsize="end"

android:gravity="center_horizontal"

android:padding="16dp"

android:textAppearance="@style/TextAppearance.AppCompat.Medium" />

<android.support.v7.widget.RecyclerView

android:id="@+id/recyclerViewGalleryStrip"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true" />

</RelativeLayout>

14. Create new class Package name -> SlideShowFragment.java. This dialogue will get launched when user will select image.

package com.loopwiki.androidmaterialgallery;


import android.os.Bundle;
import android.support.v4.app.DialogFragment;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;


//Remember to implement  GalleryStripAdapter.GalleryStripCallBacks to fragment  for communication of fragment and GalleryStripAdapter
public class SlideShowFragment extends DialogFragment implements GalleryStripAdapter.GalleryStripCallBacks {
    //declare static variable which will serve as key of current position argument
    private static final String ARG_CURRENT_POSITION = "position";
    //Declare list of GalleryItems
    List<GalleryItem> galleryItems;
    //Deceleration of  Gallery Strip Adapter
    GalleryStripAdapter mGalleryStripAdapter;
    // //Deceleration of  Slide show View Pager Adapter
    SlideShowPagerAdapter mSlideShowPagerAdapter;
    //Deceleration of viewPager
    ViewPager mViewPagerGallery;
    TextView textViewImageName;
    RecyclerView recyclerViewGalleryStrip;

    private int mCurrentPosition;
    //set bottom to visible of first load
    boolean isBottomBarVisible = true;


    public SlideShowFragment() {
        // Required empty public constructor
    }

    //This method will create new instance of SlideShowFragment
    public static SlideShowFragment newInstance(int position) {
        SlideShowFragment fragment = new SlideShowFragment();
        //Create bundle
        Bundle args = new Bundle();
        //put Current Position in the bundle
        args.putInt(ARG_CURRENT_POSITION, position);
        //set arguments of SlideShowFragment
        fragment.setArguments(args);
        //return fragment instance
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //initialise GalleryItems List
        galleryItems = new ArrayList<>();
        if (getArguments() != null) {
            //get Current selected position from arguments
            mCurrentPosition = getArguments().getInt(ARG_CURRENT_POSITION);
            //get GalleryItems from activity
            galleryItems = ((MainActivity) getActivity()).galleryItems;
        }

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        final View view = inflater.inflate(R.layout.fragment_silde_show, container, false);
        mViewPagerGallery = view.findViewById(R.id.viewPagerGallery);
        // set On Touch Listener on mViewPagerGallery to hide show bottom bar
        mViewPagerGallery.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
                    if (isBottomBarVisible) {
                        //bottom bar is visible make it invisible
                        FadeOutBottomBar();
                    } else {
                        //bottom bar is invisible make it visible
                        FadeInBottomBar();
                    }
                }
                return false;
            }

        });
        textViewImageName = view.findViewById(R.id.textViewImageName);
        //Initialise View Pager Adapter
        mSlideShowPagerAdapter = new SlideShowPagerAdapter(getContext(), galleryItems);
        //set adapter to Viewpager
        mViewPagerGallery.setAdapter(mSlideShowPagerAdapter);
        recyclerViewGalleryStrip = view.findViewById(R.id.recyclerViewGalleryStrip);
        //Create GalleryStripRecyclerView's Layout manager
        final RecyclerView.LayoutManager mGalleryStripLayoutManger = new LinearLayoutManager(getContext(), LinearLayoutManager.HORIZONTAL, false);
        //set layout manager of GalleryStripRecyclerView
        recyclerViewGalleryStrip.setLayoutManager(mGalleryStripLayoutManger);
        //Create GalleryStripRecyclerView's Adapter
        mGalleryStripAdapter = new GalleryStripAdapter(galleryItems, getContext(), this, mCurrentPosition);
        //set Adapter of GalleryStripRecyclerView
        recyclerViewGalleryStrip.setAdapter(mGalleryStripAdapter);
        //tell viewpager to open currently selected item and pass position of current item
        mViewPagerGallery.setCurrentItem(mCurrentPosition);
        //set image name textview's text according to position
        textViewImageName.setText(galleryItems.get(mCurrentPosition).imageName);
        //Add OnPageChangeListener to viewpager to handle page changes
        mViewPagerGallery.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //set image name textview's text on any page selected
                textViewImageName.setText(galleryItems.get(position).imageName);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                //first check When Page is scrolled and gets stable
                if (state == ViewPager.SCROLL_STATE_IDLE) {
                    //get current  item on view pager
                    int currentSelected = mViewPagerGallery.getCurrentItem();
                    //scroll strip smoothly to current  position of viewpager
                    mGalleryStripLayoutManger.smoothScrollToPosition(recyclerViewGalleryStrip, null, currentSelected);
                    //select current item of viewpager on gallery strip at bottom
                    mGalleryStripAdapter.setSelected(currentSelected);

                }

            }
        });
        return view;
    }

    //Overridden method by GalleryStripAdapter.GalleryStripCallBacks for communication on gallery strip item selected
    @Override
    public void onGalleryStripItemSelected(int position) {
        //set current item of viewpager
        mViewPagerGallery.setCurrentItem(position);
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        //remove selection on destroy
        mGalleryStripAdapter.removeSelection();
    }

    //Method to fadeIn bottom bar which is image textview name
    public void FadeInBottomBar() {
        //define alpha animation
        AlphaAnimation fadeIn = new AlphaAnimation(0.0f, 1.0f);
        //set duration
        fadeIn.setDuration(1200);
        //set animation listener
        fadeIn.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                //set textview visible on animation ends
                textViewImageName.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        //start animation
        textViewImageName.startAnimation(fadeIn);
        isBottomBarVisible = true;
    }

    public void FadeOutBottomBar() {
        //define alpha animation
        AlphaAnimation fadeOut = new AlphaAnimation(1.0f, 0.0f);
        //set duration
        fadeOut.setDuration(1200);
        //set animation listener
        fadeOut.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                //set textview Visibility gone on animation ends
                textViewImageName.setVisibility(View.GONE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        //start animation
        textViewImageName.startAnimation(fadeOut);
        isBottomBarVisible = false;

    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

package com.loopwiki.androidmaterialgallery;

import android.os.Bundle;

import android.support.v4.app.DialogFragment;

import android.support.v4.app.Fragment;

import android.support.v4.view.ViewPager;

import android.support.v7.widget.LinearLayoutManager;

import android.support.v7.widget.RecyclerView;

import android.view.LayoutInflater;

import android.view.MotionEvent;

import android.view.View;

import android.view.ViewGroup;

import android.view.animation.AlphaAnimation;

import android.view.animation.Animation;

import android.widget.TextView;

import java.util.ArrayList;

import java.util.List;

//Remember to implement GalleryStripAdapter.GalleryStripCallBacks to fragment for communication of fragment and GalleryStripAdapter

public class SlideShowFragment extends DialogFragment implements GalleryStripAdapter.GalleryStripCallBacks {

//declare static variable which will serve as key of current position argument

private static final String ARG_CURRENT_POSITION = "position";

//Declare list of GalleryItems

List<GalleryItem> galleryItems;

//Deceleration of Gallery Strip Adapter

GalleryStripAdapter mGalleryStripAdapter;

// //Deceleration of Slide show View Pager Adapter

SlideShowPagerAdapter mSlideShowPagerAdapter;

//Deceleration of viewPager

ViewPager mViewPagerGallery;

TextView textViewImageName;

RecyclerView recyclerViewGalleryStrip;

private int mCurrentPosition;

//set bottom to visible of first load

boolean isBottomBarVisible = true;

public SlideShowFragment() {

// Required empty public constructor

}

//This method will create new instance of SlideShowFragment

public static SlideShowFragment newInstance(int position) {

SlideShowFragment fragment = new SlideShowFragment();

//Create bundle

Bundle args = new Bundle();

//put Current Position in the bundle

args.putInt(ARG_CURRENT_POSITION, position);

//set arguments of SlideShowFragment

fragment.setArguments(args);

//return fragment instance

return fragment;

}

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

//initialise GalleryItems List

galleryItems = new ArrayList<>();

if (getArguments() != null) {

//get Current selected position from arguments

mCurrentPosition = getArguments().getInt(ARG_CURRENT_POSITION);

//get GalleryItems from activity

galleryItems = ((MainActivity) getActivity()).galleryItems;

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

final View view = inflater.inflate(R.layout.fragment_silde_show, container, false);

mViewPagerGallery = view.findViewById(R.id.viewPagerGallery);

// set On Touch Listener on mViewPagerGallery to hide show bottom bar

mViewPagerGallery.setOnTouchListener(new View.OnTouchListener() {

@Override

public boolean onTouch(View view, MotionEvent motionEvent) {

if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {

if (isBottomBarVisible) {

//bottom bar is visible make it invisible

FadeOutBottomBar();

} else {

//bottom bar is invisible make it visible

FadeInBottomBar();

}

return false;

}

});

textViewImageName = view.findViewById(R.id.textViewImageName);

//Initialise View Pager Adapter

mSlideShowPagerAdapter = new SlideShowPagerAdapter(getContext(), galleryItems);

//set adapter to Viewpager

mViewPagerGallery.setAdapter(mSlideShowPagerAdapter);

recyclerViewGalleryStrip = view.findViewById(R.id.recyclerViewGalleryStrip);

//Create GalleryStripRecyclerView's Layout manager

final RecyclerView.LayoutManager mGalleryStripLayoutManger = new LinearLayoutManager(getContext(), LinearLayoutManager.HORIZONTAL, false);

//set layout manager of GalleryStripRecyclerView

recyclerViewGalleryStrip.setLayoutManager(mGalleryStripLayoutManger);

//Create GalleryStripRecyclerView's Adapter

mGalleryStripAdapter = new GalleryStripAdapter(galleryItems, getContext(), this, mCurrentPosition);

//set Adapter of GalleryStripRecyclerView

recyclerViewGalleryStrip.setAdapter(mGalleryStripAdapter);

//tell viewpager to open currently selected item and pass position of current item

mViewPagerGallery.setCurrentItem(mCurrentPosition);

//set image name textview's text according to position

textViewImageName.setText(galleryItems.get(mCurrentPosition).imageName);

//Add OnPageChangeListener to viewpager to handle page changes

mViewPagerGallery.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override

public void onPageSelected(int position) {

//set image name textview's text on any page selected

textViewImageName.setText(galleryItems.get(position).imageName);

}

@Override

public void onPageScrollStateChanged(int state) {

//first check When Page is scrolled and gets stable

if (state == ViewPager.SCROLL_STATE_IDLE) {

//get current item on view pager

int currentSelected = mViewPagerGallery.getCurrentItem();

//scroll strip smoothly to current position of viewpager

mGalleryStripLayoutManger.smoothScrollToPosition(recyclerViewGalleryStrip, null, currentSelected);

//select current item of viewpager on gallery strip at bottom

mGalleryStripAdapter.setSelected(currentSelected);

}

});

return view;

}

//Overridden method by GalleryStripAdapter.GalleryStripCallBacks for communication on gallery strip item selected

@Override

public void onGalleryStripItemSelected(int position) {

//set current item of viewpager

mViewPagerGallery.setCurrentItem(position);

}

@Override

public void onDestroyView() {

super.onDestroyView();

//remove selection on destroy

mGalleryStripAdapter.removeSelection();

}

//Method to fadeIn bottom bar which is image textview name

public void FadeInBottomBar() {

//define alpha animation

AlphaAnimation fadeIn = new AlphaAnimation(0.0f, 1.0f);

//set duration

fadeIn.setDuration(1200);

//set animation listener

fadeIn.setAnimationListener(new Animation.AnimationListener() {

@Override

public void onAnimationStart(Animation animation) {

}

@Override

public void onAnimationEnd(Animation animation) {

//set textview visible on animation ends

textViewImageName.setVisibility(View.VISIBLE);

}

@Override

public void onAnimationRepeat(Animation animation) {

}

});

//start animation

textViewImageName.startAnimation(fadeIn);

isBottomBarVisible = true;

}

public void FadeOutBottomBar() {

//define alpha animation

AlphaAnimation fadeOut = new AlphaAnimation(1.0f, 0.0f);

//set duration

fadeOut.setDuration(1200);

//set animation listener

fadeOut.setAnimationListener(new Animation.AnimationListener() {

@Override

public void onAnimationStart(Animation animation) {

}

@Override

public void onAnimationEnd(Animation animation) {

//set textview Visibility gone on animation ends

textViewImageName.setVisibility(View.GONE);

}

@Override

public void onAnimationRepeat(Animation animation) {

}

});

//start animation

textViewImageName.startAnimation(fadeOut);

isBottomBarVisible = false;

}

Breaking SlideShowFragment

Following code is used to set visibility on and off with smooth animation of image name TextView on touching ViewPager

mViewPagerGallery.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
                    if (isBottomBarVisible) {
                        //bottom bar is visible make it invisible
                        FadeOutBottomBar();
                    } else {
                        //bottom bar is invisible make it visible
                        FadeInBottomBar();
                    }
                }
                return false;
            }

        });

 //Method to fadeIn bottom bar which is image textview name
    public void FadeInBottomBar() {
        //define alpha animation
        AlphaAnimation fadeIn = new AlphaAnimation(0.0f, 1.0f);
        //set duration
        fadeIn.setDuration(1200);
        //set animation listener
        fadeIn.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                //set textview visible on animation ends
                textViewImageName.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        //start animation
        textViewImageName.startAnimation(fadeIn);
        isBottomBarVisible = true;
    }

    public void FadeOutBottomBar() {
        //define alpha animation
        AlphaAnimation fadeOut = new AlphaAnimation(1.0f, 0.0f);
        //set duration
        fadeOut.setDuration(1200);
        //set animation listener
        fadeOut.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                //set textview Visibility gone on animation ends
                textViewImageName.setVisibility(View.GONE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        //start animation
        textViewImageName.startAnimation(fadeOut);
        isBottomBarVisible = false;

    }

mViewPagerGallery.setOnTouchListener(new View.OnTouchListener() {

@Override

public boolean onTouch(View view, MotionEvent motionEvent) {

if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {

if (isBottomBarVisible) {

//bottom bar is visible make it invisible

FadeOutBottomBar();

} else {

//bottom bar is invisible make it visible

FadeInBottomBar();

}

return false;

}

});

//Method to fadeIn bottom bar which is image textview name

public void FadeInBottomBar() {

//define alpha animation

AlphaAnimation fadeIn = new AlphaAnimation(0.0f, 1.0f);

//set duration

fadeIn.setDuration(1200);

//set animation listener

fadeIn.setAnimationListener(new Animation.AnimationListener() {

@Override

public void onAnimationStart(Animation animation) {

}

@Override

public void onAnimationEnd(Animation animation) {

//set textview visible on animation ends

textViewImageName.setVisibility(View.VISIBLE);

}

@Override

public void onAnimationRepeat(Animation animation) {

}

});

//start animation

textViewImageName.startAnimation(fadeIn);

isBottomBarVisible = true;

}

public void FadeOutBottomBar() {

//define alpha animation

AlphaAnimation fadeOut = new AlphaAnimation(1.0f, 0.0f);

//set duration

fadeOut.setDuration(1200);

//set animation listener

fadeOut.setAnimationListener(new Animation.AnimationListener() {

@Override

public void onAnimationStart(Animation animation) {

}

@Override

public void onAnimationEnd(Animation animation) {

//set textview Visibility gone on animation ends

textViewImageName.setVisibility(View.GONE);

}

@Override

public void onAnimationRepeat(Animation animation) {

}

});

//start animation

textViewImageName.startAnimation(fadeOut);

isBottomBarVisible = false;

}

Following is snippets used to handle Scrolling Horizontal Recyclerview Strip , selecting items on strip on ViewPager page changes and setting text of image name TextView on page changes of ViewPager

mViewPagerGallery.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //set image name textview's text on any page selected
                textViewImageName.setText(galleryItems.get(position).imageName);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                //first check When Page is scrolled and gets stable
                if (state == ViewPager.SCROLL_STATE_IDLE) {
                    //get current  item on view pager
                    int currentSelected = mViewPagerGallery.getCurrentItem();
                    //scroll strip smoothly to current  position of viewpager
                    mGalleryStripLayoutManger.smoothScrollToPosition(recyclerViewGalleryStrip, null, currentSelected);
                    //select current item of viewpager on gallery strip at bottom
                    mGalleryStripAdapter.setSelected(currentSelected);

                }

            }
        });

mViewPagerGallery.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override

public void onPageSelected(int position) {

//set image name textview's text on any page selected

textViewImageName.setText(galleryItems.get(position).imageName);

}

@Override

public void onPageScrollStateChanged(int state) {

//first check When Page is scrolled and gets stable

if (state == ViewPager.SCROLL_STATE_IDLE) {

//get current item on view pager

int currentSelected = mViewPagerGallery.getCurrentItem();

//scroll strip smoothly to current position of viewpager

mGalleryStripLayoutManger.smoothScrollToPosition(recyclerViewGalleryStrip, null, currentSelected);

//select current item of viewpager on gallery strip at bottom

mGalleryStripAdapter.setSelected(currentSelected);

}

});

15. Open values -> styles.xml. and paste following theme in it.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionBarOverlay">true</item>
    </style>

    <style name="AppTheme.Transparent" parent="AppTheme">
        <item name="windowActionBarOverlay">true</item>
    </style>

    <!--Full screen dialogue theme -->
    <style name="DialogFragmentTheme" parent="AppTheme.Transparent">
        <item name="android:paddingRight">0dp</item>
        <item name="android:paddingLeft">0dp</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:windowNoTitle">true</item>
    </style>


</resources>

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

</style>

<item name="android:layout_width">match_parent</item>

</style>

</resources>

Now create new style.xml which will apply for android API level 21 and greater (If you don’t know how to create this version files then take look at this nice answer on stack overflow Click here ). Add following styles to it

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionBarOverlay">true</item>
    </style>

    <style name="AppTheme.Transparent" parent="AppTheme">
        <item name="windowActionBarOverlay">true</item>

    </style>

    <!--Full screen dialogue theme -->
    <style name="DialogFragmentTheme" parent="AppTheme.Transparent">
        <item name="android:paddingRight">0dp</item>
        <item name="android:paddingLeft">0dp</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:windowNoTitle">true</item>
    </style>


</resources>

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

</style>

<item name="android:layout_width">match_parent</item>

</style>

</resources>

16.Open values -> colors.xml. and paste following colors in it.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
</resources>

<?xml version="1.0" encoding="utf-8"?>

</resources>

17.Open AndroidManifest.xml. and modify it as following. Remember to to add READ_EXTERNAL_STORAGE permission.

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

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:theme="@style/AppTheme.Transparent">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.loopwiki.androidmaterialgallery">

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

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:roundIcon="@mipmap/ic_launcher_round"

android:supportsRtl="true"

android:theme="@style/AppTheme">

<activity

android:name=".MainActivity"

android:theme="@style/AppTheme.Transparent">

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

20. Now run your application and see the results If you still have any queries, please post them in the comments section below, I will be happy to help you.

Share this post

Tags: gallery Material Design Picasso recyclerview

Amardeep Yadav

Hello there, My name is Amardeep founder of loopwiki.com. I have experience in many technologies like Android, Java, Php etc. In this variety of technologies, I love Android App Development. If you have any idea and you want me to develop for you then let’s have chat Email: [email protected]

Kalpesh Bhangare says:

January 5, 2018 at 12:43 pm

Thank you very much for this excellent tutorial. I have a question, How to make recyclerview scroll horizontally?

Reply
- Amardeep Yadav says:
  
  January 5, 2018 at 12:49 pm
  
  You can define orientation parameter while setting layout manager following is example
  LayoutManager layoutManager = new LinearLayoutManager(getContext(), LinearLayoutManager.HORIZONTAL, false);
  set this layout manager to recyclerview
  recyclerView.setLayoutManager(layoutManager);
  
  Reply
  - Rakib Hasan says:
    
    June 23, 2018 at 8:36 am
    
    Please sir, tell me how to add image link….
    
    Reply
Pyae Phone Kyaw says:

January 11, 2018 at 5:38 am

Hello,
Thank you for your tutorial. But when i install on my phone which is android version 7.0, it is not work as you shown in above video. Application is loading with gray screen and nothing happen.

Reply
- Amardeep Yadav says:
  
  January 11, 2018 at 5:56 am
  
  Hello mate, this application shows images from the Download directory. If it is not showing images then you probably don’t have any images in Download directory.
  
  Reply
Pyae Phone Kyaw says:

January 11, 2018 at 1:53 pm

Thank you bro. Now, i get it. Sorry for my mistake.

Reply
Bartz says:

April 26, 2018 at 3:53 am

So how do I import pictures in it? Thanks

Reply
- Tanzim says:
  
  May 11, 2018 at 4:25 am
  
  How can I use for it in mysql database. Please modify your source code and give me link.
  
  Reply
  - Amardeep Yadav says:
    
    June 7, 2018 at 6:45 pm
    
    You can create API to get data from your mysql and then load that images accordingly
    
    Reply
haftu says:

June 17, 2018 at 1:22 pm

thank its good tutorial . i want add another folder how to add folders like camera ,Bluetooth….. this program not support multiple folders please help me

Reply
- Amardeep Yadav says:
  
  August 27, 2018 at 5:17 pm
  
  you can create dynamic content just create adapter which will loop though all folders and you can fetch this in background using async tasks
  
  Reply
Ditto says:

August 25, 2018 at 12:44 pm

This is a great tutorial, but when I install this, the images are not stick together
according to this code .resize(ScreenUtils.getScreenWidth(context) / 2, ScreenUtils.getScreenHeight(context) / 3)
there are 2 pictures in a row, but the next two pictures are in next screen(scroll up by the screen height). I cannot figure out why….. There is a big gap between two rows, the size of the gap is the 2/3 screen height.

Reply
- Amardeep Yadav says:
  
  November 2, 2018 at 5:08 am
  
  You got the understanding remaining won’t matter cheers.
  
  Reply
Misbah says:

October 18, 2018 at 8:58 pm

How to get this same result using Firebase and Picasso. Please help. I have different categories and when an image from specific category is selected it will display like this.

Reply
- Misbah says:
  
  October 18, 2018 at 9:01 pm
  
  If possible make a full tutorial on this. Please.
  
  Reply
- Amardeep Yadav says:
  
  November 2, 2018 at 5:07 am
  
  Once again this tutorial is specially designed to show working of gallery android application. We can take this topics in our later tutorials
  
  Reply
John says:

November 12, 2018 at 5:23 pm

I tried your project but it doesnt load any image … i only see a blank screen

Reply

Create gallery android application – Android Picasso Image Library

You may also like...

17 Responses

Leave a Reply Cancel reply

Advertisements

Categories

Create gallery android application – Android Picasso Image Library

Download Code

Demo

How to use Picasso

How to create gallery android application

Breaking GalleryAdapter

Braking MainActivity

Building Full Screen Dialogue

Breaking GalleryStripAdapter

Breaking SlideShowFragment

You may also like...

#3 Android RecyclerView Tutorial – Layout Managers

How to Integrate Google Sign In into your Android Application

Android Login and Register with SQLite Database Tutorial

17 Responses

Leave a Reply Cancel reply

Advertisements

Categories