SeekBar Using A Listener 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, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

The SeekBar control is visually similar to the ProgressBar but it has a draggable slider that will allow the user to change the value displayed by the control.

Prerequisites

Visual Studio 2015 Update 3.

The steps, given below, are required to be followed in order to use the SeekBar in the 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).

Xamarin

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.

Xamarin

Step 3

Next, go to the Solution Explorer and select Resource-->Layout-->double click to open main.axml page. If you want, you can select source to write the xaml code. And, if you want to design the app using GUI, choose the designer window.

Xamarin

Step 4

After opening the main.axml, the file will open the main page designer. In this page, select how you want to design this page.

Xamarin

Next, delete the default "Hello World" button from the source panel by deleting the button coding.

Then, go to the MainActivity.cs page and delete the c# button action code.

Step 5

Now, go to the Toolbox window. and scroll down until you see all the tools and controls.

You need to drag and drop the SeekBar.

Xamarin

Step 6

You need to drag and drop the TextView.

Xamarin

Step 7

Now, go to the properties window. You need to edit the SeekBar Id Value(EX: android:id="@+id/seekbar" ).

Xamarin

Step 8

And also, edit the TextView Id value(Ex: android:id="@+id/textview" ).

Xamarin

Step 9

In this step, go to the Main.axml page Source Panel. Note the SeekBar Id value.and also note the TextView 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">
<SeekBar android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/seekbar" />
<TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textview" />
</LinearLayout>

Step 10

Go to the MainActivity.cs page in Solution Explorer. Add one sub- class called IOnSeekBarChangeListener. And also, add two variables.

MainActivity.cs

public class MainActivity: Activity, SeekBar.IOnSeekBarChangeListener {
SeekBar _seekBar;
TextView _textView;
}

Step 11

Now, go to the Solution Explorer. Write the following code in OnCreate() Method.

MainActivity.cs

protected override void OnCreate(Bundle bundle) {
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
_seekBar = FindViewById < SeekBar > (Resource.Id.seekbar);
_textView = FindViewById < TextView > (Resource.Id.textview);
_seekBar.SetOnSeekBarChangeListener(this);
}

Step 12

Now, create three methods called, OnProgress Changed, On Start Tracking Touch, OnStop Tracking Touch in the Main class.

public void OnProgressChanged(SeekBar seekBar, int progress, bool fromUser) {
if (fromUser) {
_textView.Text = string.Format("SeekBar value to {0}", seekBar.Progress);
}
}
public void OnStartTrackingTouch(SeekBar seekBar) {
System.Diagnostics.Debug.WriteLine("Tracking changes.");
}
public void OnStopTrackingTouch(SeekBar seekBar) {
System.Diagnostics.Debug.WriteLine("Stopped tracking changes.");
}

Step 13

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.

Xamarin

Output

After a few seconds, the app will start running on your phone.You will see that the SeekBar and slide value is working successfully.

Xamarin

Summary

So, this was the process of using a SeekBar using a Listener in Xamarin Android app.