I am trying to split the height of the screen 50:5...

# compose

[Vladimir]

I am trying to split the height of the screen 50:50, with CameraX taking up the upper half and the rest of the content the lower half. However, for some reason I cannot get it right, the lower content keeps expanding the camera Preview vertically down and overlaying it. What am I doing wrong here?

@Composable
fun QRScannerPreviewScreen() {
    val lensFacing = CameraSelector.LENS_FACING_BACK
    val context: Context = LocalContext.current
    val lifecycleOwner: LifecycleOwner = LocalLifecycleOwner.current
    val cameraController: LifecycleCameraController =
        remember { LifecycleCameraController(context) }

    cameraController.cameraSelector = CameraSelector.DEFAULT_BACK_CAMERA

    Scaffold(
        floatingActionButton = {
            FloatingActionButton(onClick = { }) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { paddingValues: PaddingValues ->
        Column(
        ) {
            Box(modifier = Modifier.weight(1f)) {
                AndroidView(
                    factory = {
                        PreviewView(it).apply {
                            this.controller = cameraController
                            cameraController.bindToLifecycle(lifecycleOwner)
                        }
                    },
                    modifier = Modifier.fillMaxSize().padding(paddingValues)
                )
            }
            Box(modifier = Modifier.weight(1f)) {
                Text("Other UI elements here", modifier = Modifier.padding(paddingValues))
            }
        }
    }
}

[ephemient]

https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope#(androidx.compose.ui.Modifier).matchParentSize()

[Zach Klippenstein (he/him) [MOD]]

In the future, please keep long code snippets to the thread

[Vladimir]

Sorry, what do you mean? I am not used to utilizing Slack or its posting etiquette, I only use it to learn about Kotlin

[Vladimir]

@ephemient I don't see how this helps my problem. The issue I am facing is that even though I have 2 separate elements in a Column, the camera view still bleeds into the 2 element and the "Other UI elements here" text appears on top of the Camera Preview

[Vladimir]

It is overlapping the camera preview here:

[Vladimir]

I had my suspicions it had something to do with AndroidView being used here, as no matter what I did the amount of space CameraX Preview Screen was allowed to cover always stayed the same.

I have found the following line on AndroidView docs:

> AndroidView will not clip its content to the layout bounds. Use View.setClipToOutline on the child View to clip the contents, if desired. Developers will likely want to do this with all subclasses of SurfaceView to keep its contents contained.
I thusly have done the following:

AndroidView(
        factory = {
            PreviewView(it).apply {
                this.controller = cameraController
                cameraController.bindToLifecycle(lifecycleOwner)
                clipToOutline = true
            }
        },
        modifier = modifier
    )

And it seems to have worked? I am not sure if this is the correct approach?

[Oliver.O]

Sorry, what do you mean? I am not used to utilizing Slack or its posting etiquette, I only use it to learn about Kotlin

Long content in a channel message means that navigating to the next message requires extra effort. Solution: Post only a small intro in the channel message, then send that, click on that message's 🧵 "Reply in thread" button, then post the long content in the thread message. Everyone is happy. It might even increase the chances of getting replies from people who know.

[Vladimir]

@Oliver.O thanks Oliver, next time I shall do as you say!