I developed a custom drawer that behave like a Top sheet. Everything is good but I try to Drag up the drawer, the animation is not smooth when drawer slide up (exit), Animation stuck for a second when slide up and then Card disappears. Following is my code for custom drawer in Jetpack compose.
var offsetX by remember { mutableFloatStateOf(0f) }
var offsetY by remember { mutableFloatStateOf(0f) }
var isDrawerVisible by remember { mutableStateOf(false) }
var direction by remember { mutableIntStateOf(-1) }
// ** Drawer **
AnimatedVisibility(
visible = isDrawerVisible,
enter = slideInVertically(),
exit = slideOutVertically()
) {
Box(
modifier = Modifier
.offset { IntOffset(0, offsetY.toInt()) }
.pointerInput(Unit) {
coroutineScope {
detectDragGestures(
onDragEnd = {
Timber.d("DRAG_DEBUG:: Drag End")
if (direction == 2) {
offsetY = 0f
isDrawerVisible = false
}
else if (direction == 1) {
offsetY = 0f
}
}
)
{ change, dragAmount ->
change.consume()
val (_, y) = dragAmount
when {
y > 0 -> {
direction = 1
}
y < 0 -> {
direction = 2
}
}
offsetX += dragAmount.x
if ((offsetY + dragAmount.y) <= 0) {
offsetY += dragAmount.y
}
}
}
}
.fillMaxWidth()
) {
Card(
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(bottomStart = 10.dp, bottomEnd = 10.dp),
colors = CardDefaults.cardColors(
containerColor = Color.White
),
elevation = CardDefaults.cardElevation(
defaultElevation = 5.dp
),
) {
Column (modifier = Modifier.padding(15.dp)) {
Row(verticalAlignment = Alignment.CenterVertically) {
Image(
modifier = Modifier.clickable { isDrawerVisible = false },
painter = painterResource(id = R.drawable.icon_drawer_close),
contentDescription = stringResource(id = R.string.text_close)
)
Spacer(modifier = Modifier.weight(1f))
Image(
modifier = Modifier.height(53.dp),
painter = painterResource(id = R.drawable.icon_drawer_logo),
contentDescription = stringResource(id = R.string.text_close),
contentScale = ContentScale.FillHeight
)
Spacer(modifier = Modifier.weight(1f))
Icon(
modifier = Modifier.size(50.dp),
imageVector = Icons.Default.Close, contentDescription = "",
tint = Color.White
)
}
Spacer(modifier = Modifier.height(10.dp))
LazyVerticalGrid(
columns = GridCells.Fixed(4)
) {
items(viewModel.getDrawerList(context)) {
Column(
modifier = Modifier.padding(top = 15.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Image(
painter = painterResource(id = it.icon),
contentDescription = ""
)
MyText(
modifier = Modifier.padding(top = 5.dp),
text = it.title,
fontSize = 13.sp
)
}
}
}
Spacer(modifier = Modifier.height(25.dp))
Image(
modifier = Modifier.fillMaxWidth().height(4.dp),
painter = painterResource(id = R.drawable.icon_drawer_bar),
contentDescription = "",
contentScale = ContentScale.FillHeight
)
}
}
}
}
and inside viewmodel the list code is:
fun getDrawerList(context: Context): List<DrawerModel> {
val drawerItemTitle = context.resources.getStringArray(R.array.drawer_menu_item)
return listOf(
DrawerModel(0, drawerItemTitle[0], R.drawable.icon_drawer_profile),
DrawerModel(1, drawerItemTitle[1], R.drawable.icon_drawer_payment),
DrawerModel(2, drawerItemTitle[2], R.drawable.icon_drawer_booking),
DrawerModel(3, drawerItemTitle[3], R.drawable.icon_drawer_history),
DrawerModel(4, drawerItemTitle[4], R.drawable.icon_drawer_setting),
DrawerModel(5, drawerItemTitle[5], R.drawable.icon_drawer_contact_us),
DrawerModel(6, drawerItemTitle[6], R.drawable.icon_drawer_referral),
DrawerModel(7, drawerItemTitle[7], R.drawable.icon_drawer_places)
)
}
and code for arrays.xml is:
<array name="drawer_menu_item">
<item>@string/text_profile</item>
<item>@string/text_payments</item>
<item>@string/bookings</item>
<item>@string/text_history</item>
<item>@string/text_settings</item>
<item>@string/support</item>
<item>@string/text_referral</item>
<item>@string/places</item>
</array>
Please suggest about how I get smooth the slide out (exit) animation. Following is the image of drawer:
