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