Check Box In Android Using Xamarin.Forms

Introduction

This article demonstrates checkbox in Android using Xamarin.Forms. Xamarin is a platform that allows us to create a multi-platform app for Android, Windows, or iOS through a single integrated development environment (IDE). And with Xamarin.Forms, the interface design for all three platforms can be accomplished within its XAML-based standard, native user-interfaces control.

Android Output

Step 1

Open Visual Studio and go to New Project >> Installed >> Visual C# >> Cross-Platform. Select Cross-Platform app, then give the project a name and location, and click "OK" button.

Step 2

After project creation, add the following Nuget Packages to your project.

Xlab.Forms

Go to Solution Explorer and select your Solution. Right-click and select "Manage NuGet Packages for Solution".

Now, select the following NuGet Package and select your project to install it.

Step 3

Open Solution Explorer >> Project Name (Portable) >>App.xaml.cs >> Double click. It will open the design view of this page.

The code is given below; just copy it.

C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Xamarin.Forms;
namespace Check_Box
{
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage =new NavigationPage(new MainPage());
}
protected override void OnStart()
{
// Handle when your app starts
}
protected override void OnSleep()
{
// Handle when your app sleeps
}
protected override void OnResume()
{
// Handle when your app resumes
}
}
}

Step 4

Next, add an image to Solution Explorer >> Project Name.Android >> Resources >> Right-Click >> Ddrawable >> Add >> Existing Item.

When you click an existing item button, it opens a dialogue box.

Choose image location and add images.

The image is added successfully. Then move the cursor to that image and verify the image.

Step 5

Now, Open the Solution Explorer >> Project Name (Portable) >> Right-Click >> Add >> New Item or ctrl+Shift+A.

A new dialogue box will open. Now, add the XAML page and give it a name. Click the "Add" button. The XAML page name is "Page1".

Step 6

Open Solution Explorer >> Project Name (Portable) >> MainPage.xaml. Double click for opening the design view of this page.

The code is given below just copy it.

Xaml Code

We are creating a button image inside the stacklayout and button name is "Check Box" and using clicked event.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Check_Box"
x:Class="Check_Box.MainPage">
<ContentPage.Content>
<StackLayout>
<Button Text="Check Box"
Image="icon.png"
Clicked="Button_Clicked"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Step 7

Open Solution Explorer >> Project Name (Portable) >> MainPage.xaml.cs. Double click for opening the design view of this page.

The code is given below just copy it.

C# Code

This code is button code. The page name is "Page1".

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace Check_Box
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
private async void Button_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new Page1());
}
}
}

Step 8

Open Solution Explorer >> Project Name (Portable) >> Page1.xaml. Double click for opening the design view of this page.

The code is given below just copy it.

Xaml Code

We are using a control for checkbox and default test using there are "Android", "Windows", "iOS".

xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"
x:Class="Check_Box.Page1">
<ContentPage.Content>
<StackLayout>
<controls:CheckBox DefaultText="Android" HorizontalOptions="FillAndExpand" />
<controls:CheckBox DefaultText="Windows" HorizontalOptions="FillAndExpand" />
<controls:CheckBox DefaultText="iOS" HorizontalOptions="FillAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

Step 9

Next, select the Build & Deploy option followed by selecting from the list of Android Emulator. You can choose any API (Application Program Interface) Level Emulator to run it.

Output

After a few seconds, you will see your app working.

Android Output

Finally, we have successfully created Xamarin.Forms application.

Conclusion

I hope you have learned about Check Box in Android Using Xamarin.Forms with Visual Studio and C#.

5 Comments

Join the conversation! Your thoughts help the community grow.

Ádám Fehér7y ago
Good. But how to handle checked changed event
Akash SS7y ago
How to get checkbox values on button click
jneid charbel7y ago
Hi can you show me how are you able to add the Xlabs.Forms in nuget manager and this Plugins require .net framework 4.6.1 or higher , i'm facing a problem with adding this plugin to my solution which using .Net Standard 2.0 . any help please ?
Ashish Christian8y ago
Nice Article..
Viknaraj Manogararajah8y ago
Nice article....