How to apply opacity to all of its children in Android Compose?

Question

I have a Row that contains a circle Image. A Column with 2 BasicText in there and a Spacer between Column and Image. I want to have a way to "highlight" this row by giving it a blue tint with some opacity overlay. The closest I can get is by giving the Row a background color, but it doesn't give all the children blue-ish tint. I know background will not work because the color isn't drawn overlay but instead behind all other elements. Is there a way to achieve this? Thanks!

Answer 1

The best way I can think of is the following:

YourActivityTheme {
    // A surface container using the 'background' color from the theme
    Surface(
        modifier = Modifier.wrapContentSize(),
        color = MaterialTheme.colors.background
    ) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .height(IntrinsicSize.Min)
                .padding(8.dp),
            shape = RoundedCornerShape(12.dp),
            border = BorderStroke(2.dp, Color.Black)
        ) {
            Row(Modifier.padding(8.dp)) {
                Surface(
                    modifier = Modifier.size(50.dp),
                    shape = CircleShape,
                    border = BorderStroke(2.dp, Color.Black),
                    color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f)
                ) {
                    // Image goes here
                }
                Column(
                    modifier = Modifier
                        .padding(start = 8.dp)
                        .align(Alignment.CenterVertically)
                ) {
                    Text("Text1", fontWeight = FontWeight.Bold)
                    Text("Text2", style = MaterialTheme.typography.body2)
                }
            }

            Box(modifier = Modifier
                .fillMaxSize()
                .alpha(0.2f)
                .background(Color.Blue))
        }
    }
}

There are endless ways you can create your example. That one is the best that comes to my mind. If you have any question please fill free to ask me!