Compose: Place view between two backgrounds

Question

I tried to figure out how this can be achieved in compose and have completely no idea. I want to place circle as shown on the picture. Tried to play around with Columns / Boxes without any success. Would be grateful for any tips.

Answer 1

You can also use negative offset y, to make the view display between two views.

Column(modifier = Modifier.fillMaxSize()) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp)
            .background(color = Color.Blue)
    ) {}

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
            .background(color = Color.Green)
    ) {
        
        // red circle view
        Box(
            modifier = Modifier
                .align(Alignment.TopCenter)
                .offset(y = (-40).dp)
                .size(80.dp)
                .clip(CircleShape)
                .background(color = Color.Red)
        )
    }
}

Answer 2

You can do like this

@Composable
fun CircleInsideBoxes() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp) //your height for the container
    ) {
        Column(
            modifier = Modifier.fillMaxSize()
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1f)
                    .background(color = Color(0xFF3F48CC))
            )
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1f)
                    .background(color = Color(0xFF00A2E8))
            )
        }
         //Outside column inside parent Box
         Box(
              modifier = Modifier
                 .clip(CircleShape)
                 .background(color = Color(0xFFED1C24))
                 .size(80.dp) //your size for the circle
                 .align(Alignment.Center)
          )
      }
  }