6

how to create a dialog fragment with the custom shape?

I have an icon that needs to be placed on top of the dialog window (with transparency).

Image

The dialog itself should be:

Dialog screen

The dialog layout:

<FrameLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="40dp"
            android:layout_gravity="bottom|center">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/server_error_title"
                android:layout_marginTop="80dp"
                android:layout_centerHorizontal="true"
                android:textSize="20sp"
                android:textAllCaps="true"
                android:text="@string/server_error_title"
                android:textColor="@color/soft_blue"
                android:fontFamily="sans-serif-medium"/>
            <View
                android:layout_width="60dp"
                android:layout_height="2dp"
                android:id="@+id/server_error_divider"
                android:layout_marginTop="21dp"
                android:layout_centerHorizontal="true"
                android:layout_below="@id/server_error_title"
                android:background="@color/soft_blue" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/server_error_message"
                android:layout_marginTop="19dp"
                android:layout_centerHorizontal="true"
                android:layout_below="@id/server_error_divider"
                style="@style/TextDialog"
                android:text="@string/server_error_message"/>
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:id="@+id/server_error_large_divider"
                android:layout_marginTop="51dp"
                android:layout_below="@id/server_error_message"
                android:background="@color/greyish"/>
           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:gravity="center_horizontal"
               android:background="@color/white_grey"
               android:layout_below="@id/server_error_large_divider">
               <Button
                   android:layout_width="320dp"
                   android:layout_height="46dp"
                   android:id="@+id/server_error_close_btn"
                   android:layout_marginTop="30dp"
                   android:layout_marginBottom="30dp"
                   style="@style/TextButton2"
                   android:text="@string/server_error_close_btn"
                   android:background="@drawable/big_button_shape" />
           </LinearLayout>
        </RelativeLayout>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/error_dialog_icon"
            android:src="@drawable/ic_error_circle"
            android:layout_gravity="center|top"/>
    </FrameLayout>

But what I'm getting is this:

enter image description here

Do I need a custom ViewGroup or it could be done in an easier way?

6
  • use minus margin on ImageView Jan 31, 2017 at 12:10
  • @vrundpurohit didn't work :( i.imgur.com/5o22GDL.png
    – c0nst
    Jan 31, 2017 at 12:16
  • ofc give some padding top to your FrameLayout. Jan 31, 2017 at 12:23
  • Modify the cross icon with rounded white padding background and try to use the answer provided by @W4R10CK
    – Krish
    Jan 31, 2017 at 12:26
  • @W4R10CK sorry, I've tried your solution, but it didn't work for me, so I've only added +1 to your answer.
    – c0nst
    Jan 31, 2017 at 13:54

4 Answers 4

9

You can put your Views(custom button, layout), inside LinearLayout as per your idea.

Dialog method, Make Window transparent:

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

test.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/transparent" >

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="57dp"
    android:background="#f00"
    android:orientation="vertical" >
</LinearLayout>

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:src="@drawable/ic_launcher" />

</RelativeLayout>  

Result(avoid BG)

enter image description here

0
5

Use following sample code for your xml:

<FrameLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="45dp"
            android:background="@android:color/white"
            android:layout_gravity="bottom|center">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/server_error_title"
                android:layout_marginTop="80dp"
                android:layout_centerHorizontal="true"
                android:textSize="20sp"
                android:textAllCaps="true"
                android:text="@string/server_error_title"
                android:textColor="@color/soft_blue"
                android:fontFamily="sans-serif-medium"/>
            <View
                android:layout_width="60dp"
                android:layout_height="2dp"
                android:id="@+id/server_error_divider"
                android:layout_marginTop="21dp"
                android:layout_centerHorizontal="true"
                android:layout_below="@id/server_error_title"
                android:background="@color/soft_blue" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/server_error_message"
                android:layout_marginTop="19dp"
                android:layout_centerHorizontal="true"
                android:layout_below="@id/server_error_divider"
                style="@style/TextDialog"
                android:text="@string/server_error_message"/>
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:id="@+id/server_error_large_divider"
                android:layout_marginTop="51dp"
                android:layout_below="@id/server_error_message"
                android:background="@color/greyish"/>
           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:gravity="center_horizontal"
               android:background="@color/white_grey"
               android:layout_below="@id/server_error_large_divider">
               <Button
                   android:layout_width="320dp"
                   android:layout_height="46dp"
                   android:id="@+id/server_error_close_btn"
                   android:layout_marginTop="30dp"
                   android:layout_marginBottom="30dp"
                   style="@style/TextButton2"
                   android:text="@string/server_error_close_btn"
                   android:background="@drawable/big_button_shape" />
           </LinearLayout>
        </RelativeLayout>

        <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:padding="4dp"
        android:background="@drawable/error_circle">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/error_dialog_icon"
            android:src="@drawable/ic_error_circle"
            android:layout_gravity="center|top"/>

        </FrameLayout>
    </FrameLayout>

and error_circle:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="oval"
    android:useLevel="false" >
    <solid android:color="@android:color/transparent" />

    <stroke
        android:width="45dp"
        android:color="@android:color/white" />
</shape>

Edit:

And in the onCreateView() of the DialogFragment:

getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);

getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
1
  • With requestWindowFeature(Window.FEATURE_NO_TITLE); and setContentView(R.layout.test); worked like a charm. Thanks!
    – c0nst
    Jan 31, 2017 at 13:21
2

try like this, it will show you transparent dialog

Dialog dialog = new Dialog(mContext, android.R.style.Theme_Panel);
            dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
            dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
            dialog.setContentView(R.layout.yourlayout);
            dialog.setCanceledOnTouchOutside(true);
            TextView text = (TextView) dialog.findViewById(R.id.----);
            dialog.show();
0

Create style and set your shape as background for example:

<style name="MyDialogFragmentStyl" parent="ThemeOverlay.AppCompat.Dialog">
    <item name="android:windowBackground">@drawable/my_dialog_background</item>
</style>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.