Creating A Toggle Button 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).  The code sharing concept is used in the Xamarin platform, and it's available in Visual Studio also.

Toggle Button is used to change a setting between two states (on and off).

Prerequisites

• Visual studio 2015 update 3

The following steps need to be followed in order to create a Toggle Button in Xamarin Android app using Visual Studio 2015.

Step 1

Click file--> Select New--> Next select Project. Click on project after opening all the type 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).

Next give your Android App a name(Ex:sample) and give the path of your project. After click ok.

 

Step 3

Next go to the solution explorer. The solution explorer has all files and sources for your project.

Next Select Resource-->Layout-->double click to open main.axml page. you want select source to write the xaml code.

If you want to design choose the designer window where you can design your app.

 

Step 4

After opening the main.axml file will open the main page designer. In this page choose which type you want so you can design this page.



Next, delete the default "Hello World" button.

Go to the source panel. You can see the button coding. Just delete it. After deleting the XAML codes, delete the C# button action code.

Go to the MainActivity.cs page and delete the code.

Step 5

Next go to the toolbox window. The toolbox window has all types of the tools and controls.You will go to the toolbox window, next scroll down.

You will see all tools and controls.

You will drag and drop the Toggle Button.

 

 

Step 6

This step is to resize the button.

 

Step 7

Next go to the properties window where you will edit the Toggle Button textOn and textOff  (Ex: android:textOn="On"

android:textOff="Off" ).

 

Step 8

In this step edit the Toggle Button id (ex: android:id="@+id/togglebutton")

 

Step 9

In this step you will see the main.axml page source panel.

 

Main.axml

<ToggleButton android:id="@+id/togglebutton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textOn="On" android:textOff="Off" android:gravity="center" />

Step 10

Next go to MainActivity.cs page and write the following code. between the 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);
    ToggleButton togglebutton = FindViewById < ToggleButton > (Resource.Id.togglebutton);
    togglebutton.Click += (o, e) => {
        // Perform action on clicks
        if (togglebutton.Checked) Toast.MakeText(this, "On", ToastLength.Short).Show();
        else Toast.MakeText(this, "Off", ToastLength.Short).Show();
    };
}

 

 

Step 11

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.

 

 

Output

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

Button on shows the text is On.



Off shows the text is Off.



Summery

So this was the process of creating a Toggle Button in Xamarin Android App using visual studio 2015.