CODEWITHSUNDEEP
androidandroid-fragments
Boni Daniel
Boni Daniel

Reputation: 31

Adding a close button to a DialogFragment

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

Upvotes: 2

Views: 2539

Answers (4)

Yusuf Yaşar
Yusuf Yaşar

Reputation: 326

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>

Upvotes: 0

Venkata Narayana
Venkata Narayana

Reputation: 1697

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.

Upvotes: 2

hossam scott
hossam scott

Reputation: 466

on your button click use :

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

ProgressDialog mProgressDialog;

Upvotes: 0

Zachary Sweigart
Zachary Sweigart

Reputation: 1111

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

Upvotes: 1

Related Questions