Alternate Keyboard In Android Using Xamarin.Forms

Introduction

 

This article demonstrates an Alternate keyboard 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 platform 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 

 

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 WorkingWithText
{
    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 3 

 

Next, add an image to Solution Explorer >> Project Name.Android >> Resources >> Right-Click >> Drawable >> 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 >> ProjectName.(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 an image button and the button text is "Text and keyboard" and we're using clicked event inside the StackLayout. 

<?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:WorkingWithText"
             x:Class="WorkingWithText.MainPage">

    <ContentPage.Content>
        <StackLayout>
            <Button Text="Text and Keyboard"
                  Image="icon.png"
                  Clicked="Button_Clicked"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Step 7 

 

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

 

 

 

The Code is given below, just copy it. 

 

 

 

C# Code 

 

This code is button code. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace WorkingWithText
{
    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 creating an Entry, placeholder, and Keyboard. Keyboard there are "Numeric", "Telephone", "Email", "Url" inside the StackLayout.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WorkingWithText.Page1">

    <ContentPage.Content>
        <StackLayout Spacing="20">
            <Entry Placeholder="Name"/>
            <Entry Placeholder="Enter Your Age"  Keyboard="Numeric"/>
            <Entry Placeholder="Enter a Mobile Number"  Keyboard="Telephone"/>
            <Entry Placeholder="Enter a E-mail" Keyboard="Email"/>
            <Entry Placeholder="Enter a url" Keyboard="Url"/>
        </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 

 

If you  Click Entry "Name" result is displayed "Normal Keyboard".

 

 

 

If you Click Entry "Enter Your Age" result is displayed as "Numeric Keyboard". 

 

 

 

If you Click Entry "Enter a Mobile Number" result is displayed as "Telephonic Keyboard".  

 

 

 

If you Click Entry "Enter Your Age" result is displayed as "E-mail Keyboard" and the  "@" button is visible. 

 

 

 

If you Click Entry "Enter a URL" result is displayed as "E-mail Keyboard" and the "/" button is visible.   

 

 

 

The result is displayed with an alternate keyboard using the entry 

 

 

 

Finally, we have successfully created Xamarin.Forms application. 

 

Conclusion 

 

I hope you have learned about the Alternate keyboard in Android using Xamarin.Forms with Visual Studio and C#.