Android: how to dismiss a DatePicker DialogFragment when touching outside?

Question

I have a working DatePickerFragment that extends DialogFragment. I set up a DatePickerDialog in onCreateDialog() and then tried to add:

"picker.setCanceledOnTouchOutside(true);"

I am testing on a device with Android 8.0 Oreo and nothing happens when touching outside the DatePicker dialog. I am using androidx.appcompat.app.AppCompatActivity as my BaseActivity and androidx.fragment.app.DialogFragment for the DialogFragment;

Code:

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    super.onCreateDialog(savedInstanceState);

    DatePickerDialog picker = new DatePickerDialog(getActivity(),this,year,month,day);
    **picker.setCanceledOnTouchOutside(true);**
    return picker;

This is the Activity code that creates the Fragment:

DatePickerFragment newFragment = new DatePickerFragment();
// tried the below also, with no luck
**newFragment.setCancelable(true);**
newFragment.show(getSupportFragmentManager(), "datePicker");

I also tried the below in the DialogFragment, also with no luck:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   ...
   getDialog().setCanceledOnTouchOutside(true);
   ... 
   }

and:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    if (getDialog() != null) {
        getDialog().setCanceledOnTouchOutside(true);
    }
    return super.onCreateView(inflater, container, savedInstanceState);
}

I referenced this post for possible answers: How to dismiss a DialogFragment when pressing outside the dialog?. What am I missing here?

Hi, can you post the source code to show the date picker dialog? — Vall0n, Jan 20 '20 at 14:40
I did, its created in onCreateDialog() and is shown above. Was there something else you were looking for? — AJW, Jan 20 '20 at 14:42
Hi @AJW, I meant the statement where you call the DialogFragment. Sth. like `myDatePickerFragment.show(getSupportFragmenetManager(), "tag")` — Vall0n, Jan 20 '20 at 14:45
add a parent layout which expands on the whole screen. add a click listener on parent and when parent is clicked then dismiss the dialog — Abdul, Jan 24 '20 at 04:29
I think I had placed `getDialog().setCanceledOnTouchOutside()` in `onStart` of my fragment and it worked for me. If this doesn't work I would suggest debugging using `isCancelable` across your `DatePickerFragment`. Also, are you using a custom layout for the Dialog? — Saurabh, Jan 28 '20 at 08:16
@Saurabh I was not using a custom layout but will be trying that next. Do you know if getDialog.setCanceledOnTouchOutside() would be better in onViewCreated() rather than onStart()? — AJW, Jan 29 '20 at 11:01

Rembulan Moon · Accepted Answer · 2020-01-24T04:03:00.950

2

if you want to dismiss Dialog that extends DialogFragment, write

setCancelable(true);

inside onCreateView. The dialog will dismiss when you touching outside.

example code :

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
     setCancelable(true);
     return super.onCreateView(inflater, container, savedInstanceState);
}

edited Jan 24 '20 at 04:03

answered Jan 23 '20 at 04:19

Rembulan Moon

338
3
11

See above: "I also tried the below in the DialogFragment, also with no luck: @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { ... getDialog().setCanceledOnTouchOutside(true); ... } " – AJW Jan 23 '20 at 05:26
without getdalog(). its only 1 row code. i edit my answer with example use – Rembulan Moon Jan 23 '20 at 06:28
I am using a DatePicker inside the dialog. How do I get the id for the "R.layout.dialog_cari_barang" so I know what to inflate as the view? There is no xml with an id for the DatePicker. – AJW Jan 23 '20 at 14:17
Sorry, i give you my own code. now i edit my answer with your explained code above. – Rembulan Moon Jan 24 '20 at 04:05
Answer upvoted and accepted and bounty awarded. The key was using onCreateView() and the inflater. What does "return super.onCreateView(inflater, container, savedInstanceState);" do in your code answer? – AJW Jan 30 '20 at 03:19
I guess fragment will return default view if you return super.onCreateView. But I usually create fragment or dialog fragment with choose/check create layout xml. So i can edit my layout (custom view). And return inflater.inflate(R.layout.fragment_blank_fragment2, container, false) like my old answer. – Rembulan Moon Jan 30 '20 at 03:40
And why u not directly using DatePickerDialog instead using dialog fragment? – Rembulan Moon Jan 30 '20 at 03:52

score 1 · Answer 2 · answered Jan 20 '20 at 14:29

1

did you try to set the dialog to cancelable

picker.setCancelable(true);

answered Jan 20 '20 at 14:29

Fahad Alotaibi

416
3
9

I did not, I will try it. Do I have to set that in addition to the "setCanceledOnTouchOutside(true);" or just setCancelable() on its own? – AJW Jan 20 '20 at 14:33
No luck. I tried setCancelable() on its own and also tried it and added "setCanceledOnTouchOutside(true);" but neither worked. – AJW Jan 20 '20 at 14:39
try to use dialogFragmnet.setCancelable(true); – Fahad Alotaibi Jan 20 '20 at 14:49
do you mean add that in the Activity where the code creates the dialogfragment? – AJW Jan 20 '20 at 14:53
No luck adding "newFragment.setCancelable(true)" in the Activity, after the DatePickerFragment is created, before "newFragment.show...);" – AJW Jan 20 '20 at 15:37
can you show me the Dialog fragment class you created – Fahad Alotaibi Jan 20 '20 at 16:17

score 0 · Answer 3 · answered Jan 28 '20 at 15:38

I thought I have similar problem, but it seems in my case that dialog has some shadow padding around it and I had to click outside of it very close to the edge of the screen to cancel it.

This is how i create my dialog:

val calendar = Calendar.getInstance()
val year = calendar.get(Calendar.YEAR)
val month = calendar.get(Calendar.MONTH)
val day = calendar.get(Calendar.DAY_OF_MONTH)

val dpd = context?.let {
    DatePickerDialog(it, DatePickerDialog.OnDateSetListener { _, pickedYear, pickedMonth, pickedDay ->

         //do something with picked date.

    }, year, month, day)
}

dpd?.setCanceledOnTouchOutside(true)
dpd?.show()

Try to set setCanceledOnTouchOutside(true) in your implementation and try to dismiss it on tap very close to the edge of the screen, maybe test it on some big screen emulator like Pixel 3 XL. Now i know that this is not a solution and you need to handle all kind of devices and screen sizes, but I want you to verify that you might have same problem as me: that dialog will be canceled on touch outside, but this "outside" is not so obvious and it might be a real problem.

score 0 · Answer 4 · answered Jan 29 '20 at 13:41

0

Just add setCancelable(true) in your Dialog onCreate method or in constructor

answered Jan 29 '20 at 13:41

Vlada Momirovic

41
7

1

Isn't it the same duplicated answer like @Fahad Alotaibi ? – Tamir Abutbul Jan 29 '20 at 13:57

score 0 · Answer 5 · answered Jan 29 '20 at 13:59

0

Try to use the default DatePickerDialog from android which is default close when selecting out side the dialog.

Try this is still issue let me know will send the proper code for same

answered Jan 29 '20 at 13:59

Arpan24x7

648
5
24

Android: how to dismiss a DatePicker DialogFragment when touching outside?

5 Answers5

Linked