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#.