BackdropScaffold in Jetpack

BackdropScaffold provides Api to put several components together to build the screen by ensuring proper layout strategy for them and collecting necessary data so that these components will work together.

BackdropScaffold uses some components/ parameters, in which below are the main.

backLayerContent – Back layer Content
Mainly used to show top content of the or main menu items.
frontLayerContent – Front Layer Content
Shows the content corresponding to the selected menu item of the back layer.
appBar – App bar for the back layer.
Can we use to show some menu options like cart and search.
To handle the visibility of the app when the back layer is revealed set “persistentAppBar” to false/true.
scaffoldState- The state of the scaffold.
It uses BackdropScaffoldState to manage the state.

@Composable
@ExperimentalMaterialApi
fun BackdropScaffold(
    appBar: @Composable () -> Unit,
    backLayerContent: @Composable () -> Unit,
    frontLayerContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    scaffoldState: BackdropScaffoldState = rememberBackdropScaffoldState(Concealed),
    gesturesEnabled: Boolean = true,
    peekHeight: Dp = BackdropScaffoldDefaults.PeekHeight,
    headerHeight: Dp = BackdropScaffoldDefaults.HeaderHeight,
    persistentAppBar: Boolean = true,
    stickyFrontLayer: Boolean = true,
    backLayerBackgroundColor: Color = MaterialTheme.colors.primary,
    backLayerContentColor: Color = contentColorFor(backLayerBackgroundColor),
    frontLayerShape: Shape = BackdropScaffoldDefaults.frontLayerShape,
    frontLayerElevation: Dp = BackdropScaffoldDefaults.FrontLayerElevation,
    frontLayerBackgroundColor: Color = MaterialTheme.colors.surface,
    frontLayerContentColor: Color = contentColorFor(frontLayerBackgroundColor),
    frontLayerScrimColor: Color = BackdropScaffoldDefaults.frontLayerScrimColor,
    snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) }
)

@Composable

@ExperimentalMaterialApi

fun BackdropScaffold(

appBar: @Composable () -> Unit,

backLayerContent: @Composable () -> Unit,

frontLayerContent: @Composable () -> Unit,

modifier: Modifier = Modifier,

scaffoldState: BackdropScaffoldState = rememberBackdropScaffoldState(Concealed),

gesturesEnabled: Boolean = true,

peekHeight: Dp = BackdropScaffoldDefaults.PeekHeight,

headerHeight: Dp = BackdropScaffoldDefaults.HeaderHeight,

persistentAppBar: Boolean = true,

stickyFrontLayer: Boolean = true,

backLayerBackgroundColor: Color = MaterialTheme.colors.primary,

backLayerContentColor: Color = contentColorFor(backLayerBackgroundColor),

frontLayerShape: Shape = BackdropScaffoldDefaults.frontLayerShape,

frontLayerElevation: Dp = BackdropScaffoldDefaults.FrontLayerElevation,

frontLayerBackgroundColor: Color = MaterialTheme.colors.surface,

frontLayerContentColor: Color = contentColorFor(frontLayerBackgroundColor),

frontLayerScrimColor: Color = BackdropScaffoldDefaults.frontLayerScrimColor,

snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) }

)

Example Of BackdropScaffold

Let’s take a simple example to show a backdrop with a back layer and a front layer.

class MainActivity : ComponentActivity() {
    @ExperimentalMaterialApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val scaffoldState = rememberBackdropScaffoldState(initialValue = BackdropValue.Concealed)
            val scope = rememberCoroutineScope()
            BackDropsampleTheme {

                BackdropScaffold(
                    scaffoldState = scaffoldState,
                    appBar =  {
                        TopAppBar(
                            title = { Text("Backdrop") },
                            navigationIcon = {
                                if (scaffoldState.isConcealed) {
                                    IconButton(
                                        onClick = {
                                            scope.launch { scaffoldState.reveal() }
                                        }
                                    ) {
                                        Icon(
                                            Icons.Default.Menu,
                                            contentDescription = "Menu"
                                        )
                                    }
                                } else {
                                    IconButton(
                                        onClick = {
                                            scope.launch { scaffoldState.conceal()}
                                        }
                                    ) {
                                        Icon(
                                            Icons.Default.Close,
                                            contentDescription = "Close"
                                        )
                                    }
                                }
                            },
                            elevation = 0.dp,
                            backgroundColor = Color.Transparent
                        )
                    },
backLayerContent = {
                   Column{
                       Text(text = "Menu Item 1", modifier = Modifier.padding(8.dp), color = Color.White,style = TextStyle(
                           fontWeight = FontWeight.Bold,
                           fontSize = 14.sp,
                           color = Color.Black
                       ))
                       Text(text = "Menu Item 1", modifier = Modifier.padding(8.dp), color = Color.White,style = TextStyle(
                           fontWeight = FontWeight.Bold,
                           fontSize = 14.sp,
                           color = Color.Black
                       ))
                     
                   }
},
                    frontLayerContent = {
                        Column(
                            Modifier.fillMaxSize(),
                             verticalArrangement =Arrangement.Center,
                         horizontalAlignment=Alignment.CenterHorizontally){
                            Text(text = "Front Layer",  textAlign = TextAlign.Center,color = Color.Black,style = TextStyle(
                                fontWeight = FontWeight.Bold,
                                fontSize = 14.sp,

                                ))
                        }

                    },
                  peekHeight = 60.dp,
                    

                ) {

                }
            }
        }
    }
}

class MainActivity : ComponentActivity() {

@ExperimentalMaterialApi

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContent {

val scaffoldState = rememberBackdropScaffoldState(initialValue = BackdropValue.Concealed)

val scope = rememberCoroutineScope()

BackDropsampleTheme {

BackdropScaffold(

scaffoldState = scaffoldState,

appBar = {

TopAppBar(

title = { Text("Backdrop") },

navigationIcon = {

if (scaffoldState.isConcealed) {

IconButton(

onClick = {

scope.launch { scaffoldState.reveal() }

}

) {

Icon(

Icons.Default.Menu,

contentDescription = "Menu"

)

}

} else {

IconButton(

onClick = {

scope.launch { scaffoldState.conceal()}

}

) {

Icon(

Icons.Default.Close,

contentDescription = "Close"

)

}

elevation = 0.dp,

backgroundColor = Color.Transparent

)

backLayerContent = {

Column{

Text(text = "Menu Item 1", modifier = Modifier.padding(8.dp), color = Color.White,style = TextStyle(

fontWeight = FontWeight.Bold,

fontSize = 14.sp,

color = Color.Black

))

Text(text = "Menu Item 1", modifier = Modifier.padding(8.dp), color = Color.White,style = TextStyle(

fontWeight = FontWeight.Bold,

fontSize = 14.sp,

color = Color.Black

))

}

frontLayerContent = {

Column(

Modifier.fillMaxSize(),

verticalArrangement =Arrangement.Center,

horizontalAlignment=Alignment.CenterHorizontally){

Text(text = "Front Layer", textAlign = TextAlign.Center,color = Color.Black,style = TextStyle(

fontWeight = FontWeight.Bold,

fontSize = 14.sp,

))

}

peekHeight = 60.dp,

) {

}

Use scaffoldState.reveal() and scaffoldState.conceal() to show or hide back layer on alick event.

Result :

Conclusion:

In this blog, you have learned about the BackdropScaffold in Jetpack.

Pankaj Tyagi 28 February 2022

. . .

BackdropScaffold in Jetpack

Example Of BackdropScaffold

Result :

Conclusion:

Leave a Comment Cancel Reply

Message Sent!