2

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!

enter image description here

user1865027
  • 3,505
  • 6
  • 33
  • 71
  • 2
    If I understand you correctly, you could adapt [Gabriele's suggestion here](https://stackoverflow.com/a/63915010), simply using a plain color in lieu of a gradient. For example, on one of the official Compose examples of a `Row`, I just amended the `Modifier` to `modifier = Modifier.drawWithContent { drawContent(); drawRect(Color.Blue.copy(alpha = 0.4F)) }…`, which gives https://i.stack.imgur.com/1swQ0.png. – Mike M. Apr 03 '22 at 20:10
  • Thank you so much @MikeM. It worked! Can you please post an answer instead so I can mark it? – user1865027 Apr 03 '22 at 21:46
  • No problem! I'm good, though. :-) Nothin' major. Also, I'm still learning Compose myself right now, so there might be some other preferred way to do this that I'm not aware of yet. You might wait to see if someone has a better suggestion; otherwise, please feel free to post an answer yourself to finish this up. Thank you, though. I appreciate the offer. Glad we could get something working. Cheers! – Mike M. Apr 04 '22 at 00:34
  • 1
    Thanks for all the help! I'm new to Compose too. been using xml but seems like Compose is the future. – user1865027 Apr 04 '22 at 00:59

1 Answers1

2

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!

F.Mysir
  • 2,838
  • 28
  • 39