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

Question

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

Solution 1

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

Solution 2

This worked great for me, but is missing how to close the dialog. if you have a button in your custom layout to close it, here is how to add the listener and close the dialog window.

final Dialog d = new Dialog(this,R.style.CustomDialogTheme);
d.setContentView(R.layout.custom_dialog);
d.show();

Button close_btn = (Button) d.findViewById(R.id.close_btn);
close_btn.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        d.dismiss();
    }
});

Comments

[justinl]

Thanks for adding that extra bit of info :)

[Tolga E]

this gets rid of the border but it still leaves a black lines around my layout.. Any ideas?