Select An Image

How to Pick an Image

PDF for offline use
Sample Code:
Related APIs:

Let us know how you feel about this

Translation Quality


0/250

last updated: 2016-03

This recipe will show how to pick an image that is stored on the device and display it in an ImageView widget.

This recipe will show how to pick a image stored on the device, display it in an ImageView and obtain the path the file on the device. This recipe accomplishes this by firing off an Intent to start an application (of the users choice) to select the image. The selection will be sent back to our application via a URI that is wrapped in an Intent. The following screenshots shows the sample application included with this recipe.

Recipe

  1. Create a new Android Application in Xamarin Studio or Visual Studio.
  2. Add a Button and an ImageView to Main.axml, as shown in the following 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">
    <Button
            android:id="@+id/MyButton"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Pick Image" />
    <ImageView
            android:src="@android:drawable/ic_menu_gallery"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/imageView1" />
</LinearLayout>
  1. Add the following instance variables to Activity:
[Activity(Label = "PickImageFromGallery", MainLauncher = true, Icon = "@drawable/icon")]
public class Activity1 : Activity
{
    public static readonly int PickImageId = 1000;
    private ImageView _imageView;
  1. Change the code in OnCreate as shown in the following snippet:
protected override void OnCreate(Bundle bundle)
{
    base.OnCreate(bundle);

    SetContentView(Resource.Layout.Main);
    _imageView = FindViewById<ImageView>(Resource.Id.imageView1);
    Button button = FindViewById<Button>(Resource.Id.MyButton);
    button.Click += ButtonOnClick;
}
  1. Create the ButtonOnClick event handler with the following method:
private void ButtonOnClick(object sender, EventArgs eventArgs)
{
    Intent = new Intent();
    Intent.SetType("image/*");
    Intent.SetAction(Intent.ActionGetContent);
    StartActivityForResult(Intent.CreateChooser(Intent, "Select Picture"), PickImageId);
}

This event handler will fire off an Intent to Android. The intent specifies two things: - An Action - The code above sets the action to Intent.ActionGetCode. This is the default action. - Content Type - this is set to the MIME type for all images.

The helper method Intent.CreateChooser will present a dialog to the user with a list of all applications that can handle the intent, as shown in this screenshot:

Once the user selects their image, Intent.CreateChooser will create an Intent that will be used by StartActivityForResult to start the application to handle the request. When that application is finished, Android will invoke the OnActivityResult method in our application.

  1. In order to handle the request for the image picking application, we need to override the method OnActivityResult with the following code:
protected override void OnActivityResult(int requestCode, Result resultCode, Intent data)
{
    if ((requestCode == PickImageId) && (resultCode == Result.Ok) && (data != null))
    {
        Uri uri = data.Data;
        _imageView.SetImageURI(uri);
    }
}

In this method we ensure that we only respond to the request that our Activity originally sent out in the the ButtonOnClick event handler. We will obtain the Uri of the selected image and display that image in the ImageView.

  1. Run the application, and you should get screens similar to the following:

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.