Jetpack Compose Split view

SplitView.kt

@Preview(showSystemUi = true, showBackground = true)
@Composable
fun PrevSplitView() {
    MaterialTheme {
        Box(Modifier.fillMaxSize()) {
            SplitView(topView = {
                Box(
                    it
                        .background(Color.Yellow)
                )
            }, bottomView = {
                Box(
                    it
                        .background(Color.Red)
                )
            })
        }
    }
}


@Composable
fun SplitView(
    minHeightBottom: Dp = 100.dp,
    minHeightTop: Dp = 100.dp,
    topView: @Composable (Modifier) -> Unit,
    bottomView: @Composable (Modifier) -> Unit,
    initialTopHeightWeight: Float = 0.5f,
) {

    val density = LocalDensity.current

    BoxWithConstraints {

        val height = with(density) { constraints.maxHeight.toDp() }

        val maxPos = height - minHeightBottom

        var barPosition: Dp by remember { mutableStateOf(height * initialTopHeightWeight) }

        val barThickness = 15.dp
        val handleThickness = 12.dp
        val handleWidth = 50.dp
        val roundedCornerShape = 5.dp

        val background = Color(0xfff6f8fa)
        val border = Color(0xffe1e4e8)

        Box() {
            Column() {
                topView(
                    Modifier
                        .fillMaxWidth()
                        .height(barPosition)
                )
                Divider(
                    color = border,
                    thickness = 1.dp,
                    modifier = Modifier.shadow(elevation = 2.dp)
                )
                bottomView(
                    Modifier
                        .fillMaxWidth()
                        .height(height - barPosition - barThickness)
                )
            }

            Column(modifier = Modifier.align(Alignment.Center)) {
                Spacer(
                    modifier = Modifier.height(
                        barPosition - (barThickness / 2) + 2.dp
                    )
                )
                Box(
                    Modifier
                        .height(handleThickness)
                        .width(handleWidth)
                        .align(Alignment.CenterHorizontally)
                        .clip(RoundedCornerShape(roundedCornerShape))
                        .border(1.dp, border)
                        .shadow(5.dp)
                        .draggable(
                            orientation = Orientation.Vertical,
                            state = rememberDraggableState { delta ->
                                val shiftedPos = barPosition + with(density) { delta.toDp() }
                                barPosition = max(min(shiftedPos, maxPos), minHeightTop)
                            },
                            startDragImmediately = true,
                        )
                        .background(background),
                )

                Spacer(modifier = Modifier.fillMaxHeight())
            }
        }
    }
}