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

1. Windows 10 (Recommended)
2. 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.