Surface In Jetpack Compose.

Surface is a basic building block for displaying content and can be used to wrap other composable to provide a background color, elevation, padding, and other layout properties.

BASIC SURFACE CREATION

To create a Surface in Jetpack Compose, we can use the Surface composable. For example:

Surface(
    modifier = Modifier.height(150.dp).width(250.dp).padding(1.dp)/*Padding for surface*/,
    color = Color(0xFFA1E2EB),
    elevation = 40.dp,
    shape = RoundedCornerShape(20.dp)
) {
    Text(text = "Basic Surface",Modifier.padding(16.dp)/*Padding for Text*/)
}

Basic Surface

In the above code, we use a modifier to modify the height and width of the surface and give it elevation (shadow effect).

Parameters In Surface

Here are all the parameters that can be used with the Surface composable in Jetpack Compose:

modifier: Modifier to apply to the surface
color: Background color of the surface
elevation: Elevation of the surface, which adds a shadow effect
shape: Shapes of the surface, such as a rounded rectangle or a cut-corner rectangle
border: Border around the surface
contentColor: Foreground color of the surface’s content
onClick: Click listener for the surface
enabled: Whether the surface is enabled or disabled
interactionSource: Interaction source for the surface
indication: Indication to show when the surface interacted with
semantics: Accessibility properties for the surface
content: The content of the surface, specified as a composable function.

Elevation In Surface

The elevation property in the Surface composable is used to add a shadow effect to the surface. Higher values of elevation make the surface appear more elevated and create a stronger shadow.

Elevation at different dp value

Background Color In Surface

Surface(
    modifier = Modifier.height(150.dp).width(250.dp).padding(25.dp)
        .background(Color.Blue) /*BackGround Color*/,
    color = Color(0xFF79EBE0),

    shape = CircleShape
) {

    Text(text = "BackGround Color",Modifier.padding(16.dp)/*Padding for Text*/)
}

Blue Color BackGround

Border In Surface

Surface(
    modifier = Modifier.height(150.dp).width(250.dp).padding(25.dp)
        .border(5.dp, Color.Red),
    color = Color(0xFF78AEDA),


    shape = RectangleShape
) {
    Text(text = "Border",Modifier.padding(16.dp)/*Padding for Text*/)
}

Red Border

Conclusion

In this article, we explored how to use the Surface component in Jetpack Compose to display content with a modifier, elevation, and other layout properties. We also looked at how to customize a Surface by changing its elevation, shape, and other layout properties.

I hope you enjoyed reading my article and learned something today. Thank you!