Skip to content

Instantly share code, notes, and snippets.

@cbeyls
Created April 20, 2023 18:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cbeyls/e991fff3336caecdc6108c53bd9692ae to your computer and use it in GitHub Desktop.
Save cbeyls/e991fff3336caecdc6108c53bd9692ae to your computer and use it in GitHub Desktop.
Material 2 AlertDialog for Jetpack Compose with support for scrollable content on overflow
package be.digitalia.common.ui
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha
import androidx.compose.material.MaterialTheme
import androidx.compose.material.ProvideTextStyle
import androidx.compose.material.Surface
import androidx.compose.material.contentColorFor
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
import com.google.accompanist.flowlayout.FlowMainAxisAlignment
import com.google.accompanist.flowlayout.FlowRow
@Composable
fun ScrollableAlertDialog(
onDismissRequest: () -> Unit,
confirmButton: @Composable () -> Unit,
modifier: Modifier = Modifier,
dismissButton: @Composable (() -> Unit)? = null,
title: @Composable (() -> Unit)? = null,
text: @Composable (() -> Unit)? = null,
shape: Shape = MaterialTheme.shapes.medium,
backgroundColor: Color = MaterialTheme.colors.surface,
contentColor: Color = contentColorFor(backgroundColor),
properties: DialogProperties = DialogProperties()
) {
ScrollableAlertDialog(
onDismissRequest = onDismissRequest,
buttons = {
// TODO migrate to Compose FlowRow when spacing between rows becomes supported
FlowRow(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 8.dp, vertical = 2.dp),
mainAxisAlignment = FlowMainAxisAlignment.End,
mainAxisSpacing = 8.dp,
crossAxisSpacing = 12.dp
) {
dismissButton?.invoke()
confirmButton()
}
},
modifier = modifier,
title = title,
text = text,
shape = shape,
backgroundColor = backgroundColor,
contentColor = contentColor,
properties = properties
)
}
@Composable
fun ScrollableAlertDialog(
onDismissRequest: () -> Unit,
buttons: @Composable () -> Unit,
modifier: Modifier = Modifier,
title: (@Composable () -> Unit)? = null,
text: @Composable (() -> Unit)? = null,
shape: Shape = MaterialTheme.shapes.medium,
backgroundColor: Color = MaterialTheme.colors.surface,
contentColor: Color = contentColorFor(backgroundColor),
properties: DialogProperties = DialogProperties()
) {
Dialog(
onDismissRequest = onDismissRequest,
properties = properties
) {
Surface(
modifier = modifier.padding(vertical = 24.dp),
shape = shape,
color = backgroundColor,
contentColor = contentColor
) {
Column(modifier = Modifier.padding(top = 16.dp)) {
title?.let {
Box(TitlePadding.align(Alignment.Start)) {
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
val textStyle = MaterialTheme.typography.subtitle1
ProvideTextStyle(textStyle, title)
}
}
}
text?.let {
Box(
TextPadding
.weight(1f, false)
.align(Alignment.Start)
.verticalScroll(rememberScrollState())
) {
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
val textStyle = MaterialTheme.typography.body2
ProvideTextStyle(textStyle, text)
}
}
}
buttons()
}
}
}
}
private val TitlePadding = Modifier.padding(start = 24.dp, end = 24.dp, bottom = 8.dp)
private val TextPadding = Modifier.padding(horizontal = 24.dp)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment