LazyColumn in Jetpack Compose works fine with Scaffold and its inner padding according to this link. but when I try to use it inside a Fragment, it's items cut off by Toolbar and BottomNavigationView.
should I calculate inner padding manually depending on Toolbar and BottomNavigationViewsize or is there a better solution?
here's the structure. items of lazyColumn are colorful.
as you can see blue item is cut off.
update:
I realized that this behavior is because root of activity is a CoordinatorLayout and my container has appbar_scrolling_view_behavior. I tried this, but it didn't work.
I'm not sure if this would help, but you can try adding the height of the Bottom Navigation view as a bottom content padding to the LazyColumn or to a transparent widget inside another item{…} scope.
as a content padding
LazyColumn(
modifier = Modifier
.fillMaxSize(),
contentPadding = PaddingValues(bottom = <Bottom navigation height>)
) {…}
or as another item scope
LazyColumn(
modifier = Modifier
.fillMaxSize()
) {
items (..) {…}
item {
Box(
modifier = Modifier.height(<Bottom navigation view height>)
)
}
}
Related
In XML we have material3 bottom sheet. It allows us to set behavior of bottom sheet. It can be updated like:
bottomSheetBehavior.halfExpandedRatio = 0.6
bottomSheetBehavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED
I'm migrating project to Compose. My app used this half expanded ratio for 3 positioned bottom sheet: collapsed, half expanded, expanded. Now i'm trying to create bottom sheet like that:
val sheetState = rememberBottomSheetState(
initialValue = BottomSheetValue.Collapsed
)
val scaffoldState = rememberBottomSheetScaffoldState(
bottomSheetState = sheetState
)
BottomSheetScaffold(
scaffoldState = scaffoldState,
sheetContent = {}
) {}
But it looks like we don't have those behavior attributes here. Can we get the same behavior as in XML with half expanded bottom sheet?
Yes, it's possible. But it's a little bit of work. You basically have to provide your own implementations of the classes BottomSheetScaffold and SwipeableState as well as any related enums, classes and Composable functions used by these two.
The main points to focus on:
provide a third value to BottomSheetValue for the half-expanded state
provide a function that animates the half-expansion (similar to functions expand() and collapse() in BottomSheetState) as well as a property that checks if the bottom sheet is half expanded (similar to val isExpanded: Boolean)
add a third swipeable anchor to BottomSheetScaffold with the half expansion value you want to achieve (check line fullHeight - peekHeightPx to Collapsed, here is where you want to add your custom anchor)
handle the half expanded state in the .semantics block of the Modifier in BottomSheetScaffold
You might need to tweak a few more things depending on your specific requirement. It can take a while to set up everything but once it's done, it works like a charm.
I have an Add Shopping List item Jetpack Compose screen which contains several TextField inputs and an image container at the bottom. The screen overflows at the bottom and is cut off. How can I scroll the screen?
Add Modifier.scrollable(..) to the container that you wish to make scrollable.
Code would be something like this:
val scrollState = rememberScrollState()
...
Box( // or whatever your parent composable is
modifier = Modifier
.scrollable(state = scrollState, orientation = Orientation.Vertical)
) {
...
}
Of course, there are other Modifier methods for making composables scrollable that might fit better for your case.
I want to add dynamic tab items. in a scrollable way, not fixed tabs
I followed this example here
But after I implement the same, still the tabs fixed, what I want is to show the whote text of the tab (Not fixed size tab), and the tabs must be scrollable like the following image
I tried to make the TabRaw scrollable as the following:
TabRow(
selectedTabIndex = pagerState.currentPage,
backgroundColor = Color.Transparent,
modifier = Modifier
.fillMaxWidth()
.padding(MaterialTheme.spacing._20sdp)
.horizontalScroll(scrollableState)
.height(32.dp),
contentColor = colorResource(id = R.color.primary)
)
But it throws IllegalArgumentException, Because I'm including it in a ConstraintLayout
I only used ScrollableTabRow instead of TabRow
I have implemented HorizontalPager with TabRow in my project. My HorizontalPager uses default fling behaviour from PagerDefaults.flingBehavior(state). I have not overridden the fling behavior.
This is how the code looks like:
val pagerState = rememberPagerState()
HorizontalPager(
count = profileState.tabs.size,
state = pagerState
) {..grid item..}
I have to scroll very hard to scroll between the pager items. I want the pager to scroll to next/previous screen on even slight scroll.
After debugging and logging, I found that initialVelocity in performFling method is coming out to be -0.0 (same for left and right fling) all the time for some reason.
You can use (with Accompanist version: accompanist-pager:0.24.8-beta):
HorizontalPager(
count = 3,
state = pagerState,
verticalAlignment = Alignment.Top,
modifier = Modifier.fillMaxSize()
)
In my case, there was a horizontal scrollable Row in the pager item. Make it unscrollable.
I want to implement this ui.
How can i overlap post list item on each other in android jetpack compose?
If you're using a Column or a LazyList to display the items, you can use the verticalArrangement parameters with a negative spacedBy space.
LazyColumn(
verticalArrangement = Arrangement.spacedBy((-32).dp)
) {
// Put the items to overlap here
}
spacedBy() doc
Use Box to put one element on top of another.
Also, read official documentation here
You can use Box
sample :
Box(modifier = Modifier.fillMaxSize()) {
Image(modifier = Modifier.fillMaxSize()) {} //Image1
Image(modifier = Modifier.fillMaxSize()) {} //Image2
}
In the above example, Image2 will cover the Box's maxSize. Image1 will be beneath Image2.
Adding to Bagadeshkumar R's answer, you can place Spacer with height that is spacer(modifier = Modifier.height(8.dp)), attribute between image 1 and 2, for image 1 to be partially visible.