Menu
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).
The dialog itself should be:
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:
Do I need a custom ViewGroup or it could be done in an easier way?
345
This method is deprecated. androidx.
Dialog: A dialog is a small window that prompts the user to make a decision or enter additional information. DialogFragment: A DialogFragment is a special fragment subclass that is designed for creating and hosting dialogs.
Android DialogFragments. DialogFragment is a utility class which extends the Fragment class. It is a part of the v4 support library and is used to display an overlay modal window within an activity that floats on top of the rest of the content. Essentially a DialogFragment displays a Dialog but inside a Fragment.
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)
148
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));
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();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
