Custom Popup Dialog in Xamarin Android
Tags: custompopupdialog, dialog, popupdialog
Published: 2020-01-04 10:07:32

---
title: Custom Popup Dialog in Xamarin Android
published: true
date: 2019-10-01 18:50:00 UTC
tags: Custom Popup Dialog,Dialog,popup Dialog,Xamarin
canonical_url: https://logeshpalani.blogspot.com/2019/10/custom-popup-dialog-in-xamarin-android.html
---

  

**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:**  

[![](https://1.bp.blogspot.com/-yOknYZgd2U4/XZOYI4nlu5I/AAAAAAAAPFA/St5ECvEzvmcve2eYA5A4-Tmv8aCwsMX1QCLcBGAsYHQ/s320/Output.gif)](https://1.bp.blogspot.com/-yOknYZgd2U4/XZOYI4nlu5I/AAAAAAAAPFA/St5ECvEzvmcve2eYA5A4-Tmv8aCwsMX1QCLcBGAsYHQ/s1600/Output.gif)
  
   

**Let start;  **

**Step 1:  **

          First, create a simple Xamarin Android Application by going to New >> Select Android >> followed by clicking Next.    
  

[![](https://1.bp.blogspot.com/-E2PDbYKBk6g/XTzJbrlEkyI/AAAAAAAAOxk/4eFjP1TQKPcY9N32-_2PoORE5jW9glruwCPcBGAYYCw/s320/Project%2Bcreation.jpg)](https://1.bp.blogspot.com/-E2PDbYKBk6g/XTzJbrlEkyI/AAAAAAAAOxk/4eFjP1TQKPcY9N32-_2PoORE5jW9glruwCPcBGAYYCw/s1600/Project%2Bcreation.jpg)

  

  

**Step 2:  **

        Here gives the project name, organization name, app compatibility, and app theme, then click Create project.  

  

[![](https://1.bp.blogspot.com/-YmHhuTlUF6U/XVUUHRXVs9I/AAAAAAAAO-Y/eGPQWTeiS_kdCzudHb2vbJ3HKFV2tubggCPcBGAYYCw/s320/Screen%2BShot%2B2019-08-09%2Bat%2B7.17.08%2BPM.png)](https://1.bp.blogspot.com/-YmHhuTlUF6U/XVUUHRXVs9I/AAAAAAAAO-Y/eGPQWTeiS_kdCzudHb2vbJ3HKFV2tubggCPcBGAYYCw/s1600/Screen%2BShot%2B2019-08-09%2Bat%2B7.17.08%2BPM.png)

  

  

**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 given below.  

  

<!-- HTML generated using hilite.me -->  

| 
```
1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
```
 | 
```
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout\_width="match\_parent"
android:layout\_height="match\_parent">
 <Button
android:text="Show Popup"
android:layout\_width="match\_parent"
android:layout\_height="wrap\_content"
android:textAllCaps="false"
android:id="@+id/btnPopup" />

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

  
<!-- HTML generated using hilite.me -->  

| 
```
1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
```
 | 
```
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout\_width="match\_parent"
android:layout\_height="wrap\_content">
<android.support.constraint.ConstraintLayout
android:layout\_width="match\_parent"
android:layout\_height="wrap\_content"
android:layout\_marginLeft="10dp"
android:layout\_marginRight="10dp"
android:background="@android:color/white">

<TextView
android:id="@+id/allocate\_collector"
app:layout\_constraintTop\_toTopOf="parent"
app:layout\_constraintStart\_toStartOf="parent"
android:layout\_width="wrap\_content"
android:layout\_height="18dp"
android:layout\_marginTop="15dp"
android:layout\_marginLeft="10dp"
android:text="Custom Title"
android:textStyle="bold"
android:textSize="16dp"
android:maxLines="1"
android:textColor="@android:color/black"/>

<TextView
android:id="@+id/patient"
app:layout\_constraintTop\_toBottomOf="@+id/allocate\_collector"
app:layout\_constraintStart\_toStartOf="parent"
android:layout\_marginTop="20dp"
android:layout\_marginLeft="10dp"
android:layout\_width="wrap\_content"
android:layout\_height="14dp"
android:text="My Name"
android:textSize="12dp"/>

<android.support.design.widget.TextInputLayout
android:id="@+id/collector\_name\_txt\_lyt"
app:layout\_constraintTop\_toBottomOf="@+id/patient"
app:layout\_constraintStart\_toStartOf="parent"
android:layout\_width="match\_parent"
android:layout\_height="51dp"
android:layout\_marginTop="15dp"
android:layout\_marginLeft="10dp"
android:layout\_marginRight="10dp">
<AutoCompleteTextView
android:layout\_width="match\_parent"
android:layout\_height="wrap\_content"
android:id="@+id/autocomplete"
android:inputType="textAutoComplete"
android:completionThreshold="1"
android:singleLine="true"
android:gravity="bottom"
android:hint="Name"
android:textSize="14dp"
android:paddingRight="20dp"
android:textColor="@android:color/black"/> 
</android.support.design.widget.TextInputLayout>

<View
android:id="@+id/topview\_of\_logout"
app:layout\_constraintTop\_toBottomOf="@+id/collector\_name\_txt\_lyt"
app:layout\_constraintStart\_toStartOf="parent"
app:layout\_constraintEnd\_toEndOf="parent"
android:layout\_width="match\_parent"
android:layout\_height="1dp"
android:background="#000000"
android:layout\_marginTop="30dp"/>

<View
android:id="@+id/midview\_of\_logout"
app:layout\_constraintTop\_toBottomOf="@+id/topview\_of\_logout"
app:layout\_constraintStart\_toStartOf="parent"
app:layout\_constraintEnd\_toEndOf="parent"
android:layout\_width="1dp"
android:layout\_height="37dp"
android:layout\_marginLeft="1dp"
android:layout\_marginRight="1dp"
android:background="@android:color/black"/>

<Button
android:id="@+id/btnCancel"
app:layout\_constraintTop\_toBottomOf="@+id/topview\_of\_logout"
app:layout\_constraintStart\_toStartOf="parent"
app:layout\_constraintEnd\_toStartOf="@+id/midview\_of\_logout"
android:layout\_width="0dp"
android:layout\_height="43dp"
android:background="@null"
android:text="Cancel"
android:textAllCaps="false"
android:textSize="12dp"/>

<Button
android:id="@+id/btnOk"
app:layout\_constraintTop\_toBottomOf="@+id/topview\_of\_logout"
app:layout\_constraintStart\_toEndOf="@+id/midview\_of\_logout"
app:layout\_constraintEnd\_toEndOf="parent"
android:layout\_width="0dp"
android:layout\_height="43dp"
android:text="Submit"
android:textSize="12dp"
android:textColor="@android:color/black"
android:textAllCaps="false"
android:background="@android:color/white"/>

</android.support.constraint.ConstraintLayout>
</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 gives below. In that code, we are initializing the Alert Dialog object and set 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.  
  

<!-- HTML generated using hilite.me -->  

| 
```
1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
```
 | 
```
using Android.App;
using Android.OS;
using Android.Support.V7.App;
using Android.Views;
using Android.Widget;
using static Android.App.ActionBar;

namespace CustomPopupLayout
{
    [Activity(Label = "@string/app\_name", Theme = "@style/AppTheme", MainLauncher = true)]
public class MainActivity : AppCompatActivity
    {
private Button btnshowPopup;
private Button btnPopupCancel;
private Button btnPopOk;
private Dialog popupDialog;

protected override void OnCreate(Bundle savedInstanceState)
        {
base.OnCreate(savedInstanceState);
// Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
            btnshowPopup = FindViewById<Button>(Resource.Id.btnPopup);
            btnshowPopup.Click += BtnshowPopup\_Click;
        }

private void BtnshowPopup\_Click(object sender, System.EventArgs e)
        {
            popupDialog = new Dialog(this);
            popupDialog.SetContentView(Resource.Layout.activity\_main);
            popupDialog.Window.SetSoftInputMode(SoftInput.AdjustResize);
            popupDialog.Show();

// Some Time Layout width not fit with windows size
// but Below lines are not necessery
            popupDialog.Window.SetLayout(LayoutParams.MatchParent, LayoutParams.WrapContent);
            popupDialog.Window.SetBackgroundDrawableResource(Android.Resource.Color.Transparent);

// Access Popup layout fields like below
            btnPopupCancel = popupDialog.FindViewById<Button>(Resource.Id.btnCancel);
            btnPopOk = popupDialog.FindViewById<Button>(Resource.Id.btnOk);

// Events for that popup layout
            btnPopupCancel.Click += BtnPopupCancel\_Click;
            btnPopOk.Click += BtnPopOk\_Click;

// Some Additional Tips 
// Set the dialog Title Property - popupDialog.Window.SetTitle("Alert Title");
        }

private void BtnPopOk\_Click(object sender, System.EventArgs e)
        {
            popupDialog.Dismiss();
            popupDialog.Hide();
        }

private void BtnPopupCancel\_Click(object sender, System.EventArgs e)
        {
            popupDialog.Dismiss();
            popupDialog.Hide();
        }
    }
}

```
 |

  

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 like below.    
  

[![](https://1.bp.blogspot.com/-yOknYZgd2U4/XZOYI4nlu5I/AAAAAAAAPFE/l1a7uUM3qSIeHZvqghFirDcC2tIVn0PSwCEwYBhgL/s320/Output.gif)](https://1.bp.blogspot.com/-yOknYZgd2U4/XZOYI4nlu5I/AAAAAAAAPFE/l1a7uUM3qSIeHZvqghFirDcC2tIVn0PSwCEwYBhgL/s1600/Output.gif)
  
   
 Download Source [Github](https://github.com/logeshpalani98/XamarinAndroid-CustomPopUpLayout)   
  

**Conclusion:**

    Finally, we have successfully created a custom dialog, I think it helps full for you if you have any suggestions feel free to write in the command section.