Created
May 9, 2022 03:16
-
-
Save c5inco/6e86f7acbb3260768695d20baf1284d6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
) | |
} | |
} | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment