@Preview
@Composable
fun EdgeButtonListSample() {
val state = rememberScalingLazyListState()
val horizontalPadding = LocalConfiguration.current.screenWidthDp.dp * 0.052f
val verticalPadding = LocalConfiguration.current.screenHeightDp.dp * 0.16f
val colors =
listOf(
"Filled" to ButtonDefaults.buttonColors(),
"Filled Variant" to ButtonDefaults.filledVariantButtonColors(),
"Filled Tonal" to ButtonDefaults.filledTonalButtonColors(),
"Outlined" to ButtonDefaults.outlinedButtonColors(),
"Disabled" to ButtonDefaults.buttonColors(),
)
var selectedColor by remember { mutableIntStateOf(0) }
val types = listOf("Icon only" to 0, "Text only" to 1)
var selectedType by remember { mutableIntStateOf(0) }
ScreenScaffold(
scrollState = state,
contentPadding = PaddingValues(horizontal = horizontalPadding, vertical = verticalPadding),
edgeButton = {
EdgeButton(
modifier =
Modifier.scrollable(
state,
orientation = Orientation.Vertical,
reverseDirection = true,
// An overscroll effect should be applied to the EdgeButton for proper
// scrolling behavior.
overscrollEffect = rememberOverscrollEffect(),
),
onClick = {},
buttonSize = EdgeButtonSize.Medium,
colors = colors[selectedColor].second,
border =
if (colors[selectedColor].first == "Outlined")
ButtonDefaults.outlinedButtonBorder(true)
else null,
enabled = colors[selectedColor].first != "Disabled",
) {
if (selectedType == 0) {
// Remove extra spacing around the icon so it integrates better into the scroll.
CheckIcon(Modifier.size(21.dp).wrapContentSize(unbounded = true).size(32.dp))
} else {
Text("Ok")
}
}
},
) { contentPadding ->
ScalingLazyColumn(
state = state,
modifier = Modifier.fillMaxSize().selectableGroup(),
autoCentering = null,
contentPadding = contentPadding,
horizontalAlignment = Alignment.CenterHorizontally,
) {
item { Text("Color") }
items(colors.size) { ix ->
RadioButton(
label = { Text(colors[ix].first) },
selected = selectedColor == ix,
onSelect = { selectedColor = ix },
modifier = Modifier.fillMaxWidth(),
)
}
item { Text("Type") }
items(types.size) { ix ->
RadioButton(
label = { Text(types[ix].first) },
selected = selectedType == ix,
onSelect = { selectedType = ix },
modifier = Modifier.fillMaxWidth(),
)
}
}
}
}
ScaffoldSample
@Preview
@Composable
fun ScaffoldSample() {
// Declare just one [AppScaffold] per app such as in the activity.
// [AppScaffold] allows static screen elements (i.e. [TimeText]) to remain visible
// during in-app transitions such as swipe-to-dismiss.
AppScaffold {
// Define the navigation hierarchy within the AppScaffold,
// such as using SwipeDismissableNavHost.
// For this sample, we will define a single screen inline.
val listState = rememberScalingLazyListState()
// By default, ScreenScaffold will handle transitions showing/hiding ScrollIndicator,
// showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
ScreenScaffold(scrollState = listState, contentPadding = PaddingValues(10.dp)) {
contentPadding ->
ScalingLazyColumn(
state = listState,
contentPadding = contentPadding,
modifier = Modifier.fillMaxSize(),
) {
items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
}
}
}
}
@Preview
@Composable
fun ScaffoldWithSLCEdgeButtonSample() {
// Declare just one [AppScaffold] per app such as in the activity.
// [AppScaffold] allows static screen elements (i.e. [TimeText]) to remain visible
// during in-app transitions such as swipe-to-dismiss.
AppScaffold(modifier = Modifier.background(Color.Black)) {
// Define the navigation hierarchy within the AppScaffold,
// such as using SwipeDismissableNavHost.
// For this sample, we will define a single screen inline.
val listState = rememberScalingLazyListState()
// By default, ScreenScaffold will handle transitions showing/hiding ScrollIndicator,
// showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
ScreenScaffold(
scrollState = listState,
// Define custom spacing between [EdgeButton] and [ScalingLazyColumn].
edgeButtonSpacing = 15.dp,
edgeButton = {
EdgeButton(
onClick = {},
modifier =
// In case user starts scrolling from the EdgeButton.
Modifier.scrollable(
listState,
orientation = Orientation.Vertical,
reverseDirection = true,
// An overscroll effect should be applied to the EdgeButton for proper
// scrolling behavior.
overscrollEffect = rememberOverscrollEffect(),
),
) {
Text("Clear All")
}
},
) { contentPadding ->
ScalingLazyColumn(
state = listState,
modifier = Modifier.fillMaxSize(),
// Bottom spacing is derived from [ScreenScaffold.edgeButtonSpacing].
contentPadding = contentPadding,
autoCentering = null,
) {
items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
}
}
}
}
@Preview
@Composable
fun ScaffoldWithTLCEdgeButtonSample() {
// Declare just one [AppScaffold] per app such as in the activity.
// [AppScaffold] allows static screen elements (i.e. [TimeText]) to remain visible
// during in-app transitions such as swipe-to-dismiss.
AppScaffold(modifier = Modifier.background(Color.Black)) {
// Define the navigation hierarchy within the AppScaffold,
// such as using SwipeDismissableNavHost.
// For this sample, we will define a single screen inline.
val listState = rememberTransformingLazyColumnState()
// By default, ScreenScaffold will handle transitions showing/hiding ScrollIndicator,
// showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
ScreenScaffold(
scrollState = listState,
// Define custom spacing between [EdgeButton] and [ScalingLazyColumn].
edgeButtonSpacing = 15.dp,
edgeButton = {
EdgeButton(
onClick = {},
modifier =
// In case user starts scrolling from the EdgeButton.
Modifier.scrollable(
listState,
orientation = Orientation.Vertical,
reverseDirection = true,
// An overscroll effect should be applied to the EdgeButton for proper
// scrolling behavior.
overscrollEffect = rememberOverscrollEffect(),
),
) {
Text("Clear All")
}
},
) { contentPadding ->
TransformingLazyColumn(
state = listState,
modifier = Modifier.fillMaxSize(),
// Bottom spacing is derived from [ScreenScaffold.edgeButtonSpacing].
contentPadding = contentPadding,
) {
items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
}
}
}
}
