I am going to design a layout with a bottomsheetscaffold with sheetPeekHeight to be 100 dp in order to show the sheet content. I also need to put a lazyColumn for the main content of the bottomsheetscaffold. But when the lazy column scrolls to the end, the final item will be behind the bottom sheet. How can I make the final item of the column be above the sheet?
Here is the code for the bottom sheet:
#ExperimentalMaterialApi
#Composable
fun HomeScreen() {
val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
)
val coroutineScope = rememberCoroutineScope()
BottomSheetScaffold(
scaffoldState = bottomSheetScaffoldState,
sheetContent = {
Text("this is test", modifier = Modifier.fillMaxWidth().height(60.dp))
},
sheetPeekHeight = 100.dp,
sheetShape = RoundedCornerShape(topEnd = 52.dp, topStart = 52.dp),
backgroundColor = Color.White
) {
MainContent()
}
}
#Composable
fun MainContent() {
LazyColumn {
items(count = 5) { itemIndex ->
when (itemIndex) {
0 -> {
Image(modifier = Modifier
.fillMaxWidth()
.height(100.dp), contentDescription = "test",
painter = painterResource(id = R.drawable.image))
}
}
}
}
}
Spacer(modifier=Modifier.height(100.dp)) I think fits better than a box here.
In your case it is easier to use fixed height, but if your content is dynamic you can also calculate bottomSheet height based on screenheight - bottomSheetOffset
fun YourComposable{
...
val bottomSheetHeight =
configuration.screenHeightDp.dp - bottomSheetScaffoldState.bottomSheetState.offset.value.pxToDp
...
}
private val Float.pxToDp: Dp
get() = (this / Resources.getSystem().displayMetrics.density).dp
As a workaround, I added an empty box with the same height as peekheight to the end of the lazycloumn. But I'm still interested in a better solution.
Related
I'm using ScalingLazyColumn with a very long Text inside as follows:
#Preview(device = Devices.WEAR_OS_SMALL_ROUND, showSystemUi = true)
#Composable
fun Test(modifier: Modifier = Modifier) {
val scalingLazyState = remember { ScalingLazyListState() }
val focusRequester = remember { FocusRequester() }
Scaffold(
modifier = modifier,
positionIndicator = { PositionIndicator(scalingLazyListState = scalingLazyState) }
) {
ScalingLazyColumn(
modifier = Modifier.scrollableColumn(focusRequester, scalingLazyState),
state = scalingLazyState,
) {
item {
Text(
longText,
Modifier
.padding(top = 20.dp, start = 16.dp, end = 16.dp, bottom = 48.dp),
textAlign = TextAlign.Center,
)
}
}
}
}
val longText =
"Take the plunge\n" +
"\n" +
"commit oneself to a course of action about which one is nervous.\n" +
"\n" +
"\"she wondered whether to enter for the race, but decided to take the plunge\"\n" +
"\"They're finally taking the plunge and getting married.\"\n" +
"\n" +
"\n" +
"plunge:\n" +
"jump or dive quickly and energetically.\n" +
"\"our daughters whooped as they plunged into the sea\"\n"
But for some reason when I launch the app the focus goes to the bottom of the text, instead of the beginning, which looks like a bug. I've tried playing with different parameters of ScalingLazyColumn (anchorType, autoCentering, scalingParams) to no avail.
Any idea how to fix it and make the ScalingLazyColumn focus on the beginning of the first element when I launch the app?
Switching off autoCentering is an option, but I would try and avoid it in most cases as it will will make handling getting the padding right on different devices sizes more difficult and often results in being able to over scroll the list items either at the beginning or the end.
I am not sure exactly what you want to achieve when you say that you want the focus to be on the start of the first item but the following should give you what you need.
Set the state initial item to 0
Set the anchor type to ScalingLazyListAnchorType.ItemStart
Remove top padding from your item
Apply an offset to the state initialItem initialCenterItemScrollOffset to shift the start of you item up a little.
Optionally adjust the autoCentering to make sure that the limit of the scrolling matches the initial position selected in the state
#Preview(device = Devices.WEAR_OS_SMALL_ROUND, showSystemUi = true)
#Composable
fun SingleItemSLCWithLongText(modifier: Modifier = Modifier) {
val scalingLazyState = remember { ScalingLazyListState(initialCenterItemIndex = 0, initialCenterItemScrollOffset = 80) }
val focusRequester = remember { FocusRequester() }
Scaffold(
modifier = modifier.background(Color.Black),
positionIndicator = { PositionIndicator(scalingLazyListState = scalingLazyState) }
) {
ScalingLazyColumn(
modifier = Modifier.scrollableColumn(focusRequester, scalingLazyState),
autoCentering = AutoCenteringParams(itemIndex = 0, itemOffset = 80),
state = scalingLazyState,
anchorType = ScalingLazyListAnchorType.ItemStart
) {
item {
Text(
longText,
Modifier
.padding(start = 16.dp, end = 16.dp, bottom = 48.dp),
textAlign = TextAlign.Center,
)
}
}
}
}
Here is a screenshot of how the screen initially looks
Initial screen
This test activity let's you play with all the params to see starting position
https://github.com/google/horologist/blob/a1241ff25b7008f7c1337f4425b98d14ce30d96d/sample/src/main/java/com/google/android/horologist/scratch/ScratchActivity.kt
After a few hours of frustration I finally found a solution.
If you read the documentation for ScalingLazyColumn it says:
"If the developer wants custom control over position and spacing they
can switch off autoCentering and provide contentPadding."
So all you need to do is to just add autoCentering = null in ScalingLazyColumn.
This is a working code where the focus will be in the beginning of the Text:
val scalingLazyState = remember { ScalingLazyListState() }
val focusRequester = remember { FocusRequester() }
Scaffold(
modifier = modifier,
positionIndicator = { PositionIndicator(scalingLazyListState = scalingLazyState) }
) {
ScalingLazyColumn(
modifier = Modifier.scrollableColumn(focusRequester, scalingLazyState),
state = scalingLazyState,
autoCentering = null,
) {
item {
Text(
longText,
Modifier
.padding(top = 20.dp, start = 16.dp, end = 16.dp, bottom = 48.dp),
textAlign = TextAlign.Center,
)
}
}
}
ScalingLazyListState defaults to the center of the second item (index 1). You can tell it to instead start in the first item and even jn the ScalingLazyColumn parameters use the start of items.
val scalingLazyState = remember { ScalingLazyListState(initialCenterItemIndex = 0) }
val focusRequester = remember { FocusRequester() }
Scaffold(
modifier = Modifier,
positionIndicator = { PositionIndicator(scalingLazyListState = scalingLazyState) }
) {
ScalingLazyColumn(
modifier = Modifier.scrollableColumn(focusRequester, scalingLazyState),
state = scalingLazyState,
anchorType = ScalingLazyListAnchorType.ItemStart
) {
item {
Text(
longText,
Modifier
.padding(top = 20.dp, start = 16.dp, end = 16.dp, bottom = 48.dp),
textAlign = TextAlign.Center,
)
}
}
}
I am trying to get the scroll percentage of lazy columns to scroll like 25%, 50%, 100%. After the analysis, I could not find any method to get it.
You can find it based on the visible index since the items are loaded lazily:
#Composable
fun ScrollPercentageLazyColumn() {
val itemsCount = 500
val scrollState = rememberLazyListState()
val formatter = remember { DecimalFormat("0.0") }
val firstVisibleItemIndex = scrollState.firstVisibleItemIndex
val visibleItemsCount = scrollState.layoutInfo.visibleItemsInfo.size
val percent = (firstVisibleItemIndex / (itemsCount - visibleItemsCount).toFloat()) * 100f
val scrollText = "scroll percentage : ${formatter.format(percent)}%"
Box {
LazyColumn(
state = scrollState,
modifier = Modifier.fillMaxSize()
) {
items(itemsCount) {
Text(text = "Item $it", Modifier.padding(12.dp))
}
}
Text(text = scrollText, Modifier.align(Alignment.TopCenter).padding(8.dp))
}
}
I have a LazyColumn and some childs in it like below
LazyColumn(
modifier = Modifier.padding(16.dp),
verticalArrangement = Arrangement.spacedBy(space = 16.dp)
) {
item {
Child(
modifier = Modifier,
firstImage = fakeImage,
secondImage = fakeImage,
onImageClick = {}
)
}
item {
Child(
modifier = Modifier,
firstImage = fakeImage,
secondImage = fakeImage,
onImageClick = {}
)
}
}
here is what is inside of TwoPiecesLayout
#ExperimentalMaterialApi
#Composable
fun Child(
modifier: Modifier,
firstImage: Image,
secondImage: Image,
onImageClick: (Image) -> Unit
) {
val height = (LocalConfiguration.current.screenWidthDp / 2) - 56
Row(
modifier = modifier,
horizontalArrangement = Arrangement.spacedBy(space = 16.dp)
) {
ImageCell(
modifier = Modifier
.weight(
weight = 1F
)
.height(
height = height.dp
),
image = firstImage,
onImageClick = {
onImageClick(firstImage)
}
)
ImageCell(
modifier = Modifier
.weight(
weight = 3F
)
.height(
height = height.dp
),
image = secondImage,
onImageClick = {
onImageClick(secondImage)
}
)
}
}
when every of Images in Child clicked I want to expand their size as much as screen's size just like the material design choreography
https://storage.cloud.google.com/non-spec-apps/mio-direct-embeds/videos/FADE.mp4
how can I do this?
This is not just for image, with basically any Composable, you can apply this method
var expanded by remember { mutableStateOf (false) }
val animF by animateFloatAsState(
initialState = 0.25f,
targetState = if (expanded) 1f else 0.25f
)
MyComposable(
Modifier.fillMaxSize(animF) // pass the animated Fraction here
.clickable { expanded = !expanded }
)
This will oscillate between 0.25 of the entire screen to 1f of the same, upon clicking the Composable.
See? Super-easy, barely an inconvenience.
I am working in Android Jetpack Compose.
I have three TextField in a in a Column. I would like the third and/or last text field to be scrollable. How can I do that?
TextField example with horizontalScroll
#Composable
fun Test() {
TextField(
value = "long1 long2 long3 long4 long5 long6 long7 long8 long9 long10 long11 long12 text",
onValueChange = {},
singleLine = true,
modifier = Modifier
.fillMaxWidth()
.horizontalScroll(rememberScrollState())
)
}
TextField example with scrollable
#Composable
fun Test() {
var offset by remember { mutableStateOf(0f) }
TextField(value = "long1 long2 long3 long4 long5 long6 long7 long8 long9 long10 long11 long12 text",
onValueChange = {},
singleLine = true,
modifier = Modifier
.fillMaxWidth()
.scrollable(
orientation = Orientation.Horizontal,
state = rememberScrollableState { delta ->
offset += delta
delta
}
)
)
}
more info there
https://developer.android.com/jetpack/compose/gestures?authuser=1#scrollable-modifier.
Jetpack Compose:
I want to create a grid layout like UI with equally height rows, but I can't find a function for getting the current usable screen size (The application should look like that)
How the result should look like:
Have a look at the link mentioned above
What I have tried:
I tried to use Modifier.fillMaxHeight() inside of LazyVerticalGrid for generating equally sized rows, but it didn't work. Beside of that, I also had the idea of setting the height manually for every row item, but I couldn't find a function for getting the usable screen size in jetpack compose (I then would have divided the screen height by the number of rows).
val numbers = (0..34).toList()
LazyVerticalGrid(
cells = GridCells.Fixed(7)
) {
items(numbers.count()) {
Column(horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "#"+numbers.get(it))
}
}
}
You can use the aspectRatio modifier:
LazyVerticalGrid(
columns = GridCells.Adaptive(100.dp),
) {
items(100) {
Box(
modifier = Modifier.aspectRatio(1f)
) { }
}
}
Full example:
#Composable
fun Body(modifier: Modifier) {
Column (
modifier = modifier,
) {
Text(
text = "Without aspect ratio",
modifier = Modifier.padding(12.dp),
style = MaterialTheme.typography.h5,
)
LazyVerticalGrid(
columns = GridCells.Adaptive(100.dp),
modifier = Modifier.weight(1f),
) {
items(100) {
Surface (
modifier = Modifier
.padding(12.dp),
color = Color(0xff2187bb),
) {
RandomSizeBox()
}
}
}
Divider()
Text(
"With aspect ratio",
modifier = Modifier.padding(12.dp),
style = MaterialTheme.typography.h5,
)
LazyVerticalGrid(
columns = GridCells.Adaptive(100.dp),
modifier = Modifier.weight(1f),
) {
items(100) {
Surface (
modifier = Modifier
.aspectRatio(1f)
.padding(12.dp),
color = Color(0xffbb2187),
) {
RandomSizeBox()
}
}
}
}
}
#Composable
fun RandomSizeBox() {
Box(modifier = Modifier.height((10 + Math.random() * 90).dp))
}
For what it's worth, you can measure screen height this way:
val screenHeight = LocalConfiguration.current.screenHeightDp
But it might be worth your making your grid scrollable using a scroll modifier:
https://developer.android.com/jetpack/compose/gestures#scroll-modifiers
You can use subcompose layout to precalculate the max height of the biggest view, and then use that height for all of the LazyVerticalGrid items.
For example:
How does this work?
SubcomposeLayout gives you constraints, i.e. the max width and height the view could be. You can use this to calculate how many views will fit for a given min width. I will use 128 dp:
val longestText = exampleStringList.maxBy { it.length }
val maxWidthDp = constraints.maxWidth/1.dp.toPx()
val width = maxWidthDp/floor(maxWidthDp/128)
Then you can measure the height of a test view, in my case CategoryButton passing the calculated width from above to the modifier:
val measuredHeight = subcompose("viewToMeasure") {
CategoryButton(
longestText,
modifier = Modifier.width(width.dp)
)
}[0]
.measure(Constraints()).height.toDp()
Next you compose your actual LazyVerticalGrid, ensuring that the items use the height you calculated above:
val contentPlaceable = subcompose("content") {
LazyVerticalGrid(
columns = GridCells.Adaptive(minSize = 128.dp),
verticalArrangement = Arrangement.spacedBy(12.dp),
horizontalArrangement = Arrangement.spacedBy(12.dp),
) {
items(DataStore.categories) { category ->
CategoryButton(
category,
onClick = { onCategorySelected(category) },
modifier = Modifier.height(measuredHeight)
)
}
}
}[0].measure(constraints)
And finally, layout the LazyVerticalGrid:
layout(contentPlaceable.width, contentPlaceable.height) {
contentPlaceable.place(0, 0)
}
Full code:
SubcomposeLayout { constraints ->
val longestText = DataStore.categories.maxBy { it.length }
val maxWidthDp = constraints.maxWidth/1.dp.toPx()
val width = maxWidthDp/floor(maxWidthDp/128)
val measuredHeight = subcompose("viewToMeasure") {
CategoryButton(
longestText,
modifier = Modifier.width(width.dp)
)
}[0]
.measure(Constraints()).height.toDp()
val contentPlaceable = subcompose("content") {
LazyVerticalGrid(
columns = GridCells.Adaptive(minSize = 128.dp),
verticalArrangement = Arrangement.spacedBy(12.dp),
horizontalArrangement = Arrangement.spacedBy(12.dp),
) {
items(DataStore.categories) { category ->
CategoryButton(
category,
onClick = { onCategorySelected(category) },
modifier = Modifier.height(measuredHeight)
)
}
}
}[0].measure(constraints)
layout(contentPlaceable.width, contentPlaceable.height) {
contentPlaceable.place(0, 0)
}
}
there is another perhaps simple way to do it. You could keep tab of which item is the highest at the moment and update all the other one accordingly. Here is an example:
var desiredItemMinHeight by remember {
mutableStateOf(0.dp)
}
val density = LocalDensity.current
LazyVerticalGrid(
modifier = Modifier.fillMaxSize(),
columns = GridCells.Fixed(count = 2),
) {
items(state.items) {
ItemBox(
modifier = Modifier
.onPlaced {
with(density) {
if (desiredItemMinHeight < it.size.height.toDp()) {
desiredItemMinHeight = it.size.height.toDp()
}
}
}
.defaultMinSize(minHeight = desiredItemMinHeight),
)
}
}