BottomSheetPager.kt

package des.c5inco.experiments

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.KeyboardArrowRight
import androidx.compose.material.icons.filled.Lock
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.HorizontalPager
import com.google.accompanist.pager.calculateCurrentOffsetForPage
import com.google.accompanist.pager.rememberPagerState
import kotlinx.coroutines.launch
import kotlin.math.absoluteValue

@OptIn(ExperimentalPagerApi::class)
@Preview
@Composable
fun BottomSheetDemo() {
    val pagerState = rememberPagerState()
    val scope = rememberCoroutineScope()
    var progress by remember { mutableStateOf(0f) }

    MaterialTheme {
        Surface {
            Box(Modifier.fillMaxSize()) {
                Box(
                    Modifier
                        .background(Color.Black.copy(alpha = 0.6f))
                        .fillMaxSize()
                )

                Box(Modifier.align(Alignment.BottomCenter)) {
                    HorizontalPager(
                        modifier = Modifier.background(Color.White, RoundedCornerShape(topStart = 32.dp, topEnd = 32.dp)),
                        count = 2,
                        state = pagerState
                    ) { page ->
                        progress = calculateCurrentOffsetForPage(0).absoluteValue

                        Box(
                            Modifier
                                .height(360.dp + 120.dp * progress)
                                .fillMaxWidth()
                                .padding(start = 20.dp, end = 20.dp, top = 32.dp)
                        ) {
                            if (page == 0) {
                                Column {
                                    Text(
                                        text = "Find local community events",
                                        fontSize = 42.sp,
                                        fontWeight = FontWeight.SemiBold,
                                        letterSpacing = (-0.4).sp
                                    )
                                    Spacer(Modifier.height(8.dp))
                                    Text(
                                        text = "Get involved with what's happening near you.",
                                        fontSize = 20.sp,
                                        modifier = Modifier.alpha(0.7f)
                                    )
                                }
                            } else {
                                Column(
                                    Modifier.fillMaxHeight()
                                ) {
                                    var emailValue by remember { mutableStateOf("") }
                                    var passwordValue by remember { mutableStateOf("") }

                                    Text(
                                        text = "Create an account",
                                        fontSize = 24.sp,
                                        fontWeight = FontWeight.SemiBold
                                    )
                                    Spacer(Modifier.height(16.dp))
                                    TextField(value = emailValue,
                                        onValueChange = { emailValue = it },
                                        placeholder = { Text("Email address") },
                                        trailingIcon = {
                                            Icon(Icons.Default.Email, null)
                                        },
                                        colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.Transparent),
                                        modifier = Modifier.fillMaxWidth()
                                    )
                                    Spacer(Modifier.height(16.dp))
                                    TextField(
                                        value = passwordValue,
                                        onValueChange = { passwordValue = it },
                                        placeholder = { Text("Password") },
                                        visualTransformation = PasswordVisualTransformation(),
                                        trailingIcon = {
                                            Icon(Icons.Default.Lock, null)
                                        },
                                        colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.Transparent),
                                        modifier = Modifier.fillMaxWidth()
                                    )
                                    Spacer(Modifier.weight(1f))
                                    Text(
                                        text = "Already have an account? Sign in",
                                        style = MaterialTheme.typography.body2,
                                        modifier = Modifier.alpha(0.7f).padding(bottom = 20.dp)
                                    )
                                }
                            }
                        }
                    }
                    Row(
                        modifier = Modifier
                            .align(Alignment.BottomEnd)
                            .offset(x = (-20).dp, y = (-32 - 148 * progress).dp)
                            .clip(RoundedCornerShape(100))
                            .background(
                                brush = Brush.linearGradient(
                                    0.4f to Color(0xffdf7058),
                                    0.85f to Color(0xff802a8d),
                                    start = Offset(0f, Float.POSITIVE_INFINITY),
                                    end = Offset(Float.POSITIVE_INFINITY, 0f)
                                ),
                            )
                            .clickable {
                                scope.launch { pagerState.animateScrollToPage(if (pagerState.currentPage == 0) 1 else 0) }
                            }
                            .padding(24.dp)
                            .width((116 + 32 * progress).dp),
                        horizontalArrangement = Arrangement.SpaceBetween,
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Box(
                            Modifier.offset(y = -1.dp)
                        ) {
                            Text("Create account", Modifier.alpha(progress), Color.White)
                            Text("Get started", Modifier.alpha(1 - progress), Color.White)
                        }
                        Icon(
                            imageVector = Icons.Default.KeyboardArrowRight,
                            contentDescription = null,
                            modifier = Modifier.requiredSize(24.dp),
                            tint = Color.White
                        )
                    }
                }
            }
        }
    }
}