Create gallery android application – Android Picasso Image Library

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.

 

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

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

 

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

 

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.

 

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.

 

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.

 

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.

 

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

Breaking GalleryAdapter

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

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.

 

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

Create new class under Package name -> MainActivity.java

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 )

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.

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.

create gallery android application gallery view screen

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.

 

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

 

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

 

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.

Breaking GalleryStripAdapter

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

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

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

 

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.

 

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

Breaking SlideShowFragment

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

 

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

create gallery android application output screen slideshow fragment

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

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

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

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

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

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]

5 Comments

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

  • Pyae Phone Kyaw

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *