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"

Maybe this could help, https://stackoverflow.com/questions/69142209/jetpack-compose-how-to-disable-gesture-detection-on-children — z.g.y, Sep 30 '22 at 00:10

score 2 · Accepted Answer · answered Sep 30 '22 at 05:17

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
                }
        )
    }
}

Mateusz · Answer 2 · 2022-09-30T12:28:49.503

Adding a fillMaxSize Box inside the surface, after column, solved the problem. But placing the Box before Column makie it appear "under" it.

@Composable
fun ShowAnswers(question: Question, onSurfaceClick: () -> Unit, questionsLeft: Int) {
    Surface {
        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)
        }
        **Box(modifier = Modifier
            .fillMaxSize()
            .background(Color.Transparent)
            .clickable { onSurfaceClick() })**
    }
}

Android Compose, clickable surface on top of buttons

2 Answers2