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">
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"
<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>
</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);
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);
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
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
