I have tried the following code to make my BottomSheetScaffold have a peek height of 92.dp and when pulled up stop halfway or full screen but I does not seem to be accepting the swipeable. FYI, 92.dp is the minimum height of my sheet when collapsed as to be above a bottom tool bar.
Here is a snippet of my code:
val scaffoldState = rememberBottomSheetScaffoldState()
val swipeableState = rememberSwipeableState(initialValue = 0f)
val coroutineScope = rememberCoroutineScope()
BottomSheetScaffold(
scaffoldState = scaffoldState,
sheetContent = {
Column(
Modifier
.fillMaxSize()
) {
Text("Sheet content")
}
},
sheetPeekHeight = 92.dp, // start collapsed
sheetShape = RoundedCornerShape(16.dp),
sheetBackgroundColor = Color.LightGray,
sheetGesturesEnabled = true,
modifier = Modifier
.fillMaxSize()
.swipeable(
state = swipeableState,
anchors = mapOf(
0f to 0f,
0.5f to 0.5f,
0.1f to 0.1f
), // define stopping points
orientation = Orientation.Vertical,
resistance = null
)
) {
Column(Modifier.fillMaxSize()) {
TopAppBar(
title = { Text("Bottom Sheet Example") }
)
Text("Content")
}
}
What I am ultimately trying to do is have the sheet partially visible when the user navigates to the screen and then be able to swipe it all the way down to a minimum height or all the way up to be full screen.
I originally tried this by having a peek height of 200 but then the user cannot swipe it down, only up to full screen.
So, I thought of creating three anchor points so I could have the middle point the initial value and then the user can swipe down to the minimum, or up to full screen.
In the above code I am setting three anchor points but when I swipe up the sheet it goes full screen.
How do you set multiple stops points, or how can I have the sheet visible when the composable appears but yet allow the user to swipe it closed or full screen?
Thanks for any help.
Related
I am trying to show an Ad banner at the bottom which is globally displayed. That means that I want to stick there when I navigate throughout the app.
So far I've tried adding the NavHost and the AdView inside a Column, hoping that the navigation with the linked pages will just take the remaining space and the bottom view will stick there. However the NavHost takes the whole screen and the AdView has zero height. When I navigate the second view, the AdView is still inside the view hierarchy but still with zero height.
I've tried changing all kinds of setup, adding .weight(1f) to the Ad view, changing Column Arrangement, .fillMaxSize(), .fillMaxHeight(), .minHeight(), fixed height, etc.
I might need to look into different layout for achieving this result, but not sure in which direction to search. The Ad works well, I tried displaying without the column and is shown correctly in the center of the screen.
Another variant I've tried is to display it without column, add bottom spacing to the NavHost then position the AdView to the bottom somehow. With this variant I haven't been able to position it to bottom.
Any help would be appreciated!
Column() {
val navController = rememberNavController()
NavHost(
navController = navController,
startDestination = NavigationRoutes.Home
) {
composable(NavigationRoutes.Home) { HomeView(navController = navController) }
composable(
NavigationRoutes.Books,
arguments = listOf(navArgument("mode") { type = NavType.IntType })
) { backStackEntry ->
val rawMode = backStackEntry.arguments?.getInt("mode") ?: 0
var mode: ContentMode = if (rawMode == 0) {
ContentMode.READING
} else {
ContentMode.QUIZ
}
BooksView(navController = navController, mode = mode)
}
}
AndroidView(
modifier = Modifier
.fillMaxWidth()
.height(IntrinsicSize.Max)
.weight(1f),
factory = { context ->
AdView(context).apply {
setAdSize(AdSize.BANNER)
adUnitId = AdIdentifiers.GlobalBanner.adID
loadAd(AdRequest.Builder().build())
}
}
)
}
It might be the issue of any child Composable of NavHost having Modifier.fillmaxSize(). You can set a Modifier for NavHost which let's you define how much space it will cover
Column(modifier = Modifier.fillMaxSize()){
NavHost(modifier = Modifier.fillmaxWidth).weight(1f){}
AdView(modifier = Modifier
.fillMaxWidth()
.height(IntrinsicSize.Max)
)
}
You can put AndroidView in Box and give androidView height as bottom padding values in screens.
NavHost(
//
){
//
}
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.BottomCenter
){
AndroidView()
}
Using Jetpack Compose and the accompanist pager, I'm trying to create a HorizontalPager where:
Edges of items to the left and right of current item are shown
There is a max width to the Pager items
As an example, I wrote the following code (for simplicities sake, I made Text items, but in reality, I'm actually making more complex Card items):
#Composable
fun MyText(modifier: Modifier) {
Text(
text = LOREM_IPSUM_TEXT,
modifier = modifier
.wrapContentHeight()
.border(BorderStroke(1.dp, Color.Red))
)
}
#ExperimentalPagerApi
#Composable
fun MyPager(pagerItem: #Composable () -> Unit = {}) {
Scaffold {
Column(
modifier = Modifier
.fillMaxSize()
// In case items in the VP are taller than the screen -> scrollable
.verticalScroll(rememberScrollState())
) {
HorizontalPager(
contentPadding = PaddingValues(32.dp),
itemSpacing = 16.dp,
count = 3,
) {
pagerItem()
}
}
}
}
#ExperimentalPagerApi
#Preview
#Composable
fun MyPager_200dpWidth() {
MyPager { MyText(modifier = Modifier.widthIn(max = 200.dp)) }
}
#ExperimentalPagerApi
#Preview
#Composable
fun MyPager_500dpWidth() {
MyPager { MyText(modifier = Modifier.widthIn(max = 500.dp)) }
}
#ExperimentalPagerApi
#Preview
#Composable
fun MyPager_FillMaxWidth() {
MyPager { MyText(modifier = Modifier.fillMaxWidth()) }
}
The issue I'm having is that when I make the item have a max width that seems to be smaller than the screen width (see MyPager_200dpWidth), I no longer see the items on the side anymore. On the other hand, using items with larger max widths (See MyPager_500dpWidth) or fillMaxWidth (See MyPager_FillMaxWidth) allows me to see the items on the side.
It seems weird to me that items with the smaller max width are actually taking up more horizontal space than the items with the larger max width. This can be shown in the Preview section...
See how the images on the left (MyPager_500dpWidth) and middle (MyPager_FillMaxWidth) show the next item, while the image on the right (MyPager_200dpWidth`) takes up the whole screen? Here's another comparison when hovering my mouse over the items to see the skeleton boxes...
Just wondering if someone could help me figure out how I can solve this use case. Is it possible that there's a bug in Compose?
The page size is controlled by the HorizontalPager.contentPadding parameter.
Applying widthIn(max = 200.dp) to your text only reduces the size of your element inside the page, while the page size remains unchanged.
Applying more padding should solve your problem, for example, contentPadding = PaddingValues(100.dp) looks like this:
You can fix this by adding your contentPadding like this
val horizontalPadding = 16.dp
val itemWidth = 340.dp
val screenWidth = LocalConfiguration.current.screenWidthDp
val contentPadding = PaddingValues(start = horizontalPadding, end = (screenWidth - itemWidth + horizontalPadding).dp)
I'm trying to achieve modalBottomSheet by BottomSheetScaffold for some custom implementation.
here is my BottomSheetScaffold
BottomSheetScaffold(
sheetPeekHeight = 0.dp,
scaffoldState = bottomSheetState,
sheetBackgroundColor = Color.Transparent,
backgroundColor = Color.Transparent,
sheetElevation = 0.dp,
sheetShape = RoundedCornerShape(topStart = 36.dp, topEnd = 36.dp),
snackbarHost = snackBarHost,
sheetContent = { bottomSheet() }) {
Box(Modifier.fillMaxSize()) {
val coroutineScope = rememberCoroutineScope()
sheetContent()
Scrim(
color = Primary,
alpha = bottomSheetState.currentFraction * 0.5f,
onDismiss = {
coroutineScope.launch { bottomSheetState.bottomSheetState.collapse() }
},
visible = bottomSheetState.bottomSheetState.targetValue != BottomSheetValue.Collapsed && bottomSheetState.bottomSheetState.currentValue != BottomSheetValue.Collapsed
)
}
}
When this scaffold is called by some screen, the sheetContent() will be replaced as screen content. My problem here is when bottomSheet() is empty on that screen and thus there is no height, bottom sheet state think it is expanded while I just not put composable inside bottomSheet() and it just fill based on some condition with no default composable. Because of that the Scrim() function will be visible and when I click on it this exception will throw
java.lang.IllegalArgumentException: The target value must have an associated anchor.
It seems while sheetContent is necessary for BottomSheetScaffold there is no way to deal with empty value because BottomSheetState class that handle's swiping need anchor to get height and empty value cause's unexpected result
This is a bug introduced in latest release of compose 1.2.x. To stop showing bottom sheet at start, I only add sheetContent if data is not null(this was not possible in previous release1.1.x). Now I have another issue. The click event to expanding bottomSheet won't trigger at first try. I always need to click it twice.
In Compose, how do we get the position or size of a Composable in a screen ? For example, I'm trying to focus the map camera between specific bounds and adding padding. Here I need to get the padding corresponding to the pager top position and TopBar bottom position.
Currently the code of this screen is the following:
BoxWithConstraints {
MapViewWithMarkers(...)
TopAppBar(
modifier = Modifier
.fillMaxWidth()
.statusBarsPadding(),
backgroundColor = Color.Transparent,
elevation = 0.dp,
)
HorizontalPager(
state = pagerState,
modifier = Modifier
.align(Alignment.BottomCenter)
.fillMaxWidth()
.navigationBarsPadding()
.padding(bottom = 32.dp),
itemSpacing = 8.dp,
) { page ->
val hikeOnMapCard = hikeMarkerList[page]
HikeOnMapCard(hikeOnMapCard) {
viewModel.hikeOnMapCardClicked(hikeOnMapCard.id)
}
}
}
I would like to forward to the MapViewWithMarkers Composable the padding corresponding to the TopAppBar size and Pager size on this screen
Thanks !
To get the position and the size of a composable you can use the onGloballyPositioned modifier.
Something like:
var sizeTopBar by remember { mutableStateOf(IntSize.Zero) }
var positionInRootTopBar by remember { mutableStateOf(Offset.Zero) }
TopAppBar(
modifier = Modifier
.onGloballyPositioned { coordinates ->
// size
sizeTopBar = coordinates.size
// global position (local also available)
positionInRootTopBar = coordinates.positionInRoot()
}
//...
)
With complex layout to measure and layout multiple composables, use the Layout composable instead. This composable allows you to measure and lay out children manually.
I have Tab Layout with multiple fragments and I would like to display a Popup only when a specific screen is being displayed. I am using the Jetpack Compose Popup component.
I followed the docs and currently the popup is always being displayed regardless the fragment is being displayed, but I want to show the Popup only when a specific screen is being displayed.
Popup code:
Box {
val popupWidth = 200.dp
val popupHeight = 50.dp
val cornerSize = 16.dp
Popup(alignment = Alignment.Center) {
// Draw a rectangle shape with rounded corners inside the popup
Box(
Modifier
.size(popupWidth, popupHeight)
.background(Color.White, RoundedCornerShape(cornerSize))
)
}
}
Sorry to revive an old thread but for completeness sake, try using a boolean and an if statement that is true when you want the popup to be shown.
var showPopup by remember { mutableStateOf(false) }
val popupWidth = 200.dp
val popupHeight = 50.dp
val cornerSize = 16.dp
if (showPopup) {
Popup(alignment = Alignment.Center, onDismissRequest = { showPopup = false }) {
Box(modifier = Modifier.size(popupWidth, popupHeight).background(Color.white, RoundedCornerShape(cornerSize)) {
// content
}
}
}