How To Load Large Images 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.

The images can be reduced in size, which will require less RAM.

Prerequisites

• Visual Studio 2015 Update 3.

The steps, mentioned below are required to be followed in order to load the large Images 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).



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.



Step 3

Now, go to Solution Explorer. In Solution Explorer, get all the files and sources in your project.

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 it,  and you can design your app.



Step 4

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



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

After deleting XAML code, now delete the C# button action code.

Go to MainActivity.cs page. You need to 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.

You need to go to the toolbox Window. Now, scroll down and you will see all the tools and controls.

You need to drag and drop the TextView.



Step 6

You need to drag and drop the ImageView.



Step 7

You need to drag and drop another one TextView.



Step 8

Now, go to the properties Window. You need to edit the TextView Id value and Text value

(EX: android:id="@+id/original_image_dimensions_textview" android:text="Original Image").



Step 9

Edit ImageView's Id value.

(Ex: android:id="@+id/resized_imageview").



Step 10

Also, edit the TextView Id value and Text Value.

(Ex: android:id="@+id/resized_image_dimensions_textview" android:text="Sized Image").



Step 11

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

Main.axml

<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:text="Original Image" android:textAppearance="?android:attr/textAppearanceMedium" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/original_image_dimensions_textview" />
    <ImageView android:id="@+id/resized_imageview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:scaleType="center" />
    <TextView android:text="Sized Image" android:textAppearance="?android:attr/textAppearanceMedium" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/resized_image_dimensions_textview" />
</LinearLayout>
// This is just a sample script. Paste your real code (javascript or HTML) here. if ('this_is'==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}

Step 12

In this step, add the image from your Local system.

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



Step 13

Now, you can choose the required image and click Add.



Step 14

In this step, go to MainActivity.cs page in Solution Explorer. Add the Namespaces.and Variables, mentioned below.

MainActivity.cs

using Android.Content.Res;
using Android.Graphics;
using System.Threading.Tasks;
using Android.Graphics.Drawables;
//variables
public class MainActivity: Activity {
    ImageView _imageView;
    TextView _originalDimensions;
    TextView _resizedDimensions;
}

Step 15

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

MainActivity.cs

protected override async void OnCreate(Bundle bundle) {
    base.OnCreate(bundle);
    // Set our view from the "main" layout resource
    SetContentView(Resource.Layout.Main);
    _originalDimensions = FindViewById < TextView > (Resource.Id.original_image_dimensions_textview);
    _resizedDimensions = FindViewById < TextView > (Resource.Id.resized_image_dimensions_textview);
    _imageView = FindViewById < ImageView > (Resource.Id.resized_imageview);
    BitmapFactory.Options options = await GetBitmapOptionsOfImage();
    Bitmap bitmapToDisplay = await LoadScaledDownBitmapForDisplayAsync(Resources, options, 150, 150);
    _imageView.SetImageBitmap(bitmapToDisplay);
    _resizedDimensions.Text = string.Format("Reduced the image {0}x", options.InSampleSize);
}

Step 16

In this step, create one Method and its name is called CalculateInSampleSize() and write the code, mentioned below.

MainActivity.cs

public static int CalculateInSampleSize(BitmapFactory.Options options, int reqWidth, int reqHeight) {
    float height = options.OutHeight;
    float width = options.OutWidth;
    double inSampleSize = 1 D;
    if (height > reqHeight || width > reqWidth) {
        int halfHeight = (int)(height / 2);
        int halfWidth = (int)(width / 2); {
            inSampleSize *= 2;
        }
    }
    return (int) inSampleSize;
}
public async Task < Bitmap > LoadScaledDownBitmapForDisplayAsync(Resources res, BitmapFactory.Options options, int reqWidth, int reqHeight) {
    options.InSampleSize = CalculateInSampleSize(options, reqWidth, reqHeight);
    options.InJustDecodeBounds = false;
    return await BitmapFactory.DecodeResourceAsync(res, Resource.Drawable.monkey, options);
}
async Task < BitmapFactory.Options > GetBitmapOptionsOfImage() {
    BitmapFactory.Options options = new BitmapFactory.Options {
        InJustDecodeBounds = true
    };
    // The result will be null because InJustDecodeBounds == true.
    Bitmap result = await BitmapFactory.DecodeResourceAsync(Resources, Resource.Drawable.monkey, options);
    int imageHeight = options.OutHeight;
    int imageWidth = options.OutWidth;
    _originalDimensions.Text = string.Format("Original Size= {0}x{1}", imageWidth, imageHeight);
    return options;
}

Step 17

If you have 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.



Output

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

You will see the large image. After loading, it is resized successfully.



Summary

This was the process of how to load large images in Xamarin Android app, using Visual Studio 2015.