Transparent AlertDialog has black background

Question

I have a custom AlertDialog style that makes the AlertDialog box transparent. It works fine except that when I inflate my desired transparent layout into the alert dialog window, it shows up with a black background. My goal is to have a completely transparent AlertDialog to where it seems as if there are only 4 buttons floating rather than a frame. Image one is what the custom dialog is giving me, image two is my desired or what I am aiming for.

Here is the code to the custom Dialog

<style name="CustomDialog" parent="android:Theme.Dialog">
    <item name="android:windowFrame">@null</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowTitleStyle">@null</item>
    <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
    <item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
    <item name="android:backgroundDimEnabled">false</item>
    <item name="android:background">@android:color/transparent</item>
</style>

Here is what I am calling in my onCreate()

AlertDialog.Builder imageDialog = new AlertDialog.Builder(TimeLine.this, R.style.CustomDialog);
inflater = getLayoutInflater();
View view=inflater.inflate(R.layout.tabs, null);
AlertDialog a = imageDialog.create();
a.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
a.setView(view, 0, 0, 0, 0);

a.show();

Edit* The code for the tabs layout xml is here `

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:id="@+id/tabLayout"
    android:background="#000000ff">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button2"
        android:layout_marginTop="206dp"
        android:layout_below="@+id/button4"
        android:layout_alignStart="@+id/button4" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button3"
        android:layout_alignTop="@+id/button2"
        android:layout_alignParentStart="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button4"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="100dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="100dp" />
</RelativeLayout>

`

From testing to see what the source of the problem is, I have found out that it is true that the layout is transparent because when I change the background color of the layout, so does the alert dialog change. However when the layout is set to transparent, it seems that what is behind the inflated layout is black. And because of that I am unsure of what to do or whether it is the AlertDialog settings or my layout code.

Answer 1

The problem is that AlertDialog builder is actually not good for designing transparent dialog and will and always have this black background which is actually a Theme for it, instead use the Dialog to create a transparent theme instead.

sample:

Dialog alertDialog = new Dialog(this);
alertDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
alertDialog.setContentView(R.layout.tabs);
alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
alertDialog.show();

Using Dialog does not require any theme manipulation for transparent background so it is basically easy.

Answer 2

Have you tried using something like this:

<style name="CustomDialog" parent="@android:style/Theme.Translucent">
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:colorBackgroundCacheHint">@null</item>
    ...
</style>

EDIT

Try this in java code

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

Answer 3

Those who are having still problem creating custom transparent dialog or alert dialog, can use this combination. I also wanted to show custom background this is what worked for me.

getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

example:-

/**
 * alert dialog
 */

    public class ToolTipView extends AlertDialog {

        public ToolTipView(@NonNull Context context) {
            super(context);
            getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
            getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        }

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.dialog_tool_tip_view);
        }

    }

Answer 4

In your R.layout.tabs,

Replace

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:id="@+id/tabLayout"
    android:background="#000000ff">

with

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:id="@+id/tabLayout"
    android:background="@android:color/transparent">