MainActivity.kt
package com.cfsuman.jetpackcompose
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.Color
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Phone
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch
class MainActivity : AppCompatActivity() {
override fun onCreate(savedObjectState: Bundle?) {
super.onCreate(savedObjectState)
setContent {
GetScaffold()
}
}
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun GetScaffold(){
val backdropScaffoldState = rememberBackdropScaffoldState(
initialValue = BackdropValue.Concealed)
val selectedIcon = remember {
mutableStateOf(Icons.Filled.Favorite)}
BackdropScaffold(
scaffoldState = backdropScaffoldState,
appBar = {
TopAppBar(
title = { Text(
text = "Compose - Backdrop Scaffold"
)},
backgroundColor = Color(0xFF1ca9c9),
)
},
backLayerContent = {BackLayerContent(
backdropScaffoldState, selectedIcon
)},
frontLayerContent = { FrontLayerContent(
backdropScaffoldState, selectedIcon) },
)
}
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun BackLayerContent(
backdropScaffoldState: BackdropScaffoldState,
selectedIcon: MutableState<ImageVector>
){
val scope = rememberCoroutineScope()
Box(
modifier = Modifier.background(Color(0xFF5D8AA8))
.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Column(
verticalArrangement = Arrangement.spacedBy(12.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
OutlinedButton(onClick = {
selectedIcon.value = Icons.Filled.Favorite
scope.launch {
backdropScaffoldState.conceal()
}
}) {
Icon(Icons.Filled.Favorite, "")
Text(text = "Favorite")
}
OutlinedButton(onClick = {
selectedIcon.value = Icons.Filled.Email
scope.launch {
backdropScaffoldState.conceal()
}
}) {
Icon(Icons.Filled.Email, "")
Text(text = "Email")
}
OutlinedButton(onClick = {
selectedIcon.value = Icons.Filled.Phone
scope.launch {
backdropScaffoldState.conceal()
}
}) {
Icon(Icons.Filled.Phone, "")
Text(text = "Phone")
}
}
}
}
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun FrontLayerContent(
backdropScaffoldState: BackdropScaffoldState,
selectedIcon: MutableState<ImageVector>
){
Box(
modifier = Modifier.background(Color(0xFF89CFF0))
.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(12.dp)
) {
Icon(
selectedIcon.value,
contentDescription = "",
Modifier.size(250.dp),
tint = Color(0xFF002147)
)
Text(text = "Front layer content")
}
}
}
}
- jetpack compose - Card padding
- jetpack compose - How to use ModalDrawer
- jetpack compose - TopAppBar actions
- jetpack compose - TopAppBar center title
- jetpack compose - Scaffold with Snackbar
- jetpack compose - Snackbar action
- jetpack compose - Scaffold Snackbar host
- jetpack compose - How to use AndroidView
- jetpack compose - How to use bottom navigation
- jetpack compose - How to use navigation controller
- jetpack compose - Navigation object argument
- jetpack compose - Room add remove update
- jetpack compose - How to use WebView
- jetpack compose - WebView ProgressIndicator
- jetpack compose - WebView progress percentage