I’m building a custom Nav Bar that uses a custom c...

# compose-android

[Jonathan]

I’m building a custom Nav Bar that uses a custom custom shape to indicate the selected item. The custom shape “extends” beyond the bounds of the Layout. I’m able to achieve the desired effect by applying the shape directly using the background(…) Modifier (first image). Since this “selector” shape needs to be animated between selected items, I’m inclined to believe I need to use the graphicsLayer Modifier and pass in my animating shape; but when doing this, it clips the “extended” shape to the bounding rectangle of my Layout composable (second image).
None working modifier:

.graphicsLayer {
    clip = true
    shape = bgShape.value
}

vs. working modifier:

.background(backgroundColor, shape = bgShape.value)

I did try setting clip to false but that causes the shape to not be clipped also resulting in a rectangle like the second image. Also as an aside, I’m able to achieve what I need if I “inset” the selector shape into the “bounds” of the Layout Composable but this makes it a messier solution since the selected option is within the “bounds” of my Nav Bar thus requiring special handing so it’s content is vertically centered; it would be easier if I can get the “selected” shape to draw outside the Layouts bounding rectangle. Since I’m able to get this to work with .background(…, shape = bgShape) it should be possible with graphicLayer {} , right? If the background modifier is efficient for animating, and I need not worry about graphicLayer please let me know.