How to create a completely custom Dialogue/Popup in Android (change overlay colour and dialogue window layout)

by

I’ve solved this problem and created my own custom popup overlay with a custom coloured semi-transparent overlay background using the following steps:

1 – Create a new xml file in your res/values/ folder and name it styles.xml

2 – Here is where you will define your dialog properties. Here is what mine looks like. If you want to replace the default semi-transparent black overlay that shows over the screen, you have to set windowIsFloating to false, and modify the background of your layout to be whatever colour you want. Here is my file below that I’ve used:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CustomDialogTheme" parent="@android:style/Theme.Dialog">
        <item name="android:windowBackground">@color/transparent_white</item>
        <item name="android:windowIsFloating">false</item>
        <item name="android:windowNoTitle">true</item>
    </style>
</resources>

3 – Back in your java code, when creating the dialog object, use the constructor that passes both the context AND the theme. Eg. myDialog = new Dialog(this, R.style.CustomDialogTheme); (CustomDialogTheme is the name attribute I specified in the styles.xml from step 2)

4 – Simply set your dialog objects content view to whatever layout you want your dialog to look like. Eg. myDialog.setContentView(R.layout.my_custom_overlay);
If you want your dialog to appear at the center of the screen, set its root element’s android:layout_gravity to center

Leave a Comment

tech