How to display content over topBar in Compose UI

Question

Hi I want to achieve that the content should overlap the topbar. In XML I was using elevation and negative padding and it worked fine. I am struggling to do this in Compose UI.

What I have so far.

Scaffold(topBar = {
    LargeTopAppBar(
        colors = TopAppBarDefaults.largeTopAppBarColors(
            containerColor = Color.Blue,
            titleContentColor = Color.White
        ),
        title = {
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Text(
                    "Title here",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = spacedBy(8.dp),
                    modifier = Modifier.padding(10.dp)
                ) {
                    Icon(
                        modifier = Modifier.size(size = 16.dp),
                        painter = painterResource(R.drawable.ic_share_white),
                        contentDescription = stringResource(id = R.string.share)
                    )
                    Text(
                        stringResource(R.string.share),
                        maxLines = 1,
                        fontSize = 16.sp,
                        overflow = TextOverflow.Ellipsis
                    )
                }
            }
        },
        navigationIcon = {
            IconButton(onClick = { /* doSomething() */ }) {
                Image(
                    painter = painterResource(R.drawable.ic_back),
                    contentDescription = stringResource(id = R.string.back),
                    contentScale = ContentScale.Crop
                )
            }
        },
        actions = {
            IconButton(onClick = { /* doSomething() */ }) {
                Text(
                    text = "asd",
                    color = Color.White,
                    fontSize = 17.sp
                )
            }
        },
        scrollBehavior = scrollBehavior
    )
}, content = { padding ->
    var offset by remember { mutableStateOf(0f) }

    Box(
        modifier = Modifier
            .padding(padding)
            .fillMaxSize()
    ) {
        Column(
            verticalArrangement = Arrangement.SpaceEvenly,
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .fillMaxSize()
                .scrollable(
                    orientation = Orientation.Vertical,
                    state = rememberScrollableState { delta ->
                        offset += delta
                        delta
                    }
                )
                .padding(16.dp)
        ) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .shadow(
                        elevation = dimensionResource(
                            id = R.dimen.card_background_elevation
                        )
                    )
                    .background(
                        color = Color.White,
                        shape = RoundedCornerShape(size = 12.dp)
                    )
                    .padding(
                        all = dimensionResource(
                            id = R.dimen.card_background_top_margin
                        )
                    ),

            ){
                Text(text = "Hello World")
            }

        }
    }
})

What I want (the screenshot is different than the code)

Answer 1

Add zIndex for drawing Box over LargeTopAppBar and use Modifier.offset to change position of your Box as

modifier = Modifier
    .zIndex(10f)
    .offset(x= 0.dp, y = (-50).dp)