Android Compose, clickable surface on top of buttons

Question

Is it possible to create full screen, clickable, transparent surface/box, that will overlap compose buttons and other composables. I want to keep buttons visible but unreachable for the user.

When I set them(buttons) as disabled, they turn to an unclickable area( on top of the clickable surface) that I can't have on the screen. Other composables, like Text,Box etc. act like they are "under" clickable surface.

@Composable
fun ShowAnswers(question: Question, onSurfaceClick: () -> Unit, questionsLeft: Int) {
    Surface(modifier = Modifier.clickable { onSurfaceClick() }) {
        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier.padding(8.dp)
        ) {
            Text(
                text = stringResource(id = R.string.questions_left, questionsLeft),
                fontSize = 24.sp
            )
            Spacer(modifier = Modifier.height(20.dp))
            QuestionCard(question = question)
            Spacer(modifier = Modifier.height(20.dp))
            ShowCorrectAnswer(question = question)
        }

    }
}

ShowCorrectAnswer(...) contains buttons that i need to "overlap"

Answer 1

You can use a simple transparent Box to overlay the Surface with the question.

Something like:

var isActive by remember { mutableStateOf(false) }

Box(modifier = Modifier.fillMaxSize()) {
    Surface() {
        Column() {
            
            //....
            QuestionCard(question = question)
            //....

            Button(onClick = { isActive = true }) {
                //...
            }
            
        }
    }
    if (isActive){
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Transparent)
                .clickable(
                    enabled=isActive,
                    interactionSource = interactionSource,
                    indication =  null)
                {
                    //do something
                }
        )
    }
}