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; }
}
Since I don't know your specific code, here is a snippet of a simple example I tried:
in the
BottomSheetCallback: