Jetpack Compose

surface

@Preview
@Composable
fun ForSurface() {
    Surface(
        shape = MaterialTheme.shapes.medium,
        elevation = 2.dp,
        border = BorderStroke(1.dp, colorResource(id = R.color.black)), //apply border
        color = colorResource(id = R.color.teal_200), //apply foreground color
        contentColor = colorResource(id = R.color.white), //apply color to all child view
        modifier = Modifier
            .animateContentSize()  // animateContentSize will change the Surface size gradually
            .padding(1.dp)
    ) {
        Text(
            text = "Hi I am surface compose",
            modifier = Modifier.padding(all = 4.dp),
            // If the message is expanded, we display all its content
            // otherwise we only display the first line
            style = MaterialTheme.typography.body2
        )
    }
}