Custom Popup Dialog In Xamarin Android

Introduction


In this article, we go step by step to build a custom popup dialog for Xamarin Android. The popup dialog is just a window that prompts to enter additional details. Where we can use the popup dialog means, in some cases, we want some decision from the user without changing the activity or screen.
 
Output
 
 
Let's start.
 
Step 1
 
First, create a simple Xamarin Android Application by going to New >> Select Android >> followed by clicking Next.
 
 
Step 2
 
Here give the project name, organization name, app compatibility, and app theme, then click Create project.
 
 
Step 3
 
After the project creation, double click to open Main.axml. For that, Solution Explorer >> expand the Resources folder and Layout folder, double click to open Main.axml. Now, drag and drop to place one button, this page code is given below.
  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.  <Button    
  7.   android:text="Show Popup"    
  8.   android:layout_width="match_parent"    
  9.   android:layout_height="wrap_content"    
  10.   android:textAllCaps="false"    
  11.   android:id="@+id/btnPopup" />    
  12.     
  13. </LinearLayout>     
Step 4
 
Now, add a new Layout named Popup.axml. For that, right-click the Layout Folder and select Add >> New and the new popup window will appear, select Layout and name as Popup.axml and click Add.
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <FrameLayout    
  3.     xmlns:android="http://schemas.android.com/apk/res/android"    
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"    
  5.     android:layout_width="match_parent"    
  6.     android:layout_height="wrap_content">    
  7.          <android.support.constraint.ConstraintLayout    
  8.                     android:layout_width="match_parent"    
  9.                     android:layout_height="wrap_content"    
  10.                     android:layout_marginLeft="10dp"    
  11.                     android:layout_marginRight="10dp"    
  12.                     android:background="@android:color/white">    
  13.                     
  14.                     <TextView    
  15.                         android:id="@+id/allocate_collector"    
  16.                         app:layout_constraintTop_toTopOf="parent"    
  17.                         app:layout_constraintStart_toStartOf="parent"    
  18.                         android:layout_width="wrap_content"    
  19.                         android:layout_height="18dp"    
  20.                         android:layout_marginTop="15dp"    
  21.                         android:layout_marginLeft="10dp"    
  22.                         android:text="Custom Title"    
  23.                         android:textStyle="bold"    
  24.                         android:textSize="16dp"    
  25.                         android:maxLines="1"    
  26.                         android:textColor="@android:color/black"/>    
  27.     
  28.                     <TextView    
  29.                         android:id="@+id/patient"    
  30.                         app:layout_constraintTop_toBottomOf="@+id/allocate_collector"    
  31.                         app:layout_constraintStart_toStartOf="parent"    
  32.                         android:layout_marginTop="20dp"    
  33.                         android:layout_marginLeft="10dp"    
  34.                         android:layout_width="wrap_content"    
  35.                         android:layout_height="14dp"    
  36.                         android:text="My Name"    
  37.                         android:textSize="12dp"/>    
  38.     
  39.                     <android.support.design.widget.TextInputLayout    
  40.                             android:id="@+id/collector_name_txt_lyt"    
  41.                             app:layout_constraintTop_toBottomOf="@+id/patient"    
  42.                             app:layout_constraintStart_toStartOf="parent"    
  43.                             android:layout_width="match_parent"    
  44.                             android:layout_height="51dp"    
  45.                             android:layout_marginTop="15dp"    
  46.                             android:layout_marginLeft="10dp"    
  47.                             android:layout_marginRight="10dp">    
  48.                           <AutoCompleteTextView      
  49.                                 android:layout_width="match_parent"      
  50.                                 android:layout_height="wrap_content"    
  51.                                 android:id="@+id/autocomplete"    
  52.                                 android:inputType="textAutoComplete"    
  53.                                 android:completionThreshold="1"    
  54.                                 android:singleLine="true"    
  55.                                 android:gravity="bottom"    
  56.                                 android:hint="Name"    
  57.                                 android:textSize="14dp"    
  58.                                 android:paddingRight="20dp"    
  59.                                 android:textColor="@android:color/black"/>     
  60.                     </android.support.design.widget.TextInputLayout>    
  61.     
  62.                  <View    
  63.                   android:id="@+id/topview_of_logout"    
  64.                   app:layout_constraintTop_toBottomOf="@+id/collector_name_txt_lyt"    
  65.                   app:layout_constraintStart_toStartOf="parent"    
  66.                   app:layout_constraintEnd_toEndOf="parent"    
  67.                   android:layout_width="match_parent"    
  68.                   android:layout_height="1dp"    
  69.                   android:background="#000000"    
  70.                   android:layout_marginTop="30dp"/>    
  71.     
  72.                  <View    
  73.                   android:id="@+id/midview_of_logout"    
  74.                   app:layout_constraintTop_toBottomOf="@+id/topview_of_logout"    
  75.                   app:layout_constraintStart_toStartOf="parent"    
  76.                   app:layout_constraintEnd_toEndOf="parent"    
  77.                   android:layout_width="1dp"    
  78.                   android:layout_height="37dp"    
  79.                   android:layout_marginLeft="1dp"    
  80.                   android:layout_marginRight="1dp"    
  81.                   android:background="@android:color/black"/>    
  82.     
  83.                  <Button    
  84.                   android:id="@+id/btnCancel"    
  85.                   app:layout_constraintTop_toBottomOf="@+id/topview_of_logout"    
  86.                   app:layout_constraintStart_toStartOf="parent"    
  87.                   app:layout_constraintEnd_toStartOf="@+id/midview_of_logout"    
  88.                   android:layout_width="0dp"    
  89.                   android:layout_height="43dp"    
  90.                   android:background="@null"    
  91.                   android:text="Cancel"    
  92.                   android:textAllCaps="false"    
  93.                   android:textSize="12dp"/>    
  94.     
  95.                  <Button    
  96.                   android:id="@+id/btnOk"    
  97.                   app:layout_constraintTop_toBottomOf="@+id/topview_of_logout"    
  98.                   app:layout_constraintStart_toEndOf="@+id/midview_of_logout"    
  99.                   app:layout_constraintEnd_toEndOf="parent"    
  100.                   android:layout_width="0dp"    
  101.                   android:layout_height="43dp"    
  102.                   android:text="Submit"    
  103.                   android:textSize="12dp"    
  104.                   android:textColor="@android:color/black"    
  105.                   android:textAllCaps="false"    
  106.                   android:background="@android:color/white"/>    
  107.     
  108.             </android.support.constraint.ConstraintLayout>    
  109. </FrameLayout>     
Step 5

Next, open MainActivity.cs and add the following code to Invoke the popup dialog in the UI. For that, open Solution Explorer >> MainActivity.cs. This page code is given below. In that code, we are initializing the Alert Dialog object and setting up the layout. We can access the layout widget properties by using the “window.FindViewById<TextView>(Resource.Id.widgetId)”, otherwise you’re trying to access directly, NullException will be thrown.
  1. using Android.App;  
  2. using Android.OS;  
  3. using Android.Support.V7.App;  
  4. using Android.Views;  
  5. using Android.Widget;  
  6. using static Android.App.ActionBar;  
  7.   
  8. namespace CustomPopupLayout  
  9. {  
  10.     [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]  
  11.     public class MainActivity : AppCompatActivity  
  12.     {  
  13.         private Button btnshowPopup;  
  14.         private Button btnPopupCancel;  
  15.         private Button btnPopOk;  
  16.         private Dialog popupDialog;  
  17.   
  18.         protected override void OnCreate(Bundle savedInstanceState)  
  19.         {  
  20.             base.OnCreate(savedInstanceState);  
  21.             // Set our view from the "main" layout resource  
  22.             SetContentView(Resource.Layout.Main);  
  23.             btnshowPopup = FindViewById<Button>(Resource.Id.btnPopup);  
  24.             btnshowPopup.Click += BtnshowPopup_Click;  
  25.         }  
  26.   
  27.         private void BtnshowPopup_Click(object sender, System.EventArgs e)  
  28.         {  
  29.             popupDialog = new Dialog(this);  
  30.             popupDialog.SetContentView(Resource.Layout.activity_main);  
  31.             popupDialog.Window.SetSoftInputMode(SoftInput.AdjustResize);  
  32.             popupDialog.Show();  
  33.   
  34.             // Some Time Layout width not fit with windows size  
  35.             // but Below lines are not necessery  
  36.             popupDialog.Window.SetLayout(LayoutParams.MatchParent, LayoutParams.WrapContent);  
  37.             popupDialog.Window.SetBackgroundDrawableResource(Android.Resource.Color.Transparent);  
  38.   
  39.             // Access Popup layout fields like below  
  40.             btnPopupCancel = popupDialog.FindViewById<Button>(Resource.Id.btnCancel);  
  41.             btnPopOk = popupDialog.FindViewById<Button>(Resource.Id.btnOk);  
  42.   
  43.             // Events for that popup layout  
  44.             btnPopupCancel.Click += BtnPopupCancel_Click;  
  45.             btnPopOk.Click += BtnPopOk_Click;  
  46.   
  47.             // Some Additional Tips   
  48.             // Set the dialog Title Property - popupDialog.Window.SetTitle("Alert Title");  
  49.         }  
  50.   
  51.         private void BtnPopOk_Click(object sender, System.EventArgs e)  
  52.         {  
  53.             popupDialog.Dismiss();  
  54.             popupDialog.Hide();  
  55.         }  
  56.   
  57.         private void BtnPopupCancel_Click(object sender, System.EventArgs e)  
  58.         {  
  59.             popupDialog.Dismiss();  
  60.             popupDialog.Hide();  
  61.         }  
  62.     }  
  63. }  
Additional Tip
 
In here, you can easily set alert dialog Title by using “AlertDialog.SetTitle” property.
 
Step 6
 
Now run your Xamarin Android, your output will look like below.
 
 
Download Source Github

Conclusion

 
Finally, we have successfully created a custom dialog, I hope it's helpful.  If you have any suggestions feel free to write in the comments section.