Single or multiple image selection from device gallery and show it through Image views in Xamarin Android:

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-sdkandroid: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 image view 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 particular image views.You can customize your view and code as per your requirements.

Step 1:

In your Main.axml layout give this following design code

<?xmlversion=1.0encoding=utf-8?>
<LinearLayoutxmlns: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:

<manifestxmlns:android=http://schemas.android.com/apk/res/androidpackage=ImageUpload.ImageUploadandroid:versionCode=1android:versionName=1.0android:installLocation=auto>
     <uses-sdkandroid:minSdkVersion=18 />
     <uses-permissionandroid:name=android.permission.WRITE_EXTERNAL_STORAGE/>
     <applicationandroid:label=ImageUpload></application>
</manifest>

Step 3:

Next go to Mainactivity.csfile.Set the MainLauncher = true for this activity. Set the contentview as Main.axml layout and define all your images and button as required.

publicstaticreadonlyintPickImageId = 1000;
Buttonbtnupload;
ImageView profimg1, profimg2, profimg3,
profimg4;
protectedoverridevoidOnCreate(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= newIntent();
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. Extra Allow Multiple 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.

protectedoverridevoidOnActivityResult(intrequestCode, ResultresultCode,
Intent data)
  { 
if ((requestCode == PickImageId)
&& (resultCode ==
Result.Ok) && (data != null))
            {
ClipDataclipData = data.ClipData;
if (clipData != null) {
for (inti =
0; i<clipData.ItemCount; i++) {
ClipData.Item item
= clipData.GetItemAt(i);
Uriuri = item.Uri;
if (i==0)
                        {
profimg1.SetImageURI(uri);
                        }
elseif (i==1)
                        {
profimg2.SetImageURI(uri);
                        }
elseif(i==2)
                        {
profimg3.SetImageURI(uri);
                        }
elseif(i==3)
                        {
profimg4.SetImageURI(uri);
                        }                    }
                }
//Uri
uri = data.Data; for single images
//profimg1.SetImageURI(uri);
            }

Explanation:

If we get any result from the above mentioned method then we need to call Clipdata class which contain all the images URI. Then according to the ‘i’ position we set the imageview’simagesource. Now its time to Run your project and you will see output as follows:

As we have taken four imageviews we are able to display only four images. You can usegridview as well to display multiple images in a grid.

Step 6:

If you want to display only single images then don’t use clipdataclass.Instead of using clipdata class use this following code for single image upload:

protectedoverridevoidOnActivityResult(intrequestCode, ResultresultCode,
Intent data)
  { 
if ((requestCode == PickImageId)
&& (resultCode ==
Result.Ok) && (data != null))
            {
Uriuri = data.Data;
profimg1.SetImageURI(uri);//Your
imageview
            }
}

Now its time to Run your project and you will see output as follows:

Step 7:

We can switch image positions in image click events easily.
Here is an small example of it.You can customize it as your own. In this example we have changed first imageview positions with other imageviews. Here is a sample source code:

profimg2.Click
+= (sender, e) =>
             {
var image1 = profimg2.Drawable;
var image2 = profimg1.Drawable;
profimg2.SetImageDrawable(image2);
profimg1.SetImageDrawable(image1);
             };
             profimg3.Click += (sender, e)
=>
             {
var image1 = profimg3.Drawable;
var image2 = profimg1.Drawable;
profimg3.SetImageDrawable(image2);
profimg1.SetImageDrawable(image1);
             };
             profimg4.Click += (sender, e)
=>
             {
var image1 = profimg4.Drawable;
var image2 = profimg1.Drawable;
profimg4.SetImageDrawable(image2);
profimg1.SetImageDrawable(image1);

 

             };

Run your project and you will see output as follows:

Conclusion:

So from above explanation it is clear how we can access images from different Apps and show it to our App(single or multiple images).Also how we can switch images position in imageview click events.

Add a Comment

Your email address will not be published. Required fields are marked *