Asynchronously loading Image thumbnails in a GridView from an external (SD Card) storage using Media Content Providers in Android

In this article, we will see how to display the thumbnails of images stored in external ( SD Card ) storage. The thumbnails are loaded to the gridview using loaders and media content providers. The loaders are used to asynchronously load gridview with images.

An extension to this application is discussed in the article “Loading thumbnail Images in a GridView and Opening original images in AlertDialog using Media Content Providers“

The application discussed in this article is developed using Eclipse  IDE ( 4.2.0 ) with ADT plugin ( 20.0.3 ) and Android SDK ( R20.0.3 ) .

1. Create new Android application project titled “GridViewLoadImages”

Figure 1 : Create new Android application project

2. Design application launcher icon

Figure 2 : Design Application Launcher Icon

3. Create a blank activity

Figure 3 : Create a blank Activity

4. Enter MainActivity details

Figure 4 : Enter MainActivity Details

5. Update the file res/values/strings.xml

<resources>
    <string name="app_name">GridViewLoadImages</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">Loading GridView with Images</string>
    <string name="img_description">Image Description</string>
</resources>

6. Update the MainActivity layout file res/layout/activity_main.xml

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/gridview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
/>

7. Create and update the layout file res/layout/gridview.xml with the given below code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/img"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:contentDescription="@string/img_description"
        android:padding="10dp"
        android:adjustViewBounds="true"
    />
</LinearLayout>

8. Update the class MainActivity in the file src/in/wptrafficanalyzer/gridviewloadimages/MainActivity.java

package in.wptrafficanalyzer.gridviewloadimages;

import android.database.Cursor;
import android.net.Uri;
import android.os.Bundle;
import android.provider.MediaStore;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.LoaderManager.LoaderCallbacks;
import android.support.v4.content.CursorLoader;
import android.support.v4.content.Loader;
import android.support.v4.widget.SimpleCursorAdapter;
import android.view.Menu;
import android.widget.GridView;

public class MainActivity extends FragmentActivity implements LoaderCallbacks<Cursor>{

    SimpleCursorAdapter mAdapter;

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

        /** Getting a reference to gridview of the MainActivity layout */
        GridView gridView = (GridView) findViewById(R.id.gridview);

        /** Create an adapter for the gridview */
        /** This adapter defines the data and the layout for the grid view */
        mAdapter = new SimpleCursorAdapter(
            getBaseContext(),
            R.layout.gridview,
            null,
            new String[] { "_data"} ,
            new int[] { R.id.img},
            0
        );

        /** Setting adapter for the gridview */
        gridView.setAdapter(mAdapter);

        /** Loader to get images from the SD Card */
        getSupportLoaderManager().initLoader(0, null, this);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

    /** A callback method invoked by the loader when initLoader() is called */
    @Override
    public Loader<Cursor> onCreateLoader(int arg0, Bundle arg1) {
        Uri uri = MediaStore.Images.Thumbnails.EXTERNAL_CONTENT_URI;
        return new CursorLoader(this, uri, null, null, null, null);
    }

    /** A callback method, invoked after the requested content provider returned all the data */
    @Override
    public void onLoadFinished(Loader<Cursor> arg0, Cursor arg1) {
        mAdapter.swapCursor(arg1);
    }

    @Override
    public void onLoaderReset(Loader<Cursor> arg0) {
        // TODO Auto-generated method stub

    }
}

9. Screenshot of the application

Figure 5 : Asynchronously loaded images from SD Card

10. Download

Asynchronously loading Image thumbnails in a GridView from an external (SD Card) storage using Media Content Providers in Android 688.62 KB

Download Full Source Code

11. Reference

http://developer.android.com/guide/index.html

How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com

---

Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :

---

Tags: asynchronous, content provider, CursorLoader, GridView, image, ImageVIew, MediaStore, SimpleCursorAdapter, thumbnail