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”
2. Design application launcher icon
3. Create a blank activity
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
10. Download

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

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
i did exactly what you did. but it dosent load the images
great! Its totally Working but images in grid view are different size.
try scaling the image before setting the image in the gridview.
use
imageView.setImageBitmap(Bitmap.createScaledBitmap(BitmapFactory.decodeFile(path), reqWidth, reqHeight, false));
I got class not found run time error…!! I downloaded full code of app.
Hello,
how to use this for load image from my server?
Thanks.
How to set specific path …