Adding a close button to a DialogFragment

Question

I've been trying to make a DialogFragment have a close button in the top left, as seen in the photo. What the final result should look like (Sorry about the text, it's in romanian) Could anyone tell me how I could go about doing that?

Here's the layout for the fragment:

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="5dp"
    android:layout_marginTop="10dp"
    android:background="#FFFFFF"
    android:gravity="center"
    android:orientation="vertical"
    android:paddingBottom="-50dp" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sample Text"/>
    <!---add your views here-->
</LinearLayout>

<ImageView
    android:id="@+id/imageView_close"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    android:clickable="true"
    android:src="@drawable/ic_close_dialog" />

The way the fragment looks now: A small box where the image and text are overlayed

Venkata Narayana · Answer 1 · 2018-08-27T16:11:33.083

2

You can create a custom layout and use

dialog.setContentView(R.layout.custom_view);

Refer custom dialog with close button

If it still comes like it does in the picture, a possibility is that the container view for this constraint layout has wrap_content as its width and height.

edited Aug 27 '18 at 16:11

answered Aug 27 '18 at 14:01

Venkata Narayana

1,657
12
25

I was looking at that post earlier, attempted the verified answer. Unfortunately, the button wouldn't move to the top, whatever I did. – Boni Daniel Aug 27 '18 at 14:03
(full) layout has been posted – Boni Daniel Aug 27 '18 at 14:09
Please post the complete XML file.Seems like some of it is missing – Venkata Narayana Aug 27 '18 at 14:10
seems fine in the preview, the image is aligned to the left top – Venkata Narayana Aug 27 '18 at 14:14
is it fine for you in preview? – Venkata Narayana Aug 27 '18 at 14:16
No, it looks the same as in the latest picture I added to the post. – Boni Daniel Aug 27 '18 at 14:25
Check if the layout params for the dialog fragment are wrap_content by any chance – Venkata Narayana Aug 27 '18 at 16:12

score 1 · Answer 2 · answered Aug 27 '18 at 14:02

Create a custom dialog class that extends dialog and then use an xml file to define your layout like you would for an activity.

public class CustomDialogClass extends Dialog {

  public CustomDialogClass(Activity a) {
    super(a);
  }

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.custom_dialog);
  }
}

And have your custom_dialog.xml layout file define the layout

score 0 · Answer 3 · answered Aug 27 '18 at 14:05

0

on your button click use :

if (mProgressDialog != null) {
            if (mProgressDialog.isShowing()) {
                mProgressDialog.dismiss();
                mProgressDialog = null;
            }
        }

ProgressDialog mProgressDialog;

answered Aug 27 '18 at 14:05

hossam scott

466
5
28

How would a ProgressDialog help in this case if what I need is a DialogFragment? – Boni Daniel Aug 27 '18 at 14:08

score 0 · Answer 4 · answered Jun 20 '19 at 21:39

dialog_xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:background="@color/transparent">

    <FrameLayout
        android:id="@+id/contentView"
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <!-- you will add content here -->
    </FrameLayout>

    <ImageView
        android:id="@+id/ivCloseButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:contentDescription="@string/content_description"
        app:layout_constraintBottom_toTopOf="@+id/contentView"
        app:layout_constraintEnd_toEndOf="@+id/contentView"
        app:layout_constraintStart_toEndOf="@+id/contentView"
        app:layout_constraintTop_toTopOf="@+id/contentView"
        app:srcCompat="@android:drawable/ic_menu_close_clear_cancel" />

</android.support.constraint.ConstraintLayout>

style:

    <style name="TransparentDialog" parent="@style/Base.Theme.AppCompat.Light.Dialog">
        <item name="colorPrimaryDark">@android:color/black</item> <!-- you can change here --> 
        <item name="android:windowBackground">@android:color/transparent</item> <!-- this is important -->
        <item name="android:windowIsFloating">false</item> <!-- this is important -->
        <item name="android:windowNoTitle">true</item> <!-- this is important -->
    </style>

Adding a close button to a DialogFragment

4 Answers4