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

Issue

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?

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

Solution

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
}

Answered By - Ma3x
Answer Checked By - Dawn Plyler (JavaFixing Volunteer)