Using the Universal Image Loader to populate a GridView

Universal Image Loader Library UIL Grid icon

The Universal Image Loader or UIL is a Library that you can include in your apps to take care of your images.

The Universal Image Loader Library:

  • Asynchronously downloads and loads your images for you
  • Caches the images in memory and on disk for you
  • Displays the images for you
  • Uses multithreading
  • You can configure it to suite your needs
  • You can set options for each image display
  • It's Free and Open Source

King of the Universe: The Universal Image Loader Library and you

Universal Image Loader Library list icon

So what is the Universal Image Loader Library?

The Universal Image Loader or UIL is a Library that you can include in your apps to take care of your images.

The Universal Image Loader Library:

  • Asynchronously downloads and loads your images for you
  • Caches the images in memory and on disk for you
  • Displays the images for you
  • Uses multithreading
  • You can configure it to suite your needs
  • You can set options for each image display
  • It's Free and Open Source

What are Adapters?

adapters icon

Adapters are the link between a set of data and the AdapterView that displays the data.

AdapterView

AdapterViews are ViewGroups that display child views given to it by an adapter. An example of an AdapterView is a ListView.

Adapters also provide the child views that display the data in the AdapterView. Adapters are responsible for supplying the data and creating the views representing each item.

Using the Picasso Library to load images into a GridView

Android GridView icon

A GridView is a ViewGroup. It lets you show stuff in a two-dimensional grid. You can scroll the grid if there are too many items to fit on the screen.

You can control the look of the grid either dynamically or in xml.

You use a ListAdapter to load the data into the grid.

Working with images can use a lot of memory and can cause your app to hang. Our tutorial will show you how easy it is to use the Picasso Library, which is Open Source and FREE, to efficiently load your images into a grid view.

Using Bitmaps efficiently

Using Images without killing your app

Android Bitmaps picasso list icon

Images take time to download and display. They can make your app unresponsive, especially when using them in list views, grid views and view pagers.

The solution is to download and process them off the main thread. Then resize and cache them for faster loading.

This takes quite a bit of coding, but there’s a simpler solution!

This tutorial will show you how to use the (FREE) Picasso Library to take care of everything for you. You just add one line of code! It couldn’t be easier!

Loading the Picasso library into your Android Studio project

Picasso is a powerful image downloading and caching library package which you include in your app build. It simplifies working with images, reducing the code that you need to use to one line of code.

Picasso is fast and easy to use.

Picasso takes care of all your image processing for you. It can also download images. 

We're using the Picasso Library in one of our tutorials. If you need help loading the library into your Android Studio project, then here's a quick tutorial for you.

Drawer Navigation

Using Navigation Drawers in your apps

Drawer Navigation drawer icon

The Navigation Drawer is a panel where you can put your navigation options. The panel is hidden off-screen and displays when the user swipes it onto the screen.

You can also use the app icon as a button to open and close the drawer.

Swipe View Tutorial

Using Swipe Views to swop pages

Android Swipe Views icon

Swipe views allow you to change pages by swiping your finger across the screen.

You create Swipe views by using a page viewer and an adapter. The adapter supplies the pages and the page viewer takes care of moving the pages on and off the screen.

We’re using a ViewPager. It’s a layout manager that takes care of the horizontal scrolling. Usually it’s used with fragments, scrolling them on and off screen.

We’re also going to need a page adapter to supply the pages to the ViewPager.

As we’re using fragments, we have two adapter options:

  • FragmentPagerAdapter – represents each page as a fragment. The fragment is kept in the fragment manager while it’s still possible that it may be used. This adapter is best used for a small number of fragments. It can use lot of memory as fragments are kept in memory while not displayed
  • FragmentStatePagerAdapter – uses fragments to manage the pages. It also saves and restores the fragment’s state. It’s useful for a large number of pages as it uses less memory. Only the state of the fragment is kept in memory and not the whole fragment. It may be a bit slow switching between pages due to it first having to restore their state

We’re going to use the FragmentStatePagerAdapter.

Tab navigation tutorial

Using Tab navigation in your apps

Android Tabs navigation icon

Tab buttons are displayed in the Action Bar. You can also use images instead of buttons or even your own custom views.

Tabs are designed to work with fragments. Use them to swop fragments in your activities.

We’ll show you how to use Tabs to swop fragments in your activity.

Using fragments to rebuild your activities

Android configuration change and ragments icon

An activity is destroyed and recreated when a device’s configuration changes.

Usually the activity’s lifecycle takes care of saving and restoring its state. Sometimes you may need to restore lots of data. This could take some time resulting in a bad user experience.

Here’s where you can use fragments to retain an instance of your data. You can then get the data out of the fragment and rebuild your activity, super fast!

Be careful not to save objects that are tied to the activity; such as drawables, adapters, views or any other objects associated with a context. They’ll cause memory leaks – the object keeps a reference to the context (the activity for example), so it will remain in memory, leaving less for your app to use.

Have a look how easy it is to use a fragment to save an Object during a configuration change!