How to add elevation just in the bottom of an element? Jetpack Compose

user_9620772 0
Viewed 2296

I'm trying to add some elevation or shadow just in the bottom of an element. For this element I'm using a Tab composable. How can I add this elevation/shadow just at the bottom as the image attached?

enter image description here

If you can see, the Text Field element has shadow around. For this element I add

shape = 8.dp,
elevation = 6.dp

Inside a Surface element. But I can't use this same attributes in a Tab composable, besides, the shape and elevation adds around all the component, but I just want the "shadow" at the bottom of the Users and Pending users tab.

For this implementation I'm using Jetpack Compose

android-jetpack-compose kotlin android
2 Answers

The way your are supposed to add elevation and shadows to elements in Compose is using Surfaces as containers for other content.

From Surface docs

Material surface is the central metaphor in material design. Each surface exists at a given elevation, which influences how that piece of surface visually relates to other surfaces and how that surface is modified by tonal variance.

So to add shadow to a tab layout you could do something like this

Surface(
    shadowElevation = 9.dp, // play with the elevation values
) {
    Column {
        TabRow(...) // your current TabRow content
    }
}

If the above does not provide the desired shadow effect (I needed a stronger shadow) and since you have a rectangular shape anyway you could use a linear gradient instead.

Write a @Composable function to make the "shadow"

@Composable
fun BottomShadow(alpha: Float = 0.1f, height: Dp = 8.dp) {
    Box(modifier = Modifier
        .fillMaxWidth()
        .height(height)
        .background(
            brush = Brush.verticalGradient(
                colors = listOf(
                    Color.Black.copy(alpha = alpha),
                    Color.Transparent,
                )
            )
        )
    )
}

Then use it in your existing Compose layout

Column {
    TabRow(...) // your current TabRow content

    BottomShadow(alpha = .15f, height = 8.dp) // use higher alpha for a stronger shadow
}
user_24222240

You can use the modifier shadow on your TabRow. Also, add zIndex so the shadow is drawn on top of the tab content.

For example, to add the default top app bar elevation you could do:

TabRow(
    modifier = modifier
         .shadow(AppBarDefaults.TopAppBarElevation)
         .zIndex(1f),
    ...
)
user_37421220
Related