How To Display An Image In Xamarin Android App Using Visual Studio 2015

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (for example, Windows phone, Android, iOS).

In Xamarin platform, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

Prerequisites

  • Visual Studio 2015 Update 3.

The steps, given below are required to be followed in order to display an image in Xamarin Android app, using Visual Studio 2015.

Step 1

Click File--> select New--> select Project. The project needs to be clicked after opening all the types of projects in Visual Studio
or click (Ctrl+Shift+N).

Xamarin

Step 2

After opening the New Project, select Installed-->Templates-->Visual C#-->Android-->choose the Blank app (Android).

Now, give your Android app; a name (Ex:sample) and give the path of your project. Afterwards, click OK.

Xamarin

Step 3

Now, go to Solution Explorer. In Solution Explorer, get all the files and sources in your project.
Now, select Resource-->Layout-->double click to open main.axml page. To write XAML code, you need to select the source.

Choose the Designer Window, if you want design and you can design your app.

Xamarin

Step 4

After opening, the main.axml file will open the main page designer. You can design this page, as per your desire.

Xamarin

Now, delete the Default hello world button, go to the source panel and you can see the button coding. You need to delete it.

After delete the XAML code, now delete C# button action code. For this, go to the MainActivity.cs page and delete the button code.

Step 5

Now, go to the toolbox Window. In the toolbox Window, get all the types of the tools and controls.

Now, scroll down and you will see all the tools and controls.

You need to drag and drop the button.

Xamarin

Step 6

You need to drag and drop the ImageView.

Xamarin

Step 7

Now, go to the properties Window. You need to edit the button's Id value and Text value.

(EX: android:id="@+id/myButton" android:text="@string/changeImage" ).

Xamarin

Step 8

In this step, add the Image from your local system.

Go to Solution Explorer-->Resource-->Drawable-->Right click-->Add-->Existing Item (Shift+Alt+A).

Xamarin

Step 9

Now, you can choose the required image. Click Add.

Xamarin

Step 10

Now, go to the properties Window. You need to edit the ImageView's Id Value and src value.

(EX: android:id="@+id/demoImageView" android:src="@drawable/image1").

Xamarin

Step 11

In this step, go to Main.axml page source panel. Note, the button's Id value and also note ImageView's Id value.

Main.axml

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">  
  2.     <Button android:id="@+id/myButton" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/changeImage" />  
  3.     <ImageView android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/demoImageView" android:src="@drawable/image1" android:scaleType="fitCenter" />  
  4. </LinearLayout>  
Xamarin

Step 12

In this step, open String.xml page. Go to Solution Explorer-->Resource-->values-->String.xml.

Xamarin

Step 13

After opening the String.xml file, write XML code, mentioned below.
  1. Strings.xml <<  
  2.     ? xml version = "1.0"  
  3. encoding = "utf-8" ? >  
  4.     <  
  5.     resources >  
  6.     <  
  7.     string name = "changeImage" > Change Image < /string> <  
  8.     string name = "ApplicationName" > diaplayimage < /string> <  
  9.     /resources>  
Xamarin

Step 14

In this step, go to MainActivity.cs page. Write the code, mentioned below between OnCreate() Method.

MainActivity.cs
  1. protected override void OnCreate(Bundle bundle) {  
  2.     base.OnCreate(bundle);  
  3.     // Set our view from the "main" layout resource  
  4.     SetContentView(Resource.Layout.Main);  
  5.     Button button = FindViewById < Button > (Resource.Id.myButton);  
  6.     button.Click += delegate {  
  7.         var imageView = FindViewById < ImageView > (Resource.Id.demoImageView);  
  8.         imageView.SetImageResource(Resource.Drawable.image2);  
  9.     };  
  10. }  
Xamarin

Step 15

If you have an Android virtual device, run the app on it, else connect your Android phone and run the app on it.

Simply connect your phone and go to Visual Studio. The connected phone will show up in the Run menu.

(Ex:LENOVO A6020a40(Android 5.1-API 22)). Click Run option.

Xamarin

Output

After few seconds, the app will start running on your phone.

You will see the image is displayed successfully.

Now, you will click Change Image button.

Xamarin

You will see the Image changes successfully.

Xamarin

Summary

This was the process of how to display an image in Xamarin Android app, using Visual Studio 2015.