Xamarin.Android - User Input Dialog

Introduction
 
This article is an attempt to demystify the use of dialog box to gather user input. It is not intended to be exhaustive, rather, it is aimed at new or beginning programmers. A Dialog window is an independent subwindow meant to carry temporary notice apart from the main application window. Most Dialogs present an error message or warning to a user, but Dialogs can present images, directory trees, or just about anything compatible with the main Application that manages them.
 
Prerequisites
  • Android Support Library v7 AppCompat
The steps given below are required to be followed in order to create a user input dialog in Xamarin Android, using Visual Studio. 
 
Step 1
 
Open Visual Studio and go to New Project-> Templates-> Visual C#-> Android-> Blank app. Give it a name, like UserInputDialog.
 


Step 2
 
Go to Solution Explorer-> Components -> then Right Click-> Get More Components. In this way, you can move on Xamarin Components Store, search for AppCompat, and add that to the app.
 
 
Step 3
 
Open Solution Explorer-> Project Name-> Resources-> Layout-> Right Click to Add-> New Item, select Layout from list, give it a name like user_input_dialog_box.axml, and add the following code.

The layout will have a TextView in order to display the preview of Dialog Title. I also added an EditText to input the text in the dialog.
(FileName: user_input_dialog_box.axml)

XML Code
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent">  
  6.     <TextView  
  7.         android:id="@+id/dialogTitle"  
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:text="Dialog Title"  
  11.         android:textAppearance="?android:attr/textAppearanceLarge" />  
  12.     <EditText  
  13.         android:id="@+id/editText"  
  14.         android:layout_width="match_parent"  
  15.         android:layout_height="wrap_content"  
  16.         android:hint="Enter Something" />  
  17. </LinearLayout>  
Step 4
 
Open Solution Explorer-> Project Name-> Resources-> Layout-> Main.axml and add the following code.
 
XML Code 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:minWidth="25px"  
  7.     android:minHeight="25px">  
  8.     <Button  
  9.         android:text="Show Dialog"  
  10.         android:layout_width="match_parent"  
  11.         android:layout_height="wrap_content"  
  12.         android:id="@+id/btnShowDialog" />  
  13. </LinearLayout>  
Step 5
 
Now, go to solution Explorer-> Project Name-> MainActivity file and add following code using the appropriate namespaces.
(FileName: MainActivity.cs)

MainActivity C# Code
  1. using Android.App;  
  2. using Android.Widget;  
  3. using Android.OS;  
  4. using Android.Support.V7.App;  
  5. using Android.Views;  
  6. namespace User_Input_Dialog  
  7. {  
  8.     [Activity(Label = "User_Input_Dialog", MainLauncher = true, Theme ="@style/Theme.AppCompat.Light")]  
  9.     public class MainActivity : AppCompatActivity  
  10.     {  
  11.         protected override void OnCreate(Bundle savedInstanceState)  
  12.         {  
  13.             base.OnCreate(savedInstanceState);  
  14.             // Set our view from the "main" layout resource  
  15.             SetContentView(Resource.Layout.Main);  
  16.             Button button = FindViewById<Button>(Resource.Id.btnShowDialog);  
  17.             button.Click += delegate {  
  18.                 LayoutInflater layoutInflater = LayoutInflater.From(this);  
  19.                 View view = layoutInflater.Inflate(Resource.Layout.user_input_dialog_box , null);  
  20.                 Android.Support.V7.App.AlertDialog.Builder alertbuilder = new Android.Support.V7.App.AlertDialog.Builder(this);  
  21.                 alertbuilder.SetView(view);  
  22.                 var userdata = view.FindViewById<EditText>(Resource.Id.editText);  
  23.                 alertbuilder.SetCancelable(false)  
  24.                 .SetPositiveButton("Submit", delegate  
  25.                 {  
  26.                     Toast.MakeText(this"Submit Input: " + userdata.Text, ToastLength.Short).Show();  
  27.                 })  
  28.                 .SetNegativeButton("Cancel", delegate   
  29.                 {  
  30.                     alertbuilder.Dispose();  
  31.                 });  
  32.                 Android.Support.V7.App.AlertDialog dialog = alertbuilder.Create();  
  33.                 dialog.Show();  
  34.             };  
  35.         }  
  36.     }  
  37. }  
Output

After a few seconds, the app will start running on your Android Emulator. You will see that your app is working successfully.
 


Summary

This was the process of how to create a user input dialog in Xamarin Android, using Visual Studio.