How to tell when BottomSheetDialogFragment expanded to fill the screen?

4k Views Asked by At

I'm trying to follow the Material Design specification to add a close affordance toolbar to a modal bottom sheet using the Android Design Support library.

When full-screen, bottom sheets can be internally scrolled to reveal additional content. A toolbar should be used to provide a collapse or close affordance to exit this view.

I went with BottomSheetBehavior.BottomSheetCallback to toggle the visibility of the toolbar based on the expanded/collapsed state of the BottomSheetBehavior. The problem is the toolbar appears when I try to drag up, even if the BottomSheetDialogFragment content can't fill the entire screen. How can I tell when the bottom sheet is fullscreen while the bottom sheet is expanding?

public class BottomSheetToolbarToggleCallback : BottomSheetBehavior.BottomSheetCallback
{
    public BottomSheetToolbarToggleCallback(BottomSheetDialogFragment bottomSheetDialogFragment)
    {
        this.bottomSheetDialogFragment = bottomSheetDialogFragment ?? throw new System.ArgumentNullException(nameof(bottomSheetDialogFragment));
    }

    public override void OnSlide(View bottomSheet, float slideOffset)
    {
    }

    public override void OnStateChanged(View bottomSheet, int newState)
    {
        switch (newState)
        {
            case BottomSheetBehavior.StateCollapsed:
                ShowToolbar(bottomSheet, ViewStates.Gone);
                break;
            case BottomSheetBehavior.StateExpanded:
                ShowToolbar(bottomSheet, ViewStates.Visible);
                break;
            case BottomSheetBehavior.StateHidden:
                bottomSheetDialogFragment.Dismiss();
                break;
        }
    }

    private void ShowToolbar(View bottomSheet, ViewStates viewState)
    {
        var toolbar = bottomSheet.FindViewById<Toolbar>(Resource.Id.toolbar);
        if (toolbar != null)
        {
            toolbar.Visibility = viewState;
        }
    }

    private readonly BottomSheetDialogFragment bottomSheetDialogFragment;
}
public abstract class BaseBottomSheetDialogFragment<TViewModel> : MvxBottomSheetDialogFragment<TViewModel> where TViewModel : BaseViewModel
{
    protected BaseBottomSheetDialogFragment()
    {
    }

    protected BaseBottomSheetDialogFragment(IntPtr javaReference, JniHandleOwnership transfer) : base(javaReference, transfer)
    {
    }

    public override void SetupDialog(Dialog dialog, int style)
    {
        base.SetupDialog(dialog, style);

        this.EnsureBindingContextIsSet(); // This is required to use this.BindingInflate()
        var view = this.BindingInflate(LayoutResourceId, null);
        dialog.SetContentView(view);

        // Add support to handle material design specification to dynamically show a toolbar with an 'X' button.
        var layoutParams = (CoordinatorLayout.LayoutParams)((View)view.Parent).LayoutParameters;
        var behavior = layoutParams.Behavior;
        if (behavior != null && behavior is BottomSheetBehavior)
        {
            var toolbar = view.FindViewById<Toolbar>(Droid.Resource.Id.toolbar);
            if (toolbar != null)
            {
                toolbar.SetNavigationIcon(Droid.Resource.Drawable.clear);
                ((BottomSheetBehavior)behavior).SetBottomSheetCallback(new BottomSheetToolbarToggleCallback(this));
                if (CloseCommand != null)
                {
                    toolbar.SetNavigationOnClickListener(new MvxAsyncCommandOnClickListener(CloseCommand));
                }
            }
        }
    }

    /// <summary>
    /// The Android layout resource id of the layout to show in the modal bottom sheet.
    /// </summary>
    protected abstract int LayoutResourceId { get; }

    /// <summary>
    /// Optional <see cref="MvxAsyncCommand"/> to call when the optional toolbar navigation button is clicked.
    /// </summary>
    protected abstract IMvxAsyncCommand CloseCommand { get; }
}
2

There are 2 best solutions below

3
Leo Zhu On BEST ANSWER

Since I don't know your specific code, here is a snippet of a simple example I tried:

public View mView;

public override void SetupDialog(Dialog dialog, int style)
{
    base.SetupDialog(dialog, style);

    this.EnsureBindingContextIsSet(); // This is required to use this.BindingInflate()
    mView = this.BindingInflate(LayoutResourceId, null);
    dialog.SetContentView(view);
        ...        
}

in the BottomSheetCallback :

public override void OnStateChanged(View bottomSheet, int newState)
        {
            switch (newState)
            {          
                case BottomSheetBehavior.StateExpanded:
                   var height = bottomSheetDialogFragment.mView.Height;//need you convert to your BottomSheetDialogFragment
                    break;              
            }
        }
0
Trevor Balcom On

This is the solution I ended up using. It will only show the close affordance if the BottomSheetDialogFragment takes up the entire height of the window. It's been tested with multi-window mode, cutouts/insets, landscape, and portrait orientations.

public class BottomSheetDialogFragmentCloseAffordanceCallback : BottomSheetBehavior.BottomSheetCallback
{
    public BottomSheetDialogFragmentCloseAffordanceCallback(BottomSheetDialogFragment bottomSheetDialogFragment)
    {
        this.bottomSheetDialogFragment = bottomSheetDialogFragment ?? throw new System.ArgumentNullException(nameof(bottomSheetDialogFragment));
    }

    public override void OnSlide(View bottomSheet, float slideOffset)
    {
    }

    public override void OnStateChanged(View bottomSheet, int newState)
    {
        switch (newState)
        {
            case BottomSheetBehavior.StateCollapsed:
                ShowToolbar(bottomSheet, ViewStates.Gone);
                break;
            case BottomSheetBehavior.StateExpanded:
                if (IsViewSameHeightAsWindow(bottomSheet))
                {
                    ShowToolbar(bottomSheet, ViewStates.Visible);
                }
                break;
            case BottomSheetBehavior.StateHalfExpanded:
                break;
            case BottomSheetBehavior.StateHidden:
                bottomSheetDialogFragment.Dismiss();
                break;
        }
    }

    private void ShowToolbar(View bottomSheet, ViewStates viewState)
    {
        var toolbar = bottomSheet.FindViewById<Toolbar>(Resource.Id.toolbar);
        if (toolbar != null)
        {
            toolbar.Visibility = viewState;
        }
    }

    private bool IsViewSameHeightAsWindow(View view)
    {
        int[] locationInWindow = new int[2];
        view.GetLocationInWindow(locationInWindow);
        return locationInWindow[1] == view.RootWindowInsets.StableInsetTop;
    }

    private readonly BottomSheetDialogFragment bottomSheetDialogFragment;
}