Develop Reference

How to make toolbar/appbar scrollable

I saw this app, which I thought to be very clean and well designed, so I tried using it to practice, but I had some issues.
They used a collapsing toolbar, which they made seamless with the status bar, but the toolbar doesn't collapse when scrolled, it just scrolls like a regular view, or composeable in jetpack compose.
And the toolbar scrolls when you swipe on it.
Here's an Image of it;
The issue I'm facing now is;
The collapsing toolbar doesn't scroll when I swipe on it, I tried giving the collapsing toolbar a .verticalScrollState, but it crashes the app.
And Also, when I scroll the elements (views) at the bottom of my App (which is the only side that scrolls, because the toolbar above doesn't respond), I don't get the same motion I get from the original App, mine appears as though the elements at the bottom is overlapping the toolbar, but I want everything to scroll upwards seamlessly.
So please (1) How do I make the collapsing toolbar scrollable, (11) How do I make everything scroll upwards seamlessly.
Here's my Collapsing toolbar code;
first I added a the gradle dependency
implementation "me.onebone:toolbar-compose:2.3.2"
#Composable
fun ContactCollapsingToolbar(
onContactsCardClick: (Int) -> Unit
) {
val collapsingToolbarState = rememberCollapsingToolbarScaffoldState()
CollapsingToolbarScaffold(
modifier = Modifier,
state = collapsingToolbarState,
scrollStrategy = ScrollStrategy.EnterAlwaysCollapsed,
toolbar = {
Box(
modifier = Modifier
.fillMaxWidth()
.height(150.dp)
.pin()
.background(
brush = Brush.linearGradient(
colors = listOf(
MaterialTheme.colors.primary,
White
)
)
)
)
Image(
painter = painterResource(id = R.drawable.fc4_self_massage),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier
.fillMaxSize()
.clip(RoundedCornerShape(bottomEnd = 45.dp))
//alpha =
)
Text(
text = stringResource(id = R.string.contact_categories),
style = TextStyle(color = MaterialTheme.colors.onPrimary) + MaterialTheme.typography.h1,
modifier = Modifier.padding(16.dp),
textAlign = TextAlign.Start
)
}
) {
ContactsContentScreen(onContactsCardClick)
}
}
I'll sinerely appreciate any help, whether code, instructions, or directing me somewhere.
Thanks to you in advance.

Material 3 NavigationBar change colorElevation on navigationBar

I have a NavigationBar in Scaffold, but its color elevation is 1.dp or 2.dp, but not 3.dp.
Scaffold(
content = { padding ->
Box(modifier = Modifier.padding(bottom = padding.calculateBottomPadding())) {
CurrentTab()
}
},
bottomBar = {
NavigationBar(
containerColor = MaterialTheme.colorScheme.surface,
contentColor = MaterialTheme.colorScheme.secondaryContainer,
tonalElevation = 1.dp,
) {
navigationTabs.forEach {
TabNavigationItem(it)
}
}
},
)
Defaut elevation is 3.dp, and elevation of android system navigationBar color is 3.dp by default too.
Now i try to change elevation of color, but navigationBar still have 3.dp elevation by default. I want to set android system navigationBar 1.dp elevation too.
I can change color of system navBar on top composable ofc, but this bar is transparent and other screens uses this.
What is the best way to solve this?

Jetpack compose how to blur text area and line it to the bottom of a card

I want to place text at the bottom of a card and blur the text area with a translucent color.
This is what I have so far.
The design I am trying to achieve is this. (Collection Area with cards specific part)
Here's my code:
#Composable
fun CollectionCardArea(
collection: Collection,
cardWidth: Dp
) {
Card(
modifier = Modifier
.width(cardWidth)
.padding(start = 2.dp, end = 25.dp, bottom = 5.dp, top = 0.dp)
.clickable { },
shape = RoundedCornerShape(6),
elevation = 4.dp
) {
Box(modifier = Modifier
.fillMaxSize(),
) {
Image(
painter = rememberImagePainter(
data = collection.image
),
contentDescription = collection.name,
contentScale = ContentScale.Crop,
modifier = Modifier
.fillMaxSize()
)
}
Box(modifier = Modifier
.fillMaxWidth()
.height(20.dp)
.background(Color.Transparent)
) {
Text(text = collection.name, color = Color.White)
}
}
}
The problem is I cannot find a way to align the text to the bottom of the screen.
Also, I cannot figure out how to blur the text area.

First thing, Card can't position its own child (when there are multiple children). So you need to use something like Column, Row, Box, or else inside the card itself. So instead having a tree like this
- Card
- Box
- Image
- Box
- Text
You can try it like this
- Card
- Box
- Box
- Image
- Box
- Text
Second, as for the blur in Jetpack-Compose you can refer to this answer. But the API itself is only available on Android 12 and up.

Show indicator of expandability on the top of BottomSheet in BottomSheetScaffold (Jetpack Compose)

Is it possible to add this small grey round-rectangular view on the top of collapsed bottomsheet (see the screenshot) in BottomSheetScaffold (Jetpack Compose)? Does it have the property for it?

To my knowledge there is no property for it in Compose 1.1, but it can be added to the sheetContent:
Column(
modifier = Modifier.fillMaxWidth().padding(8.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Box(
modifier = Modifier
.background(
color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f),
shape = RoundedCornerShape(50),
)
.size(width = 36.dp, height = 4.dp),
)
}
(Credits to #uragiristereo for the initial suggestion, but .clip(RoundedCornerShape(radius = 50)) didn't seem to work in Compose 1.1. Maybe the behavior changed since the older versions.)

I don't think there is an option or a property for that, but you can easily make it in sheetContent when you are creating your own Bottom Sheet Content.

You can create it easily inside your sheetContent, here is mine for example:
Box(
modifier = Modifier
.background(MaterialTheme.colors.onSurface.copy(alpha = 0.2f))
.size(width = 48.dp, height = 4.dp)
.clip(RoundedCornerShape(radius = 50))
)

How to apply translucent gradient on an Image in Android Jetpack Compose?

In Android Jetpack Compose, does anyone knows how to make an Image's left side slowly fading to transparent towards right side? Thanks!
Edit:
Sorry, I mean making an image fading like this in Compose, probably with blend mode? But not sure how to do that..
Expected outcome:

Just found an answer from How to add fading edge effect to Android Jetpack Compose Column or Row?
"Color.Black" means area that reveal the image.
Thanks guys!
Image(
painterResource(R.drawable.cat),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier
// Workaround to enable alpha compositing
.graphicsLayer { alpha = 0.99f }
.drawWithContent {
val colors = listOf(
Color.Black,
Color.Transparent
)
drawContent()
drawRect(
brush = Brush.horizontalGradient(colors),
blendMode = BlendMode.DstIn
)
}
)

You could place a Box over the image and add a background gradient to the Box. You will have to set the size of the Box though to be the same as the image. In this example I don't bother setting the Box size correctly. I'll leave that up to you:
Here's the image I used:
https://adelaidevet.com.au/sites/default/files/archive/files/images/cat-ginger-eyes-closed_0.jpg
val screenWidth = LocalConfiguration.current.screenWidthDp
Box(modifier = Modifier.fillMaxWidth().wrapContentHeight()) {
Image(
painterResource(R.drawable.cat),
contentDescription = "",
contentScale = ContentScale.FillWidth,
modifier = Modifier.fillMaxWidth()
)
Box(
modifier = Modifier
.requiredWidth(screenWidth.dp)
.requiredHeight(310.dp)
.background(
brush = Brush.horizontalGradient(
startX = 0f,
endX = 700f,
colors = listOf(
Color.Transparent,
Color(0xD7525252),
)
)
)
) {
}
}