Can't get Android Jetpack Compose BackHandler to work

Question

I am trying to use Android Jetpack Compose's BackHandler to intercept the handling of the back button using following reduced code:

package com.example.backhandlertest

import androidx.activity.compose.BackHandler
import androidx.annotation.StringRes
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController


@Composable
fun BackHandlerTestApp(
    navController: NavHostController = rememberNavController()
) {
    val backStackEntry by navController.currentBackStackEntryAsState()
    val route = backStackEntry?.destination?.route
    val currentScreenTitle = if (route != null) {
        stringResource(BackHandlerTestScreen.valueOf(route).title)
    } else {
        "*"
    }
    val canNavigateBack = navController.previousBackStackEntry != null

    Scaffold(
        topBar = {
            BackHandlerTestAppBar(
                title = currentScreenTitle,
                canNavigateBack = canNavigateBack,
                navigateUp = {
                    navController.navigateUp()
                }
            )
        }
    ) { innerPadding ->
        NavHost(
            navController = navController,
            startDestination = BackHandlerTestScreen.Home.name,
            modifier = Modifier.padding(innerPadding)
        ) {
            composable(route = BackHandlerTestScreen.Home.name) {
                HomeScreen(
                    onClick = {
                        navController.navigate(BackHandlerTestScreen.BackButtonClickCounter.name)
                    }
                )
            }
            composable(route = BackHandlerTestScreen.BackButtonClickCounter.name) {
                BackButtonClickCounterScreen()
            }
        }
    }
}

enum class BackHandlerTestScreen(@StringRes val title: Int) {
    Home(title = R.string.app_name),
    BackButtonClickCounter(title = R.string.back_button_click_counter_title),
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BackHandlerTestAppBar(
    title: String,
    canNavigateBack: Boolean,
    navigateUp: () -> Unit,
    modifier: Modifier = Modifier
) {
    TopAppBar(
        title = {
            Text(title)
        },
        colors = TopAppBarDefaults.mediumTopAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer
        ),
        modifier = modifier,
        navigationIcon = {
            if (canNavigateBack) {
                IconButton(onClick = navigateUp) {
                    Icon(
                        imageVector = Icons.Filled.ArrowBack,
                        contentDescription = stringResource(R.string.back_button)
                    )
                }
            }
        }
    )
}

@Composable
fun HomeScreen(
    onClick: () -> Unit,
) {
    Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(stringResource(id = R.string.app_name))
            Button(onClick = { onClick() }) {
                Text(text = stringResource(id = R.string.back_click_counter))
            }
        }

    }
}

@Composable
fun BackButtonClickCounterScreen() {
    var backButtonClickCounter by remember { mutableIntStateOf(0) }

    BackHandler {
        backButtonClickCounter++
    }

    Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = stringResource(id = R.string.back_clicks_counted))
            Text(text = backButtonClickCounter.toString())
        }
    }
}

I am on Android 9 (API level 28) (which is the lowest API level we need to support, but I also tried API level 33 in the emulator) and it seems that my BackHandler is never invoked. Am I doing something wrong or did I find a bug in Jetpack Compose?

Kind regards,

Lars

P.S.: I am aware of Jetpack Compose BackHandler doesn't trigger on my Android 9 phone

Answer 1

Not exactly sure about that library, but usually the AndroidManifest.xml needs to indicate that with a property of <application/>. That's called: support for the predictive back gesture.

android:enableOnBackInvokedCallback="true"

Answer 2

I wasn't able to reproduce issue with the code you provided. The devices I tested is Samsung S24+, API 34 emulator, API 28 emulator.

Previous versions of Jetpack Navigation seem to have some issues with BackHandler, so check if you are using latest version of it. The version I used is 2.7.7.