I'm struggling with making the lazy column scroll into the top bar. In the lazy column, I have two items: an image and a list of cards with some information. I need the list of cards to be hidden in the top bar when I scroll the lazy column.
Current result
Expected result
Scaffold(
topBar = {
CenterAlignedTopAppBar(
modifier = Modifier
.background(Color.Transparent),
title = {
Image(
painter = painterResource(id = R.drawable.ic_logo),
contentDescription = ""
)
},
navigationIcon = {
Row(horizontalArrangement = Arrangement.SpaceBetween) {
IconButton(
onClick = {
navController.navigate(Screen.Account.route)
}
) {
Icon(
painterResource(id = R.drawable.ic_settings),
"backIcon",
tint = Color.White
)
}
IconButton(
onClick = {
navController.navigate(Screen.Staking.route)
}
) {
Icon(
painterResource(id = R.drawable.ic_staking),
"",
tint = Color.White
)
}
}
},
actions = {
IconButton(
onClick = {
navController.navigate(Screen.Swap.route)
}
) {
Icon(
painterResource(id = R.drawable.ic_swap),
"",
tint = Color.White
)
}
IconButton(
onClick = {
navController.navigate(Screen.Assets.route)
}
) {
Icon(
painterResource(id = R.drawable.ic_asserts),
"",
tint = Color.White
)
}
},
colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
containerColor = Color.Transparent
)
)
},
containerColor = Color(0xFF18192F),
modifier = Modifier
) { innerPadding ->
innerPadding
SwipeRefresh(
modifier = Modifier,
state = swipeRefreshState,
onRefresh = {
viewModel.onEvent(HomeEvent.Refresh)
}
) {
LazyColumn(
state = lazyListState,
modifier = Modifier
.fillMaxSize(),
// .align(Alignment.BottomCenter),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(10.dp),
contentPadding = PaddingValues(bottom = 16.dp)
) {
item(key = "header: 1") {
Box(
modifier = Modifier
.fillMaxWidth(),
contentAlignment = Alignment.Center
) {
GifImage(
modifier = Modifier
.fillMaxWidth()
.height(350.dp)
.align(Alignment.BottomCenter),
image = R.drawable.gif_home_edited,
contentScale = ContentScale.Crop
)
Column(modifier = Modifier.align(Alignment.Center)) {
var totalAmountUsd = remember {
0.0
}
if (state.error == null && !state.coin.isNullOrEmpty()) {
totalAmountUsd =
state.coin.sumOf { balance -> balance.balanceUsd ?: 0.0 }
}
Text(
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth(),
text = "$${"%.3f".format(totalAmountUsd, Locale.US)}",
color = Color.White,
textAlign = TextAlign.Center,
fontSize = 40.sp,
fontFamily = FontFamily(Font(R.font.circularstdbold)),
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(4.dp))
Text(
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth(),
text = "TOTAL BALANCE",
color = Color(0xFFDFE1F6),
textAlign = TextAlign.Center,
style = MaterialTheme.typography.labelSmall
)
}
Spacer(
Modifier
.fillMaxWidth()
.height(32.dp)
.background(
brush = Brush.verticalGradient(
colors = listOf(
Color.Transparent,
Color(0xFF18192E)
)
)
)
.align(Alignment.BottomCenter)
)
Text(
modifier = Modifier
.padding(vertical = 12.dp, horizontal = 20.dp)
.fillMaxWidth()
.align(Alignment.BottomCenter),
text = "WALLET",
color = Color(0xFFA9ADD9),
textAlign = TextAlign.Start,
style = MaterialTheme.typography.labelMedium
)
}
}
if (state.error == null) {
itemsIndexed(
items = state.coin,
key = { index, item -> if (index == 0) index else item.id }
) { index, item ->
CryptoCard(
modifier = Modifier
.padding(horizontal = 16.dp),
cryptoCardData = item,
navController = navController,
coinInfo = state.coinInfo,
isExpanded = index == expandedCardIndex
) {
expandedCardIndex = if (expandedCardIndex == index) {
-1
} else {
index
}
}
}
}
item {
AssetsExplorer(navController)
}
}
}
}
For reference, this is how the entire screen looks like: