Make image go outside of boundaries in Jetpack Compose

Question

I`m new to compose and am trying to use an Image() composable with this specifics:

The Image needs to have more height and width than it`s parent but from a fixed offset (the green dot).

How can I achieve this design with jetpack compose?

Answer 1

Let's assume that your Sidebar is a Column, then the code would look like this:

Sidebar() {
  Column() { 
    TopSidebar() // top part of sidebar, but not fillMaxHeight

    Image(
      modifier = Modifier
        .wrapContentSize(unbound = true, align = Alignment.TopStart),
      ... rest of parameters
    )
  }
}

The key things are unbound = true and align. TopStart is your case

I wrote more about it with examples here on Medium