Chris Chris - 4 months ago 20
Android Question

Android Custom Dialog Design

I am working on a custom dialog design for my application. However, I have some problems with the design. I want to create the following:

Here is  the screenshot of the dialog

I have almost everything done, only one part is missing.
The border which I highlighted here in black (which is in the real application white, background color of the dialog) should be transparent but only this black part.

Here is the XML code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="335dp"
android:orientation="vertical" >

<RelativeLayout
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_gravity="center_horizontal"
android:adjustViewBounds="false"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="@drawable/dialog_circle"
android:id="@+id/relativeLayout2"
android:translationZ="1dp"
android:layout_marginBottom="-35dp">
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/icon_big"
android:id="@+id/imageView5"
android:layout_gravity="center_horizontal"
android:adjustViewBounds="false"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
/>

</RelativeLayout>

<LinearLayout
android:id="@+id/listLayout"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:background="@drawable/custom_dialog_background"
android:orientation="vertical"
android:layout_below="@+id/relativeLayout2">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#2e7b8a"
android:id="@+id/relativeLayout">


<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/close2"
android:id="@+id/imgClose"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
/>



<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:textColor="#000000"
android:textStyle="italic|bold"
android:textSize="30sp"
android:id="@+id/textView9"
android:layout_below="@+id/imgClose"
android:layout_centerHorizontal="true" />
</RelativeLayout>



</LinearLayout>
</RelativeLayout>

Answer

Inside your dialog class:

    Window window = this.getWindow();
    window.setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.MATCH_PARENT);

    requestWindowFeature(Window.FEATURE_NO_TITLE);
    window.setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

This removes the title and most likely the border. If you are using DialogFragment, you can also define the style like this:

    int style, theme;

    style = DialogFragment.STYLE_NO_FRAME;
    theme = android.R.style.Theme_Holo_Dialog;


    setStyle(style, theme);