How to Display Thumbnails of Images Stored in the SD Card

Using the following example we can display the thumbnails of images stored in the sd card. Here im displaying the thumbnails in the Grid view.
You should to add the folowing permission in the manifest xml file.
< uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>
Sd card should be available with the emulator or real device.

ImageThumbnailsActivity is the main Activity.

AndroidManifest.xml
--------------------
<?xml version="1.0" encoding="utf-8"?>
< manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="image.Thumbnails" android:versionCode="1" android:versionName="1.0.0">
      < uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />
      < application android:icon="@drawable/icon" android:label="@string/app_name">
            < activity android:name=".ImageThumbnailsActivity"
                  android:label="@string/app_name">
                  < intent-filter>
                        < action android:name="android.intent.action.MAIN" />
                        < category android:name="android.intent.category.LAUNCHER"/>
                  </intent-filter>
            </activity>
            < activity android:name=".ViewImage">
                  < intent-filter>
                        < action android:name="android.intent.action.VIEW" />
                        < category android:name="android.intent.category.DEFAULT" />
                  </intent-filter>
            </activity>
      </application>
</manifest>

package image.Thumbnails;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.database.Cursor;
import android.net.Uri;
import android.os.Bundle;
import android.provider.MediaStore;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.AdapterView.OnItemClickListener;

public class ImageThumbnailsActivity extends Activity {
      /** Called when the activity is first created. */
      private Cursor imagecursor, actualimagecursor;
      private int image_column_index, actual_image_column_index;
      GridView imagegrid;
      private int count;
      @Override
      public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
            init_phone_image_grid();
      }
      private void init_phone_image_grid() {
            String[] img = { MediaStore.Images.Thumbnails._ID };
            imagecursor = managedQuery(
MediaStore.Images.Thumbnails.EXTERNAL_CONTENT_URI, img, null,
null, MediaStore.Images.Thumbnails.IMAGE_ID + "");
            image_column_index = imagecursor
.getColumnIndexOrThrow(MediaStore.Images.Thumbnails._ID);
            count = imagecursor.getCount();
            imagegrid = (GridView) findViewById(R.id.PhoneImageGrid);
            imagegrid.setAdapter(new ImageAdapter(getApplicationContext()));
            imagegrid.setOnItemClickListener(new OnItemClickListener() {
                  public void onItemClick(AdapterView parent, View v,
int position, long id) {
                        System.gc();
                        String[] proj = { MediaStore.Images.Media.DATA };
                        actualimagecursor = managedQuery(
MediaStore.Images.Media.EXTERNAL_CONTENT_URI, proj,
null, null, null);
                        actual_image_column_index = actualimagecursor
.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
                        actualimagecursor.moveToPosition(position);
                        String i = actualimagecursor.getString(actual_image_column_index);
                        System.gc();
                        Intent intent = new Intent(getApplicationContext(), ViewImage.class);
                        intent.putExtra("filename", i);
                        startActivity(intent);
                  }
            });
      }


      public class ImageAdapter extends BaseAdapter {
            private             Context mContext;
            public ImageAdapter(Context c) {
                  mContext = c;
            }
            public int getCount() {
                  return count;
            }
            public Object getItem(int position) {
                  return position;
            }
            public long getItemId(int position) {
                  return position;
            }
            public View getView(int position,View convertView,ViewGroup parent) {
                  System.gc();
                  ImageView i = new ImageView(mContext.getApplicationContext());
                  if (convertView == null) {
                        imagecursor.moveToPosition(position);
                        int id = imagecursor.getInt(image_column_index);
                        i.setImageURI(Uri.withAppendedPath(
MediaStore.Images.Thumbnails.EXTERNAL_CONTENT_URI, ""
+ id));
                        i.setScaleType(ImageView.ScaleType.CENTER_CROP);
                        i.setLayoutParams(new GridView.LayoutParams(92, 92));
                  }
                  else {
                        i = (ImageView) convertView;
                  }
                  return i;
            }
      }
}

// By selecting the thumbnails user can view the actual image.
package image.Thumbnails;

import android.os.Bundle;
import android.widget.ImageView;
import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;

public class ViewImage extends Activity {
      private String filename;
      @Override
      public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            System.gc();
            Intent i = getIntent();
            Bundle extras = i.getExtras();
            BitmapFactory.Options bfo = new BitmapFactory.Options();
            bfo.inSampleSize = 2;
            filename = extras.getString("filename");
            ImageView iv = new ImageView(getApplicationContext());
            Bitmap bm = BitmapFactory.decodeFile(filename, bfo);
            iv.setImageBitmap(bm);
            setContentView(iv);
      }
}



//main.xml

< ?xml version="1.0" encoding="utf-8"?>
< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
< GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/PhoneImageGrid" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:numColumns="auto_fit"
android:verticalSpacing="10dp" android:horizontalSpacing="10dp"
android:columnWidth="90dp" android:stretchMode="columnWidth"
android:gravity="center" />
< /LinearLayout>

How to download and display Images in android

/*
This example helps you to display the remote images in android. The progress bar will be displayed when application downloading the image. Progress bar will be stopped when the download completes and the Image will be displayed. This is also a good example for using thread in the background.. I Hope it helps..
*/

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.net.URL;

import android.app.Activity;
import android.app.Dialog;
import android.app.ProgressDialog;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.widget.ImageView;

public class ViewStorageImage extends Activity {
      private String url;
      ImageView iv;
      Thread t;
      Bitmap bm;
      ProgressDialog dialog;
       @Override
      public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            showDialog(0);
            setContentView(R.layout.storageimage);
            url = "http://.........";//enter the url here..
            iv=(ImageView)findViewById(R.id.storageactualimage);
            t=new Thread() {
                  public void run() {
                        viewImage();
                  }
            };
            t.start();
      }
      @Override
      protected Dialog onCreateDialog(int id) {
            switch (id) {
                  case 0: {
                        dialog = new ProgressDialog(this);
                        dialog.setMessage("Please wait while loading...");
                        dialog.setIndeterminate(true);
                        dialog.setCancelable(true);
                        return dialog;
                  }
            }
            return null;
      }
      private Handler handler = new Handler() {
            @Override
            public void handleMessage(Message msg) {
                  Bitmap image=(Bitmap)msg.obj;
                  ImageView iv=new ImageView(this);
                  iv.setImageBitmap(image);
                  setContentView(iv);
            }
      };
      public void viewImage() {
            try {
                  URL myURL = new URL(url);
                  final BufferedInputStream bis = new BufferedInputStream(myURL.openStream(), 1024);
                  final ByteArrayOutputStream dataStream = new ByteArrayOutputStream();
                  BufferedOutputStream out = new BufferedOutputStream(dataStream,1024);
                  copy(bis, out);
                  out.flush();
                  final byte[] data = dataStream.toByteArray();
                  BitmapFactory.Options bfo = new BitmapFactory.Options();
                  bfo.inSampleSize = 2;
                  bm = BitmapFactory.decodeByteArray(data, 0, data.length, bfo);
                  bis.close();
                  removeDialog(0);
                  Message myMessage=new Message();
                  myMessage.obj=bm;
                  handler.sendMessage(myMessage);
            }
            catch (Exception e) {
                  finish();
            }
      }
      static final int BUFF_SIZE = 1024;
      static final byte[] buffer = new byte[BUFF_SIZE];
      public static void copy(BufferedInputStream in, BufferedOutputStream out) throws IOException {
            try {
                  while (true) {
                              synchronized (buffer) {
                              int amountRead = in.read(buffer);
                              if (amountRead == -1) {
                                    break;
                              }
                              out.write(buffer, 0, amountRead);
                        }
                  }
            }
            catch(Exception e){
                  if (in != null) {
                        in.close();
                  }
                  if (out != null) {
                        out.close();
                  }
            }
            finally {
                  if (in != null) {
                        in.close();
                  }
                  if (out != null) {
                        out.close();
                  }
            }
      }
}

Display a drawable graph, using ImageView.

If you want to display some simple graphics, you can just draw it to the background of a View, or use ImageView in layout.

Download the graphic android.png and save it in the /res/drawable folder.

- To set background of a View

Add a View in main.xml, and set thr background to "@drawable/android"

<View
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/android"
/>

- Using ImageView

Add a ImageView in main.xml

<ImageView
android:id="@+id/myImageView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>

Add the code in onCreate(), after setContentView(R.layout.main)

ImageView MyImageView = (ImageView)findViewById(R.id.myImageView); MyImageView.setImageResource(R.drawable.android);

Both have the same result.

HelloGallery, read picture files from SD, using File ArrayList

It extend from previous exercise, HelloGallery, using Gallery Widget, but read files from SD instead of R.drawable.



Firstly, you have to Create an SD Card to existing AVD and Copying Files to a Disk Image.

All the xml files are same as previous, just keep it no change.

Modify the HelloGallery.java:

package com.exercise.HelloGallery;

import java.io.File;
import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.AdapterView.OnItemClickListener;

public class HelloGallery extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    Gallery g = (Gallery) findViewById(R.id.gallery);
    g.setAdapter(new ImageAdapter(this, ReadSDCard()));

    g.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent,
          View v, int position, long id) {
        }
    });
}

private List<String> ReadSDCard()
{
 List<String> tFileList = new ArrayList<String>();

 //It have to be matched with the directory in SDCard
 File f = new File("/sdcard/pictures/");

 File[] files=f.listFiles();

 for(int i=0; i<files.length; i++)
 {
  File file = files[i];
  /*It's assumed that all file in the path
    are in supported type*/
  tFileList.add(file.getPath());
 }

 return tFileList;
}

public class ImageAdapter extends BaseAdapter {
    int mGalleryItemBackground;
    private Context mContext;
    private List<String> FileList;

    public ImageAdapter(Context c, List<String> fList) {
        mContext = c;
        FileList = fList;
        TypedArray a = obtainStyledAttributes(R.styleable.Theme);
        mGalleryItemBackground = a.getResourceId(
          R.styleable.Theme_android_galleryItemBackground,
          0);
        a.recycle();
    }

    public int getCount() {
        return FileList.size();
    }

    public Object getItem(int position) {
        return position;
    }

    public long getItemId(int position) {
        return position;
    }

    public View getView(int position, View convertView,
      ViewGroup parent) {
        ImageView i = new ImageView(mContext);

        Bitmap bm = BitmapFactory.decodeFile(
          FileList.get(position).toString());
        i.setImageBitmap(bm);
    
        i.setLayoutParams(new Gallery.LayoutParams(150, 100));
        i.setScaleType(ImageView.ScaleType.FIT_XY);
        i.setBackgroundResource(mGalleryItemBackground);
    
        return i;
    }
}
}

Exercise: Load background to ImageButton, in programmatical approach

In addition to "Load background to ImageButton, using XML", Android support programmatic approach also, using setImageResource().

In this exercise, I implement ImageButton.setOnFocusChangeListener() and ImageButton.setOnClickListener() to handle the background image of the ImageButton. The outcome is same as the "Load background to ImageButton, using XML".



Download and save the three image above to res > drawable folder.

Add a ImageButton in main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   >
<TextView 
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="@string/hello"
   />
<ImageButton
    android:id="@+id/myImageButton"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@drawable/android"
    />
</LinearLayout>

Modify the source code to implement setOnFocusChangeListener() and setOnClickListener()

package com.exercise.AndroidImageButton;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnFocusChangeListener;
import android.widget.ImageButton;

public class AndroidImageButtonActivity extends Activity {
 
  private ImageButton mImageButton;
 
  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
      
    mImageButton = (ImageButton) findViewById(R.id.myImageButton);
      
    mImageButton.setOnFocusChangeListener(
      new OnFocusChangeListener()
       {
   @Override
   public void onFocusChange(View v, boolean hasFocus) {
   // TODO Auto-generated method stub
   if (hasFocus==true)
   {
      mImageButton.setImageResource(R.drawable.androidonfocus);
   }
   else
   {
      mImageButton.setImageResource(R.drawable.android);
   }
 }
     });
      
     mImageButton.setOnClickListener(
       new OnClickListener() {
   @Override
   public void onClick(View v) {
   // TODO Auto-generated method stub
   mImageButton.setImageResource(R.drawable.androidonclick);
 }
     });     
   }
}

Exercise: Load background to ImageButton, using XML

Default of ImageButton:

Button On Focus:

Button On Click:


The backgound of ImageButton can be defined in main.xml, without any works on programming.



Download and save the three image above to res > drawable folder.

Create a loadimagebutton.xml in res > drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
 android:state_focused="true"
 android:state_pressed="false"
 android:drawable="@drawable/androidonfocus" />
<item
 android:state_focused="true"
 android:state_pressed="true"
 android:drawable="@drawable/androidonclick" />
<item
 android:state_focused="false"
 android:state_pressed="true"
 android:drawable="@drawable/androidonclick" />
<item  
 android:drawable="@drawable/android" />
</selector>

Modify main.xml to involve loadimagebutton

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<ImageButton
    android:background="@drawable/loadimagebutton"  
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    />
</LinearLayout>

(To achieve the same out-come using programmatical approach, refer to the next article, Exercise: Load background to ImageButton, in programmatical approach.)