Thursday, 6 September 2012

How To Pick Image From Gallery : Android


1)First screen shows user with and Image view and a button to loan Picture.
2)On click of “Load Picture” button, user will be redirected to Android’s Image Gallery where she can select one image.
3) Once the image is selected, the image will be loaded in Image view on main screen.

Step1)Create Basic Android Project in Eclipse

Create a Hello World Android project in Eclipse. Go to New > Project > Android Project. Give the project name as ImageGalleryDemo .

Step 2) Change the Layout

we need simple layout. One Image view to display user selected image and one button to trigger Image gallery.
Open layout/main.xml in your android project and replace its content with following:
 Path:-    res/layout/main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <ImageView
        android:id="@+id/imgView"
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:background="@android:color/black"
        android:layout_weight="1">
    </ImageView>
    <Button
        android:id="@+id/buttonGallery"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:text="Show Gallery"
    />

</RelativeLayout>

  Note the id of Image view is imgView and that of Button is buttonGallery.

Step 3: Android Code to trigger Image Gallery Intent(Open Gallery)

 Now we need to write some code to actually handle the button click. On click of Show Gallery button, we need to trigger the intent for Image Gallery.

    Intent i = new Intent(
                Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
                startActivityForResult(i, RESULT_LOAD_IMAGE);

 We passed an integer RESULT_LOAD_IMAGE to startActivityForResult() method. This is to handle the result back when an image is selected from Image Gallery.

Step 4: Getting back selected Image details in Our Activity

 Once user will select an image, the method onActivityResult() of our main activity will be called. We need to handle the data in this method as follows:
@Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        // TODO Auto-generated method stub
        super.onActivityResult(requestCode, resultCode, data);
       
         if (requestCode == RESULT_LOAD_IMAGE && resultCode == RESULT_OK && null != data) {
             Uri selectedImage = data.getData();
             String[] filePathColumn = { MediaStore.Images.Media.DATA };
   
             Cursor cursor = getContentResolver().query(selectedImage,
                     filePathColumn, null, null, null);
             cursor.moveToFirst();
   
             int columnIndex = cursor.getColumnIndex(filePathColumn[0]);
             String picturePath = cursor.getString(columnIndex);
             cursor.close();
                 
             // String picturePath contains the path of selected Image
    }
  The method onActivityResult gets called once an Image is selected. In this method, we check if the activity that was triggered was indeed Image Gallery (It is common to trigger different intents from the same activity and expects result from each). For this we used RESULT_LOAD_IMAGE integer that we passed previously to startActivityForResult() method.

Below is the Final Code  - 

public class MainActivity extends Activity implements OnClickListener {
Button galleryBtn;
int RESULT_LOAD_IMAGE=1;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        /*
         * Gallery Btn refrenced From main.xml              umesh
         */
        galleryBtn=(Button) findViewById(R.id.buttonGallery);
        galleryBtn.setOnClickListener(this);
      
    }
 /*
  *  On click of gallery Btn trigger Android Gallery
  */
    @Override
    public void onClick(View v) {
                Intent i = new Intent(
                Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
                startActivityForResult(i, RESULT_LOAD_IMAGE);
      
    } // on Click View
  
  
@Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        // TODO Auto-generated method stub
        super.onActivityResult(requestCode, resultCode, data);
        
 if (requestCode == RESULT_LOAD_IMAGE && resultCode == RESULT_OK && null != data) {
             Uri selectedImage = data.getData();
             String[] filePathColumn = { MediaStore.Images.Media.DATA };
    
             Cursor cursor = getContentResolver().query(selectedImage,
                     filePathColumn, null, null, null);
             cursor.moveToFirst();
    
             int columnIndex = cursor.getColumnIndex(filePathColumn[0]);
             String picturePath = cursor.getString(columnIndex);
             cursor.close();
             // String picturePath contains the path of selected Image
           
             // Show the Selected Image on ImageView
             ImageView imageView = (ImageView) findViewById(R.id.imgView);
             imageView.setImageBitmap(BitmapFactory.decodeFile(picturePath));
          
       }  // if Loop
  
    }    // on ActivityResult

} // MainActivity

Screen shots of Pick Image From Gallery

1) 


2)select an image from Image Gallery
3)selected image,  will be displayed on our main activity
 
 Thanks,

No comments:

Post a Comment