Fluent UI dual-screen BottomSheet

  • Article

The sheet will only display on a single screen, never rendering underneath the hinge:

Single screen

BottomSheet on a single screen

Dual-screen - only shows on a single screen

BottomSheet avoids the hinge on dual-screens

To use the Fluent UI BottomSheetView, configure your gradle file and import the required classes:

import com.microsoft.fluentui.bottomsheet.BottomSheet
import com.microsoft.fluentui.bottomsheet.BottomSheetDialog
import com.microsoft.fluentui.bottomsheet.BottomSheetItem

BottomSheet

// Single line items
val bottomSheet = BottomSheet.newInstance(
    arrayListOf(
        BottomSheetItem(
            R.id.bottom_sheet_item_flag,
            R.drawable.ic_fluent_flag_24_regular,
            getString(R.string.bottom_sheet_item_flag_title)
        ),
        BottomSheetItem(
            R.id.bottom_sheet_item_reply,
            R.drawable.ic_fluent_reply_24_regular,
            getString(R.string.bottom_sheet_item_reply_title)
        ),
        // more items as required
    )
)
bottomSheet.show(supportFragmentManager, null)

BottomSheetDialog

if (bottomSheetDialog == null) {
    bottomSheetDialog = BottomSheetDialog(
        this,
        arrayListOf(
            BottomSheetItem(
                R.id.bottom_sheet_item_clock,
                R.drawable.ic_clock_24_regular,
                getString(R.string.bottom_sheet_item_clock_title)
            ),
            BottomSheetItem(
                R.id.bottom_sheet_item_alarm,
                R.drawable.ic_alert_24_regular,
                getString(R.string.bottom_sheet_item_alarm_title)
            ),
            // more items as required
        )
    )
    bottomSheetDialog?.onItemClickListener = this // implement BottomSheetItem.OnClickListener
}
bottomSheetDialog?.show()