How to use Jetpack compose app bar backbutton

Question

getActionBar().setDisplayHomeAsUpEnabled(true) this i was using for normal android appCp,pact activity to switch between two or more activity.can any one tell me how to do this in jetpack Compose ?

Answer 1

The other answer is correct for showing the back button. This is a slight alternative that uses TopAppBar composable instead.

I also ran into a similar issue. The main thing I wanted to solve was hiding the back button when you are at the root or if there is nothing left in backstack, since setDisplayHomeAsUpEnabled took care of that as long as you specified your parent.
Assuming you are using the nav controller with compose, you can do something like this

val navController = rememberNavController()
Scaffold(
    topBar = {
        TopAppBar(
            title = { Text(text = "app bar title") },
            navigationIcon = if (navController.previousBackStackEntry != null) {
                {
                    IconButton(onClick = { navController.navigateUp() }) {
                        Icon(
                            imageVector = Icons.Filled.ArrowBack,
                            contentDescription = "Back"
                        )
                    }
                }
            } else {
                null
            }

        )
    },
    content = {
        // Body content
    }
)

The key here is to set navigationIcon argument of TopAppBar to null when there is nothing in the back stack. This way the back arrow will be hidden when you are at the root and shown otherwise.

Answer 2

You can wrap your main content inside an Scaffold composable and use the topBar to add the back button and handle back action like this:

 import androidx.compose.material.Scaffold
 .
 .

 Scaffold(
      topBar = {
           Row {
               Icon(
               imageVector = Icons.Filled.ArrowBack,
               contentDescription = "Back",
               modifier = Modifier
                         .padding(16.dp)
                         .clickable {
                            // Implement back action here
                          }
                   )
              }
          }
    ) {
       BodyContent()
    }

Answer 3

Both other solutions are fine and helped me refine my own variation that I have to extract because of usage on many screens.

@Composable
fun MyScaffold(@StringRes titleId: Int, upAvailable: Boolean, onUpClicked: () -> Unit, content: @Composable (PaddingValues) -> Unit) {
    Scaffold(
        topBar = {
            TopAppBar(title = { MyText(textId = titleId) }, backgroundColor = Color.Black, navigationIcon = {
                if (upAvailable) {
                    IconButton(onClick = { onUpClicked() }) {
                        Icon(imageVector = Icons.Filled.ArrowBack, contentDescription = "Back", tint = Color.White)
                    }
                }
            })
        },
        backgroundColor = Color.Transparent,
        content = content
    )
}

Where MyText is just my variant that accepts string res and has white text color.

Usage:

val isUpAvailable by viewModel.upAvailable.collectAsState()

MyScaffold(titleId = R.string.title, upAvailable = isUpAvailable, onUpClicked = { viewModel.navigateUp() }) {
 // Content
}

Then my BaseViewModel provides upAvailable and navigateUp() via navigationManager dependency which handles navigation via navigationController:

if (destination.route == NAVIGATE_UP) { navController.navigateUp() }


...

// set on every navigation
navigationManager.setUpAvailable(navController.previousBackStackEntry != null)