Every dialog supports up to 2 integrated buttons. Whenever you show a dialog you can decide which buttons you need.
DialogDefaults does offer the corresponding functions to create buttons.
val buttons1 = DialogDefaults.buttons(
+ positive: DialogButton = DialogButton("Save"),
+ negative: DialogButton = DialogButton("Cancel")
+)
+
+val noButtons = DialogDefaults.buttonsDisabled()
+Buttons with an empty string will always be considered as disabled (they won't be rendered at all).
In general a custom dialog is made is simple as following (info dialog is exactly the following):
/**
+ * Shows a dialog with an info text and an optional label for that info
+ *
+ *
+ *
+ * **Basic Parameters:** all params not described here are derived from [Dialog], check it out for more details
+ *
+ * @param info the information text for this dialog
+ * @param infoLabel the optional label for the information text
+ */
+@Composable
+fun DialogInfo(
+ state: DialogState,
+ // Custom - Required
+ info: String,
+ // Custom - Optional
+ infoLabel: String = "",
+ // Base Dialog - Optional
+ title: (@Composable () -> Unit)? = null,
+ icon: (@Composable () -> Unit)? = null,
+ style: ComposeDialogStyle = DialogDefaults.defaultDialogStyle(),
+ buttons: DialogButtons = DialogDefaults.buttons(),
+ options: Options = Options(),
+ onEvent: (event: DialogEvent) -> Unit = {}
+)
+{
+ Dialog(state, title, icon, style, buttons, options, onEvent = onEvent) {
+ Column {
+ if (infoLabel.isNotEmpty()) {
+ Text(modifier = Modifier.padding(bottom = 8.dp), text = infoLabel, style = MaterialTheme.typography.titleSmall)
+ }
+ Text(text = info)
+ }
+ }
+}
+So in the end following is the base structure for a new dialog:
@Composable
+fun DialogInfo(
+ state: DialogState,
+ // Custom
+ // custom data for you custom dialog
+ // ....
+ // Base Dialog - Optional
+ title: (@Composable () -> Unit)? = null,
+ icon: (@Composable () -> Unit)? = null,
+ style: ComposeDialogStyle = DialogDefaults.defaultDialogStyle(),
+ buttons: DialogButtons = DialogDefaults.buttons(),
+ options: Options = Options(),
+ onEvent: (event: DialogEvent) -> Unit = {}
+) {
+ Dialog(state, title, icon, style, buttons, options, onEvent = onEvent) {
+ Column {
+ // custom content - whatever you want
+ }
+ }
+}
+This dialog will automatically support all the features of this library.
Sometimes you want show some scrollable content inside a dialog and don't want this content to stretch the dialog height in case, that the content does not show a lot of data. You can use following function from the core module in this case.
Both function will take care to show scrollbars if necessary and will not stretch the dialog height if the content inside it is small.
Every dialog offers an onEvent callback. You can handle the dialog events inside there like e.g. if dialog was closed or if a dialog button was clicked.
DialogInfo(
+ state = state,
+ info = "some info",
+ onEvent = {
+
+ // Variant 1
+ when (event) {
+ is DialogEvent.Button -> {
+ if (event.button == DialogButtonType.Positive) {
+ // positive button was pressed
+ } else {
+ // negatvie button was pressed
+ }
+ }
+ is DialogEvent.Dismissed -> {
+ // dialog was dismissed by click outside or back press
+ }
+ }
+
+ // Variant 2
+ // many times you only want to handle the positive button click
+ if (event.isPositiveButton) {
+ // positive button was pressed
+ }
+ }
+)
+There are a few common options that you can change for all dialogs. They are all defined inside the Options class.
/**
+ * the main options for a dialog
+ *
+ * @param dismissOnButtonClick if true, the dialog will be automatically dismissed if a dialog button is clicked
+ * @param dismissOnBackPress if true, the dialog will be dismissed if the user pressed the back button
+ * @param dismissOnClickOutside if true, the dialog will be dismissed if the user clicks outside of the dialog
+ */
+data class Options(
+ val dismissOnButtonClick: Boolean = true,
+ val dismissOnBackPress: Boolean = true,
+ val dismissOnClickOutside: Boolean = true,
+)
+This library offers 3 styles (actually 4) for dialog. You can always provide the style to a dialog composable and customise it however you want.
DialogDefaults does offer the corresponding functions to create a style.
/**
+ * the setup of a dialog that shows as a normal dialog popup
+ *
+ * @param swipeDismissable if true, the dialog can be swiped away by an up/down swipe
+ * @param dismissOnBackPress if true, the dialog can be dismissed by a back press
+ * @param dismissOnClickOutside if true, the dialog can be dismissed by clicking outside of its borders
+ * @param options provides custom style options of the dialog
+ * @param shape the [Shape] of the dialog
+ * @param containerColor the [Color] of the container
+ * @param iconColor the content [Color] of the icon
+ * @param titleColor the content [Color] of the title
+ * @param textColor the content [Color] of the text
+ */
+@Composable
+fun styleDialog(
+ swipeDismissable: Boolean = false,
+ // DialogProperties
+ dismissOnBackPress: Boolean = true,
+ dismissOnClickOutside: Boolean = true,
+ // Style
+ options: StyleOptions = StyleOptions(),
+ shape: Shape = DialogStyleDefaults.shape,
+ containerColor: Color = DialogStyleDefaults.containerColor,
+ iconColor: Color = DialogStyleDefaults.iconColor,
+ titleColor: Color = DialogStyleDefaults.titleColor,
+ contentColor: Color = DialogStyleDefaults.contentColor
+): ComposeDialogStyle
+/**
+ * the setup of a dialog that shows as a normal dialog popup
+ *
+ * @param dragHandle if true, a drag handle will be shown
+ * @param peekHeight the peek height calculation of the bottom sheet
+ * @param expandInitially if true, the bottom sheet is initially displayed in expanded state (even if it has a peek height)
+ * @param velocityThreshold the velocity threshold of the bottom sheet
+ * @param positionalThreshold the positional threshold of the bottom sheet
+ * @param animateShow if true, the sheet will be animated on first show
+ * @param dismissOnBackPress if true, the dialog can be dismissed by a back press
+ * @param dismissOnClickOutside if true, the dialog can be dismissed by clicking outside of its borders
+ * @param options provides custom style options of the dialog
+ * @param shape the [Shape] of the dialog
+ * @param containerColor the [Color] of the container
+ * @param iconColor the content [Color] of the icon
+ * @param titleColor the content [Color] of the title
+ * @param textColor the content [Color] of the text
+ */
+@Composable
+fun styleBottomSheet(
+ dragHandle: Boolean = true,
+ peekHeight: ((containerHeight: Dp, sheetHeight: Dp) -> Dp)? = BottomSheetStyleDefaults.peekHeight,
+ expandInitially: Boolean = false,
+ velocityThreshold: () -> Dp = { 125.dp },
+ positionalThreshold: (totalDistance: Dp) -> Dp = { 56.dp },
+ animateShow: Boolean = false,
+ // DialogProperties
+ dismissOnBackPress: Boolean = true,
+ dismissOnClickOutside: Boolean = true,
+ // Style
+ options: StyleOptions = StyleOptions(),
+ shape: Shape = BottomSheetStyleDefaults.shape,
+ containerColor: Color = BottomSheetStyleDefaults.containerColor,
+ iconColor: Color = BottomSheetStyleDefaults.iconColor,
+ titleColor: Color = BottomSheetStyleDefaults.titleColor,
+ contentColor: Color = BottomSheetStyleDefaults.contentColor
+): ComposeDialogStyle
+/**
+ * the setup of a dialog that shows as a normal dialog popup
+ *
+ * @param darkStatusBar if true, the dialog icons will be adjusted to a dark status bar
+ * @param menuActions if provided, it replaces the the default close menu action
+ * @param dismissOnBackPress if true, the dialog can be dismissed by a back press
+ * @param toolbarColor the [Color] of the toolbar
+ * @param toolbarActionColor the [Color] of the actions in the toolbar
+ * @param containerColor the [Color] of the container
+ * @param iconColor the content [Color] of the icon
+ * @param titleColor the content [Color] of the title
+ */
+@Composable
+fun styleFullscreenDialog(
+ darkStatusBar: Boolean = false,
+ menuActions: @Composable (RowScope.() -> Unit)? = null,
+ // DialogProperties
+ dismissOnBackPress: Boolean = true,
+ // Style
+ toolbarColor: Color = FullscreenDialogStyleDefaults.toolbarColor,
+ toolbarActionColor: Color = FullscreenDialogStyleDefaults.toolbarActionColor,
+ containerColor: Color = FullscreenDialogStyleDefaults.containerColor,
+ iconColor: Color = FullscreenDialogStyleDefaults.iconColor,
+ titleColor: Color = FullscreenDialogStyleDefaults.titleColor,
+ contentColor: Color = FullscreenDialogStyleDefaults.contentColor
+): ComposeDialogStyle
+On windows you can also use a windows window based dialog style.
@Composable
+fun DialogDefaults.styleWindowsDialog(
+ dialogTitle: String,
+ position: WindowPosition = WindowPosition(Alignment.Center),
+ width: Dp = 800.dp,
+ height: Dp = 600.dp,
+ // Style
+ iconColor: Color = DialogStyleDefaults.iconColor,
+ titleColor: Color = DialogStyleDefaults.titleColor,
+ contentColor: Color = DialogStyleDefaults.contentColor
+): ComposeDialogStyle
+