Wednesday, October 31, 2012

List Images with thumbnails, implementing custom SimpleCursorAdapter.

Last exercise demonstrate how to get Thumbnails. Now we can implement our custom SimpleCursorAdapter to list the Images in MediaStore.Images.Media with associated Thumbnail if exist.

List Images with thumbnails, implementing custom SimpleCursorAdapter.


Create a file, /res/layout/row.xml, to define the layout of the rows in the ListView.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    
    <ImageView
        android:id="@+id/thumb"
        android:layout_width="100dp"
        android:layout_height="100dp"/>
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>


Modify the code to implement MyAdapter class extends SimpleCursorAdapter.
package com.example.androidlistimages;

import android.net.Uri;
import android.os.Bundle;
import android.provider.MediaStore;
import android.support.v4.content.CursorLoader;
import android.support.v4.widget.CursorAdapter;
import android.support.v4.widget.SimpleCursorAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import android.app.AlertDialog;
import android.app.ListActivity;
import android.content.Context;
import android.database.Cursor;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;

public class MainActivity extends ListActivity {
 
 //define source of MediaStore.Images.Media, internal or external storage
 final Uri sourceUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
 final Uri thumbUri = MediaStore.Images.Thumbnails.EXTERNAL_CONTENT_URI;
 final String thumb_DATA = MediaStore.Images.Thumbnails.DATA;
 final String thumb_IMAGE_ID = MediaStore.Images.Thumbnails.IMAGE_ID;

 //SimpleCursorAdapter mySimpleCursorAdapter;
 MyAdapter mySimpleCursorAdapter;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.activity_main);
        
        String[] from = {MediaStore.MediaColumns.TITLE};
        int[] to = {android.R.id.text1};

        CursorLoader cursorLoader = new CursorLoader(
          this, 
          sourceUri, 
          null, 
          null, 
          null, 
          MediaStore.Audio.Media.TITLE);
        
        Cursor cursor = cursorLoader.loadInBackground();
        
        mySimpleCursorAdapter = new MyAdapter(
          this, 
          android.R.layout.simple_list_item_1, 
          cursor, 
          from, 
          to, 
          CursorAdapter.FLAG_REGISTER_CONTENT_OBSERVER);
        
        setListAdapter(mySimpleCursorAdapter);
        
        getListView().setOnItemClickListener(myOnItemClickListener);
    }
    
    OnItemClickListener myOnItemClickListener
    = new OnItemClickListener(){

  @Override
  public void onItemClick(AdapterView<?> parent, View view, int position,
    long id) {
   Cursor cursor = mySimpleCursorAdapter.getCursor();
   cursor.moveToPosition(position);

   int int_ID = cursor.getInt(cursor.getColumnIndex(MediaStore.Images.Media._ID));
   getThumbnail(int_ID);
  }};
 
 private Bitmap getThumbnail(int id){

  String[] thumbColumns = {thumb_DATA, thumb_IMAGE_ID};

  CursorLoader thumbCursorLoader = new CursorLoader(
          this, 
          thumbUri, 
    thumbColumns, 
    thumb_IMAGE_ID + "=" + id, 
    null, 
    null);
        
        Cursor thumbCursor = thumbCursorLoader.loadInBackground();
        
        Bitmap thumbBitmap = null;
        if(thumbCursor.moveToFirst()){
   int thCulumnIndex = thumbCursor.getColumnIndex(thumb_DATA);
   
   String thumbPath = thumbCursor.getString(thCulumnIndex);
   
   Toast.makeText(getApplicationContext(), 
     thumbPath, 
     Toast.LENGTH_LONG).show();
   
   thumbBitmap = BitmapFactory.decodeFile(thumbPath);
   
   //Create a Dialog to display the thumbnail
   AlertDialog.Builder thumbDialog = new AlertDialog.Builder(MainActivity.this);
   ImageView thumbView = new ImageView(MainActivity.this);
   thumbView.setImageBitmap(thumbBitmap);
   LinearLayout layout = new LinearLayout(MainActivity.this);
         layout.setOrientation(LinearLayout.VERTICAL);
         layout.addView(thumbView);
         thumbDialog.setView(layout);
         thumbDialog.show();
   
  }else{
   Toast.makeText(getApplicationContext(), 
     "NO Thumbnail!", 
     Toast.LENGTH_LONG).show();
  }
        
        return thumbBitmap;
 }
 
 public class MyAdapter extends SimpleCursorAdapter{
  
  Cursor myCursor;
     Context myContext;

  public MyAdapter(Context context, int layout, Cursor c, String[] from,
    int[] to, int flags) {
   super(context, layout, c, from, to, flags);
   
   myCursor = c;
      myContext = context;
  }

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
   View row = convertView;
   if(row==null){
    LayoutInflater inflater=getLayoutInflater();
    row=inflater.inflate(R.layout.row, parent, false); 
   }
   
   ImageView thumbV = (ImageView)row.findViewById(R.id.thumb);
   TextView textV = (TextView)row.findViewById(R.id.text);
   
   myCursor.moveToPosition(position);
   
   int myID = myCursor.getInt(myCursor.getColumnIndex(MediaStore.Images.Media._ID));
   String myData = myCursor.getString(myCursor.getColumnIndex(MediaStore.Images.Media.DATA));
   textV.setText(myData);
   
   String[] thumbColumns = {thumb_DATA, thumb_IMAGE_ID};
   CursorLoader thumbCursorLoader = new CursorLoader(
     myContext, 
           thumbUri, 
     thumbColumns, 
     thumb_IMAGE_ID + "=" + myID, 
     null, 
     null);
   Cursor thumbCursor = thumbCursorLoader.loadInBackground();
   
   Bitmap myBitmap = null;
         if(thumbCursor.moveToFirst()){
    int thCulumnIndex = thumbCursor.getColumnIndex(thumb_DATA);
    String thumbPath = thumbCursor.getString(thCulumnIndex);
    myBitmap = BitmapFactory.decodeFile(thumbPath);
    thumbV.setImageBitmap(myBitmap);
   }
   
   return row;
  }
  
 }
}


download filesDownload the files.

Related:
- List MediaStore.Images.Thumbnails in GridView, with custom SimpleCursorAdapter.


4 comments:

Unknown said...

Dear Android-er
I really appreciate your thoroughness in your blog, it is actually amazing how well you put everything together. I am trying to figure out how to load an image from an RSS feed in a gridview. (all from your posts)

I can't seem to figure out how to load get
@Override
protected void onPostExecute(Void result) {if (myRssFeed!=null)
{
TextView feedTitle = (TextView)findViewById(R.id.gridview);
TextView feedLink = (TextView)findViewById(R.id.gridview);
ImageView feedImageUrl = (ImageView)findViewById(R.id.thumb);
TextView feedFreechat_Link = (TextView)findViewById(R.id.gridview);
feedTitle.setText(myRssFeed.getTitle());
feedLink.setText(myRssFeed.getLink());
feedImageUrl.setImage(myRssFeed.getImage_Url());
feedFreechat_Link.setText(myRssFeed.getFreechat_Link());

ArrayAdapter adapter =
new ArrayAdapter(getApplicationContext(),
android.R.layout.list_content,myRssFeed.getList());
setListAdapter(adapter);

}else{
ImageView imageEmpty = (ImageView)findViewById(android.R.id.empty);

TextView textEmpty = (TextView)findViewById(android.R.id.empty);
textEmpty.setText("No Feed Found!");


I am getting an error on the "feedImageUrl.setImage(myRssFeed.getImage_Url());"

Eclipse is not recognizing the setImage that I am pulling from my Url and using your Gridview tutorial along with your RSS feed tut from this year w/Async and the LruCache :)

I am down to that last error...before I launch it

So I just wanted to see if you had any thoughts. I appreciate and respect your hard work, as you can see. haha

Joseph Mak said...

Thanks for the post! Did your screenshot come from the emulator? If so, how do you get pictures on to it? the Camera app crashes on the emulator.

Erik said...

hello Joseph Mak,

I capture the screen from real device. Sorry!

Unknown said...
This comment has been removed by the author.