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  
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5.   
  6. using Xamarin.Forms;  
  7.   
  8. namespace WorkingWithText  
  9. {  
  10.     public partial class App : Application  
  11.     {  
  12.         public App()  
  13.         {  
  14.             InitializeComponent();  
  15.   
  16.             MainPage = new NavigationPage(new MainPage());  
  17.         }  
  18.   
  19.         protected override void OnStart()  
  20.         {  
  21.             // Handle when your app starts  
  22.         }  
  23.   
  24.         protected override void OnSleep()  
  25.         {  
  26.             // Handle when your app sleeps  
  27.         }  
  28.   
  29.         protected override void OnResume()  
  30.         {  
  31.             // Handle when your app resumes  
  32.         }  
  33.     }  
  34. }  
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. 
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:WorkingWithText"  
  5.              x:Class="WorkingWithText.MainPage">  
  6.   
  7.     <ContentPage.Content>  
  8.         <StackLayout>  
  9.             <Button Text="Text and Keyboard"  
  10.                   Image="icon.png"  
  11.                   Clicked="Button_Clicked"/>  
  12.         </StackLayout>  
  13.     </ContentPage.Content>  
  14. </ContentPage>  
  15.    
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. 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6. using Xamarin.Forms;  
  7.   
  8. namespace WorkingWithText  
  9. {  
  10.     public partial class MainPage : ContentPage  
  11.     {  
  12.         public MainPage()  
  13.         {  
  14.             InitializeComponent();  
  15.         }  
  16.   
  17.         private async void Button_Clicked(object sender, EventArgs e)  
  18.         {  
  19.             await Navigation.PushAsync(new Page1());  
  20.         }  
  21.     }  
  22. }  
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.
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              x:Class="WorkingWithText.Page1">  
  5.   
  6.     <ContentPage.Content>  
  7.         <StackLayout Spacing="20">  
  8.             <Entry Placeholder="Name"/>  
  9.             <Entry Placeholder="Enter Your Age"  Keyboard="Numeric"/>  
  10.             <Entry Placeholder="Enter a Mobile Number"  Keyboard="Telephone"/>  
  11.             <Entry Placeholder="Enter a E-mail" Keyboard="Email"/>  
  12.             <Entry Placeholder="Enter a url" Keyboard="Url"/>  
  13.         </StackLayout>  
  14.     </ContentPage.Content>  
  15. </ContentPage>  
  16.       
  17.       
  18.       
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#.


Similar Articles