How to set Transparent Background as a Custom Dialog Box in android

Question

I need to make my custom dialog box as a transparent.

Sample Code :

Dialog dialog;
@Override
protected Dialog onCreateDialog(int id) 
{ 
    switch(id) 
    {
        case 1:
            AlertDialog.Builder builder = null;
            Context mContext = this;
            LayoutInflater inflater = ( LayoutInflater ) mContext.getSystemService( LAYOUT_INFLATER_SERVICE );
            View layout = inflater.inflate( R.layout.about_page, ( ViewGroup ) findViewById( R.id.about_Root ) );
            builder = new AlertDialog.Builder( mContext );
            builder.setView( layout );
            dialog = builder.create();
            break;
    }
    return dialog;
}

How do set Transparent Dialog Box.

My XML Code :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/about_Root"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/alert_page_border"
    android:orientation="vertical" >        
    <TextView 
        android:id="@+id/about_Title"
        android:layout_width="wrap_content"
        android:layout_height="0dip"
        android:gravity="center"
        android:layout_weight="1"
        android:textSize="25dip"
        android:textColor="@android:color/white"
        android:textStyle="bold|italic"
        android:text="Welcome" />
</LinearLayout>

Code Alert_page_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">     
    <solid android:color="#3b3b3b" />
    <stroke 
        android:width="3dp"
        android:color="#ffffff" />
    <padding 
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp" /> 
    <corners 
        android:radius="2dp" />     
</shape>

Sample Screenshot :

enter image description here

How do avoid this block color.

My AndroidManifest.xml file Like this http://stackoverflow.com/questions/2176922/how-to-create-transparent-activity-in-android — Bala, Aug 08 '12 at 12:27
I have added this code `android:theme="@style/Theme.Transparent"` to my AndroidManifest.xml File. — Bala, Aug 08 '12 at 12:39

score 52 · Answer 1 · answered Mar 06 '13 at 11:01

52

Use dialog instead of AlertDialog

final Dialog dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
dialog.setContentView(R.layout.splash);
dialog.show();

answered Mar 06 '13 at 11:01

ilomambo

8,290
12
57
106

Width of dialog is fit to the screen.Is there is any workaround for this? – void pointer Jul 28 '16 at 11:15

score 4 · Answer 2 · answered Aug 08 '12 at 12:24

If you are on API >= 11, you can try to set a theme to your Dialog like that :

new AlertDialog.Builder(mContext , android.R.style.Theme_Translucent_NoTitleBar_Fullscreen);

Or you can try to set the background transparent :

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(0));

score 3 · Answer 3 · answered Aug 08 '12 at 12:29

Just create a style and apply that to your dialog

    <style name="myDialogTheme" parent="@android:style/Theme.Dialog">
        <item name="android:windowBackground">@color/Transparent</item>
        <item name="android:windowIsFloating">false</item>
        <item name="android:windowNoTitle">true</item>
    </style>

Then, create your Dialog by using this theme;

    Dialog myDialog = new Dialog(this,R.style.myDialogTheme) {
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.about_page);
        }
    };

Hope this will help you to achieve your goal.

Midhu I already referred to apply this code. This code is not working for me. — Bala, Aug 08 '12 at 12:44

Lawrence Gimenez · Answer 4 · 2012-08-08T12:42:44.907

1

Try this,

layout.setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

add the code above after this line.

View layout = inflater.inflate( R.layout.about_page, ( ViewGroup ) findViewById( R.id.about_Root ) );

edited Aug 08 '12 at 12:42

answered Aug 08 '12 at 12:24

Lawrence Gimenez

2,662
4
34
52

userIsAMonkey I got the same Screen Shot. – Bala Aug 08 '12 at 12:38
So you have to try Midhu's answer just below by applying style to your Dialog (you will have to drop the use of the builder though) – Plumillon Forge Aug 08 '12 at 12:43
Sorry! Edited it, it's setBackgroundDrawable, but it is depreciated in Jelly Bean. – Lawrence Gimenez Aug 08 '12 at 12:43
Plumillon is right. I used the above code using my Activity as a Themed dialog. – Lawrence Gimenez Aug 08 '12 at 12:44
userIsAMonkey I have already change your Code `layout.setBackgroundDrawable` to workout my example. I got the Same Screen Shot. – Bala Aug 08 '12 at 12:46

score 1 · Answer 5 · edited May 23 '17 at 12:02

This question of yours describes exactly what my problem was. I tried every single solution I stumbled upon in this thread as well as in several more threads. Nothing worked. Finally I stumbled upon this thread and the corresponding answer.

I had to create a custom dialog class. So I did and it worked. Actually the following styles were sufficient for me:

colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="transparent_black">#66000000</color>
</resources>

styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="custom_dialog_theme" parent="@android:style/Theme.Translucent">
        <item name="android:windowBackground">@color/transparent_black</item>
        <item name="android:windowIsFloating">true</item>
    </style>
</resources>

The code of the dialog class:

import android.app.Dialog;
import android.content.Context;

import my.app.com.android.R;

public class CustomDialog extends Dialog {
    public AddBookCustomDialog(final Context context) {
        super(context, R.style.custom_dialog_theme);
        this.setContentView(R.layout.add_book_dialog);
    }
}

And how I use this dialog in the activity code:

CustomDialog customDialog = new CustomDialog(this);
customDialog.show();

I don't know why I have to create a custom class in order for the theme to be taken into account. Now I have achieved what I wanted to do: transparent dialog. The next fight will be to position positive and negative buttons as long as I can no longer user the convenience methods of AlertDialog.Builder. Hopefully my code will prove of help to you.

Also notice the low value of alpha - maybe even try it with 00 so that you make sure whether your configuration works.

score 1 · Answer 6 · edited Mar 01 '16 at 06:20

Use dialog.getWindow().setBackgroundDrawable(null) to remove the default background.

Here is the doc for reference:

/*** Set the background to a given Drawable, or remove the background. If the
   * background has padding, this View's padding is set to the background's
   * padding. However, when a background is removed, this View's padding isn't
   * touched. If setting the padding is desired, please use
   * {@link #setPadding(int, int, int, int)}.
   *
   * @param d The Drawable to use as the background, or null to remove the
   *        background
   */

You are the bomb mate ! This worked fantastically :) – user2582651 Mar 19 '17 at 18:09 — user2582651, Mar 19 '17 at 18:09

score 0 · Answer 7 · answered Aug 08 '12 at 12:17

0

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/a"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent" android:background="#00000000">

 <!-- Write your LinearLayout code here -->

 </RelativeLayout>

Try this code.

answered Aug 08 '12 at 12:17

Krishna Suthar

3,071
6
31
37

Krishna I got the same Problem after modified the XML Code. – Bala Aug 08 '12 at 12:30
Set height and width of your layout. Set its gravity – Krishna Suthar Aug 08 '12 at 12:33
This didn't work for me... I get a greyish back color. – Si8 Dec 09 '16 at 10:51

score 0 · Answer 8 · answered Apr 10 '14 at 13:04

0

just remove

from Alert_page_border.xml

answered Apr 10 '14 at 13:04

Deepesh

1
2

remove – Deepesh Apr 10 '14 at 13:05

How to set Transparent Background as a Custom Dialog Box in android

8 Answers8

Linked