Blur 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 the Xamarin platform, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available. Blur an Image is used to seek bar to control the Image Blur.

Prerequisites

Visual Studio 2015 Update 3.

The steps, given below, are required to be followed in order to create Blur an Image app in Xamarin, using Visual Studio 2015.

Step 1

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

Project

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.

Project

Step 3

Next, go to the Solution Explorer. Select Resource --> Layout --> double click to open Main.axml page. Now, if you want to design the app through coding, select Source panel, else select Designer panel.

Project

Step 4

After opening the Main.axml file, let's open the main page designer.

Project

Next, delete the default "hello world" button. Go to the Source panel and delete the XAML code. The same way, go to the MainActivity.cs page and delete the C# button action code.

Step 5

Now, go to the toolbox window and scroll until you see the LinearLayout(Horizontal) control. Drag and drop it on your main page design section.

Project

Step 6

Next, drag and drop the TextView.

Project

Step 7

Drag and drop the Seekbar.

Project

Step 8

Next, drag and drop the ImageView.

Project

Step 9

Now, go to the properties window. You need to edit the TextView Id Value and Text Value (EX:android:id="@+id/textView1" android:text="@string/blur_radius_text").

Project

Step 10

Next, edit the SeekBar Id value(EX:android:id="@+id/seekBar1").

Project

Step 11

In this step, add one image. Go to Solution Explorer --> Resource --> Drawable --> Right click --> Add -->Existing (Shift+Alt+A).

Project

Step 12

In this step, select the image you need and click Add.

Project

Step 13

Now, go to the Properties window. You need to edit the ImageView Id Value and src Value here (EX: android:id="@+id/originalImageView" android:src="@drawable/dog_and_monkeys").

Step 14

In this step, go to the Main.axml page source panel. Note, the ImageView Id value and source value and TextView and SeekBar Id Values.

Project

Main.axml

<LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="12dp" android:paddingStart="6dp" android:paddingEnd="6dp">
<TextView android:text="@string/blur_radius_text" android:textAppearance="?android:attr/textAppearanceMedium" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView1" />
<SeekBar android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/seekBar1" android:max="25" />
</LinearLayout>
<ImageView android:src="@drawable/dog_and_monkeys" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/originalImageView" />

Step 15

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

Project

Step 16

After opening the String.xml file, write the following XML code.

String.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="blur_image_text">Blur!</string>
<string name="app_name">Blur Example</string>
<string name="dialogtitle">Blur Image</string>
<string name="dialogmessage">Working</string>
<string name="blur_radius_text">Blur Radius:</string>
</resources>

Step 17

Next, go to the MainActivity.cs page and write the following two namespaces.

using System.Threading.Tasks;
using Android.Graphics;
using Android.Renderscripts;
and also create the variables.
static readonly string PROGRESS_DIALOG_TAG = "progress_dialog";
ImageView imageView;
SeekBar seekBar;
RenderScript renderScript;

Step 18

Now, go to the MainActivity.cs page and write the following code.

MainActivity.cs

protected override void OnCreate(Bundle bundle) {
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
imageView = FindViewById < ImageView > (Resource.Id.originalImageView);
seekBar = FindViewById < SeekBar > (Resource.Id.seekBar1);
seekBar.StopTrackingTouch += BlurImageHandler;
renderScript = RenderScript.Create(this);
}
protected override void OnDestroy() {
renderScript.Destroy();
base.OnDestroy();
}
void BlurImageHandler(object sender, SeekBar.StopTrackingTouchEventArgs e) {
int radius = e.SeekBar.Progress;
if (radius == 0) {
imageView.SetImageResource(Resource.Drawable.dog_and_monkeys);
} else {
DisplayBlurredImage(radius);
}
}
Bitmap CreateBlurredImage(int radius) {
Bitmap originalBitmap = BitmapFactory.DecodeResource(Resources, Resource.Drawable.dog_and_monkeys);
Bitmap blurredBitmap = Bitmap.CreateBitmap(originalBitmap);
ScriptIntrinsicBlur script = ScriptIntrinsicBlur.Create(renderScript, Element.U8_4(renderScript));
Allocation input = Allocation.CreateFromBitmap(renderScript, originalBitmap, Allocation.MipmapControl.MipmapFull, AllocationUsage.Script);
script.SetInput(input);
script.SetRadius(radius);
Allocation output = Allocation.CreateTyped(renderScript, input.Type);
script.ForEach(output);
output.CopyTo(blurredBitmap);
output.Destroy();
input.Destroy();
script.Destroy();
return blurredBitmap;
}
void DismissIndeterminateProgressDialog() {
Fragment frag = FragmentManager.FindFragmentByTag(PROGRESS_DIALOG_TAG);
if (frag != null) {
((DialogFragment) frag).Dismiss();
}
}
void ShowIndeterminateProgressDialog() {
MyProgressDialog progressDialog = FragmentManager.FindFragmentByTag(PROGRESS_DIALOG_TAG) as MyProgressDialog;
if (progressDialog == null) {
var tx = FragmentManager.BeginTransaction();
progressDialog = new MyProgressDialog();
progressDialog.Show(tx, PROGRESS_DIALOG_TAG);
}
}
void DisplayBlurredImage(int radius) {
seekBar.StopTrackingTouch -= BlurImageHandler;
seekBar.Enabled = false;
ShowIndeterminateProgressDialog();
Task.Run(() => {
Bitmap bmp = CreateBlurredImage(radius);
return bmp;
}).ContinueWith(task => {
Bitmap bmp = task.Result;
imageView.SetImageBitmap(bmp);
seekBar.StopTrackingTouch += BlurImageHandler;
seekBar.Enabled = true;
DismissIndeterminateProgressDialog();
}, TaskScheduler.FromCurrentSynchronizationContext());
}
}
public class MyProgressDialog: DialogFragment {
public override Dialog OnCreateDialog(Bundle savedInstanceState) {
ProgressDialog dialog = new ProgressDialog(Activity);
dialog.SetTitle(Resource.String.dialogtitle);
dialog.SetMessage(GetString(Resource.String.dialogmessage));
dialog.Indeterminate = true;
dialog.SetCancelable(false);
return dialog;
}

Step 19

If you have Android Virtual device, run the app on it. Else, connect your Android phone and run the app in that.

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 the Run option.

Project

Output

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

Project

Use the Seek bar to blur the image.

Summary

So, this was the process of blurring an image in Xamarin Android app, using Visual Studio 2015.