Post
Ask Question

Add Image Control In Xamarin Android App Using Visual Studio 2015 Update 3

CIntroduction

Xamarin is the platform for developing cross-platform and multi-platform apps (e.g. Windows, Android, iOS). In Xamarin, the code-sharing concept is used. The Xamarin Studio is available in Visual Studio also.

Image Control is used for viewing image in your app.

Prerequisites
  • Visual Studio 2015 Update 3 
The following steps must be followed, in order to add the Image Control in Xamarin Android app, using Visual Studio 2015 Update 3.

Step 1 - Click File --> New --> Project. This will open all available types of projects.



Step 2 - After opening the new project, select Installed --> Templates--> Visual C# --> Android--> choose Blank App (Android). 
 
Next give your Android app a name and path. Click OK.



Step 3 - Next, go to the Solution Explorer and select Resource --> Layout. Double click to open the Main.axml page. You can either select Source or Design part for writing the XAML code or designing it using UI, respectively.

 

Step 4 - This will open the Main Page designer where you can design your app.



Step 5 - Next, delete the default Hello World button . Go to the Source panel. You can see the button coding and delete it.



Step 6 - Next, delete the C# button action code in MainActivity.cs page.



Step 8 - Next, add the image in your app. Go to the solution explorer, select Resource--> drawable. Right click --> add--> Existing Item.

or (Shift + Alt + A).



Step 9 - Next browse the image. Go to the your image path (location) and select the image after clicking the add button.



Step 10 - You will add the image --  you can see the image in your app source drawable folder.



Step 11 - Next add the image view control.

Go to the toolbox window. In the toolbox window are all tools and controls. You will select the image view and drag and drop the image view in your app main.axml page.



Step 12 - After dragding and dropping the image view control go to the properties window; you will add the image source path. 
Imageview1-->Main-->src.



Step 13 - After clicking, the src Resource window will open. Next you can select the uploaded image. Next click ok.

 

code 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:minWidth="25px" android:minHeight="25px">  
  3.     <ImageView android:src="@drawable/xplat" android:layout_width="match_parent" android:layout_height="163.5dp" android:id="@+id/imageView1" />   
  4. </LinearLayout>  
Step 14 - After adding the image source, you will see the image in your app main.axml page.

 
Step 15 - If you have android virtual device you can run the virtual device. If you don't have it,  run your android phone by connecting the android phone the via USB cable in your system or laptop. If connected,  the andriod mobile phone shows the message: Allow USB debugging?.

If you always run the app in the mobile, check the "always allow" option from this computer. Next click the ok button.

Next go to visual studio.

If connecting your andriod phone show the run menu (Ex:Micromax E481(Android 5.1-API 22). If showing the phone in run option,  
next go to "click the connected android phone" option, and it will run in your android phone.



Output

In this app running will take some time because the app will be built and installed  in your phone.



Summery - So this was the process of adding image control in xamarin android apps using visual studio 2015 update 3.


Similar Articles