In this tutorial you will learn how to select images from your device gallery and show it to your required places. You can pick single or multiple images according to your requirement. One thing need to be remembered that multiple image selection option is only available in Android API level 18 or higher. So for this reason in your project Manifst file the minimum SDK version should be 18 or higher.
<uses-sdk android:minSdkVersion=”18″ />
Purpose
Single or multiple image selection from your device gallery and show it through Imageviews in Xamarin Android.
Scope
IDE: Visual Studio Xamarin or Xamarin Studio.
Procedure
At first create an project in xamarin.android. Design Main.axml layout with four imageview as displayed in below screen with a simple button. This button click event will help to get images from device gallery and will show that images in this perticular imageviews.You can customize your view and code as per your requirements.
Step 1:
In your Main.axml layout give this following design code
<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>
<ImageView
android:src=”@android:drawable/ic_menu_gallery”
android:layout_width=”264.5dp”
android:layout_height=”171.5dp”
android:id=”@+id/profimg1″
android:layout_gravity=”center_horizontal”
android:layout_marginBottom=”21.0dp” />
<LinearLayout
android:orientation=”horizontal”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_gravity=”center_horizontal”
android:gravity=”center_horizontal”>
<ImageView
android:src=”@android:drawable/ic_menu_gallery”
android:layout_width=”100dp”
android:layout_height=”100dp”
android:id=”@+id/profimg2″
android:layout_marginRight=”5dp” />
<ImageView
android:src=”@android:drawable/ic_menu_gallery”
android:layout_width=”100dp”
android:layout_height=”100dp”
android:id=”@+id/profimg3″
android:layout_marginRight=”5dp” />
<ImageView
android:src=”@android:drawable/ic_menu_gallery”
android:layout_width=”100dp”
android:layout_height=”100dp”
android:id=”@+id/profimg4″ />
</LinearLayout>
<Button
android:text=”Upload Pictures”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:id=”@+id/btniploadpic” />
</LinearLayout>
In your designer screen you will get this design view:
Step 2:
Next you need to set permission for access device gallery. Write this permission code to your Android manifest file:
<manifest
xmlns:android=”http://schemas.android.com/apk/res/android”
package=”ImageUpload.ImageUpload”
android:versionCode=”1″ android:versionName=”1.0″ android:installLocation=”auto”>
<uses-sdk android:minSdkVersion=”18″ />
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE”/>
<application android:label=”ImageUpload”></application>
</manifest>
Step 3:
Next go to Mainactivity.cs file.Set the MainLauncher = true for this activity. Set the contentview as Main.axml layout and define all your images and button as required.
public static readonly int PickImageId = 1000;
Button btnupload;
ImageView profimg1, profimg2, profimg3, profimg4;
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
btnupload = FindViewById<Button>(Resource.Id.btniploadpic);
profimg1 = FindViewById<ImageView>(Resource.Id.profimg1);
profimg2 = FindViewById<ImageView>(Resource.Id.profimg2);
profimg3 = FindViewById<ImageView>(Resource.Id.profimg3);
profimg4 = FindViewById<ImageView>(Resource.Id.profimg4);
btnupload.Click += (sender, e) =>
{
}
}
Step 4:
Now in button click event, call the intent of image types and set CreateChooser. If you call Intent.createChooser(), passing it your Intent object, it returns a version of your intent that will always display the chooser.
Following is the source code:
Intent intent= new Intent();
intent.SetType(“image/*”);
intent.PutExtra(Intent.ExtraAllowMultiple, true);
intent.SetAction(Intent.ActionGetContent);
StartActivityForResult(Intent.CreateChooser(intent, “Select Picture”), PickImageId);
- Note that here we used Intent.ExtraAllowMultiple true, which means you can select single image as well as multiple images from gallery file.
Following is the output of this above code:
Step 5:
Next we need to override another function which is OnActivityResult. We will get all the selected images through this override method’s intent data. Here’s a function that invokes an intent to get all photos from gallery or any other App that we have selected from createchooser.
protected override void OnActivityResult(int requestCode, Result resultCode, Intent data)
{
if ((requestCode == PickImageId) && (resultCode == Result.Ok) && (data != null))
{
ClipData clipData = data.ClipData;
if (clipData != null) {
for (int i = 0; i < clipData.ItemCount; i++) {
ClipData.Item item = clipData.GetItemAt(i);
Uri uri = item.Uri;
if (i==0)
{
profimg1.SetImageURI(uri);
}
else if (i==1)
{
profimg2.SetImageURI(uri);
}
else if(i==2)
{
profimg3.SetImageURI(uri);
}
else if(i==3)
{
profimg4.SetImageURI(uri);
} }
}
//Uri uri = data.Data; for single images
//profimg1.SetImageURI(uri);
}