ImageView In Xamarin Native Platform With Example

Introduction

Reading this article, you will learn how to create a ImageView application in Xamarin for Android platform.

Tools

Windows 10 (Recommended)
Visual Studio 2017 Community/Enterprise/Professional Edition (Software available online https://www.visualstudio.com/downloads/)

Step 1

Go to Visual Studio 2017.

Click File —> New —> Project or shortcuts (Ctrl+Shift+N).

Step 2

Go to Visual C# --> Android –> Blank App (Android); change your application name and click the "OK" button.

Step 3

After the process completes, the Xamarin dashboard appears. At the top right, you will see Solution Explorer. There is your application solution. Select application name; extract to resources. The Layout folder appears in which there is Main.axml* file. Double click to open Main.axml file. Then double click on down side left corner appear Source button. Don’t change android version default V23.

Step4

Next, double click on Source button. Then XAML code appears, if you need code.

Step5

I have given the source code. You can use this code or you can use your own code.

AXML 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">
<TextView
android:id="@+id/txtView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android ImageView Example"
android:textSize="22sp"
android:textStyle="bold" />
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:src="@drawable/Icon" />
<Button
android:text="Previous"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/btnPre" />
<Button
android:text="Next"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/btnNext" />
</LinearLayout>

Step6

Then, let's go to the Solution Explorer, click on MainActivity.cs. Your application name could be that namespace.

I have given the source code. You can use this code or you can use your own code.

SOURCE CODE

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
using Android;
namespace ImageViewApp {
[Activity(Label = "AndroidImageView", MainLauncher = true, Icon = "@drawable/icon")]
public class MainActivity: Activity create //classname
{
protected override void OnCreate(Bundle bundle) {
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
//
var imageView = FindViewById < ImageView > (Resource.Id.imageView);
var btnPre = FindViewById < Button > (Resource.Id.btnPre); //Button performance
var btnNext = FindViewById < Button > (Resource.Id.btnNext);
btnPre.Click += (e, o) => {
imageView.SetImageResource(Resource.Drawable.Icon);
btnNext.Visibility = ViewStates.Visible;
btnPre.Visibility = ViewStates.Invisible;
};
btnNext.Click += (e, o) => { // Conditions
imageView.SetImageResource(Resource.Drawable.Android);
btnPre.Visibility = ViewStates.Visible;
btnNext.Visibility = ViewStates.Invisible;
};
}
}
}

Just create a page application name, Simple android image and two button. This is only for demo app; you can use more codes using design in this application.

Step7

Then, build this application; wait for a few seconds; all calling functions will get connected. Next build successful and not failed; 0 up-to-date;0 skipped.

Step 8

Select a device; I have used emulator only so I selected “5’ KitKat (4.4)XXHDPI Application program interface (API) 19”.

Step 9

Emulator screen appears but this emulator needs 2GB RAM so you need minimum 4GB RAM your machine along with an i3 3rd Generation processor. You can use Image View.

Step 10

Click on Previous Button Image size is normal.

Step 11

Click on Next Button Image Size is Very big or Zoom Image.

SUMMARY

In this article, you learned how to create an Image View app using Xamarin Android native application development feature of Xamarin with .NET Standard libraries.

If you have any questions/ feedback/ issues, please write in the comment box.

4 Comments

Join the conversation! Your thoughts help the community grow.

懿萱郭8y ago
Hi,do you know how do " To view the images which are already upload to the firebase storage in the application??"
Vidyadharran G9y ago
Nice going.........keep it up ravi......
Manikandan Murugesan9y ago
Good Ravi , Keep Sharing....
Rafnas T P9y ago
Nice Article, keep sharing..