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

August 20, 2012
By

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”

Create new Android application project

Figure 1 : Create new Android application project


2. Design application launcher icon

Design Application Launcher Icon

Figure 2 : Design Application Launcher Icon


3. Create a blank activity

Create a blank Activity

Figure 3 : Create a blank Activity


4. Enter MainActivity details

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

Asynchronously loaded images from SD Card

Figure 5 : Asynchronously loaded images from SD Card


10. Download


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

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

  1. MO on August 26, 2012 at 2:05 am

    i did exactly what you did. but it dosent load the images

  2. anand rai on December 15, 2012 at 11:04 am

    great! Its totally Working but images in grid view are different size.

    • S.Kale on July 18, 2014 at 6:52 pm

      try scaling the image before setting the image in the gridview.
      use
      imageView.setImageBitmap(Bitmap.createScaledBitmap(BitmapFactory.decodeFile(path), reqWidth, reqHeight, false));

  3. Jinal Jogiyani on June 24, 2013 at 3:29 pm

    I got class not found run time error…!! I downloaded full code of app.

  4. zerouno on October 29, 2013 at 12:16 pm

    Hello,
    how to use this for load image from my server?

    Thanks.

  5. Sankar on March 19, 2015 at 1:58 pm

    How to set specific path …

Leave a Reply

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

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner