Repositioned DialogFragment hit area for setCanceledOnTouchOutside has an unexpected margin

Question

I am using a dialog for a filter option. The design for tablet involves the dialog appearing below the image button that made it appear. I feel the user expectation would be that they could click the button again to hide the dialog. The problem I see is that the dialog fragment seems to have a margin around it that does not respond to clicks in the dimmed area by cancelling the dialog.

This is what it currently looks like.

This looks like the designs. Clicking to dismiss the dialog works on the top of the three lines in the filter icon (top right) but not on either of the bottom two.

Here is the style I am using for the dialog.

<style name="SortDialogTheme" parent="Theme.AppCompat.Light.Dialog">
    <item name="android:windowNoTitle">false</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowFullscreen">false</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:background">@android:color/white</item>
</style>

And the code at the point of calling the dialog fragment to show (from a Fragment).

override fun showSortDialog(yPositionToDrawDialog: Int) {
    activity?.supportFragmentManager?.let { supportFragmentManager ->
        val fragmentTransaction = supportFragmentManager.beginTransaction()
        val prev = supportFragmentManager.findFragmentByTag(SortBelowButtonDialogFragment.TAG)
        if (prev != null) {
            fragmentTransaction.remove(prev)
        }
        fragmentTransaction.addToBackStack(null)
        val sortDialog = SortBelowButtonDialogFragment.newInstance(yPositionToDrawDialog)
        if (!supportFragmentManager.isStateSaved && !sortDialog.isAdded) {
            sortDialog.setStyle(DialogFragment.STYLE_NO_FRAME, R.style.SortDialogTheme)
            sortDialog.show(fragmentTransaction, SortBelowButtonDialogFragment.TAG)
        }
    }
}

Here is the logic to reposition the dialog (from the DialogFragment).

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
    moveDialogToExtrasY()
    return inflater.inflate(R.layout.sort_view, container, false)
}

private fun moveDialogToExtrasY() {
    val window = dialog.window
    window.setGravity(Gravity.TOP or Gravity.END)
    window.setLayout(WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT)

    val windowLayoutParams = window.attributes
    windowLayoutParams.y = arguments?.getInt(Y_POSITION_OF_DIALOG, DEFAULT_Y_POSITION) ?: DEFAULT_Y_POSITION
    windowLayoutParams.x = context?.resources?.getDimension(R.dimen.sort_view_margin)?.toInt() ?: DEFAULT_PADDING
    windowLayoutParams.width = context?.resources?.getDimension(R.dimen.sort_view_tablet_min_width)?.toInt()
            ?: DEFAULT_WIDTH

    window.attributes = windowLayoutParams
}

Here is a simplified version of the layout for the dialog fragment that has the same issue.

<?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:id="@+id/sort_dialog"
                                             android:layout_width="wrap_content"
                                             android:layout_height="wrap_content"
                                             android:clickable="true"
                                             android:focusable="true"
                                             android:minWidth="300dp">

    <TextView
            android:id="@+id/filter_header"
            android:text="Filter"
            android:padding="20dp"
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            app:layout_constraintBottom_toTopOf="@+id/filter_option"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="packed"/>

    <TextView
            android:id="@+id/filter_option"
            android:text="Option"
            android:padding="20dp"
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            app:layout_constraintTop_toBottomOf="@+id/filter_header"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintVertical_chainStyle="packed"/>

</android.support.constraint.ConstraintLayout>

I change android:windowIsFloating to true it then looks like this, which is further from the button than the designs specify. However, clicking anywhere on the filter icon will cancel the dialog.

Is there a way to specify the size of the hit area on a DialogFragment?

score 0 · Answer 1 · answered Nov 27 '18 at 14:16

Converting to a PopupWindow has provided an acceptable solution.

override fun showSortDialog(yPositionToDrawDialog: Int) {
    val popup = PopupWindow(
        layoutInflater.inflate(R.layout.sort_view, null),
        context?.resources?.getDimension(R.dimen.sort_view_tablet_min_width)?.toInt() 
            ?: DEFAULT_SORT_POPUP_WIDTH,
        ConstraintLayout.LayoutParams.WRAP_CONTENT,
        true
    )

    popup.showAsDropDown(sort_icon, 0, 0, (Gravity.TOP or Gravity.END))

    val container = popup.contentView.parent as View
    val windowManager = context?.getSystemService(Context.WINDOW_SERVICE) as WindowManager?
    val layoutParams = container.layoutParams as WindowManager.LayoutParams

    layoutParams.flags = layoutParams.flags or WindowManager.LayoutParams.FLAG_DIM_BEHIND
    layoutParams.dimAmount = 0.6f
    windowManager?.updateViewLayout(container, layoutParams)
}

Repositioned DialogFragment hit area for setCanceledOnTouchOutside has an unexpected margin

1 Answers1