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

android, dialog, overlay, popup

Solution

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`

Problem

I would like to completely re-skin the default dialogue component in Android. Specifically I would like to do this: Change the semi-transparent overlay background from the default black to a semi-transparent white. Change the Dialogue window by removing the default windowed frame border, and replacing it with a layout defined in XML (it's just going to be a borderless graphic with floating buttons. no actual frame.) I have seen tutorials about creating a custom layout for within the dialogue box (e.g. http://www.helloandroid.com/tutorials/how-display-custom-dialog-your-android-application), but I haven't seen anything regarding changing the colour of the overlay and/or completely customizing the dialogue window that pops up and turning it more into an overlay with no "window".

Original source