API tools faq
paste
Advertisement
SECT19N

Jetpack Compose Sign-Up Report

SECT19N
Feb 17th, 2025
545
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Kotlin 6.15 KB | Source Code | 0 0
raw download clone embed print report
  1. import android.os.Bundle
  2. import android.widget.Toast
  3. import androidx.activity.ComponentActivity
  4. import androidx.activity.compose.setContent
  5. import androidx.compose.foundation.layout.*
  6. import androidx.compose.foundation.text.KeyboardOptions
  7. import androidx.compose.material3.*
  8. import androidx.compose.runtime.Composable
  9. import androidx.compose.runtime.*
  10. import androidx.compose.ui.Alignment
  11. import androidx.compose.ui.Modifier
  12. import androidx.compose.ui.platform.LocalContext
  13. import androidx.compose.ui.res.painterResource
  14. import androidx.compose.ui.text.input.KeyboardType
  15. import androidx.compose.ui.text.input.PasswordVisualTransformation
  16. import androidx.compose.ui.text.input.VisualTransformation
  17. import androidx.compose.ui.unit.*
  18. import edu.example.lecture.ui.theme.LectureTheme
  19.  
  20. class MainActivity : ComponentActivity() {
  21.     override fun onCreate(savedInstanceState: Bundle?) {
  22.         super.onCreate(savedInstanceState)
  23.         setContent {
  24.             LectureTheme {
  25.                 Surface {
  26.                     SignUpScreen()
  27.                 }
  28.             }
  29.         }
  30.     }
  31. }
  32.  
  33. @Composable
  34. fun SignUpScreen() {
  35.     var username by remember { mutableStateOf("") }
  36.     var email by remember { mutableStateOf("") }
  37.     var password by remember { mutableStateOf("") }
  38.     var confirmPassword by remember { mutableStateOf("") }
  39.     var passwordVisible by remember { mutableStateOf(false) }
  40.     var confirmPasswordVisible by remember { mutableStateOf(false) }
  41.  
  42.     val context = LocalContext.current
  43.  
  44.     Column(
  45.         modifier = Modifier
  46.             .fillMaxSize()
  47.             .padding(24.dp),
  48.         horizontalAlignment = Alignment.CenterHorizontally
  49.     ) {
  50.         Spacer(modifier = Modifier.height(48.dp))
  51.  
  52.         // Title
  53.         Text(
  54.             text = "Sign Up",
  55.             fontSize = 24.sp,
  56.             style = MaterialTheme.typography.headlineLarge,
  57.             color = MaterialTheme.colorScheme.primary,
  58.             modifier = Modifier.padding(bottom = 32.dp),
  59.         )
  60.  
  61.         // Input Fields
  62.         OutlinedTextField(
  63.             value = username,
  64.             onValueChange = { username = it },
  65.             label = { Text("Username") },
  66.             modifier = Modifier.fillMaxWidth()
  67.         )
  68.  
  69.         Spacer(modifier = Modifier.height(16.dp))
  70.  
  71.         OutlinedTextField(
  72.             value = email,
  73.             onValueChange = { email = it },
  74.             label = { Text("Email") },
  75.             keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email),
  76.             modifier = Modifier.fillMaxWidth()
  77.         )
  78.  
  79.         Spacer(modifier = Modifier.height(16.dp))
  80.  
  81.         OutlinedTextField(
  82.             value = password,
  83.             onValueChange = { password = it },
  84.             label = { Text("Password") },
  85.             visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
  86.             trailingIcon = {
  87.                 TextButton(
  88.                     onClick = { passwordVisible = !passwordVisible },
  89.                     contentPadding = PaddingValues(horizontal = 8.dp)
  90.                 ) {
  91.                     Text(
  92.                         text = if (passwordVisible) "Hide" else "Show",
  93.                         style = MaterialTheme.typography.bodyMedium
  94.                     )
  95.                 }
  96.             },
  97.             modifier = Modifier.fillMaxWidth()
  98.         )
  99.  
  100.         Spacer(modifier = Modifier.height(16.dp))
  101.  
  102.         OutlinedTextField(
  103.             value = confirmPassword,
  104.             onValueChange = { confirmPassword = it },
  105.             label = { Text("Confirm Password") },
  106.             visualTransformation = if (confirmPasswordVisible) VisualTransformation.None else PasswordVisualTransformation(),
  107.             trailingIcon = {
  108.                 TextButton(
  109.                     onClick = { confirmPasswordVisible = !confirmPasswordVisible },
  110.                     contentPadding = PaddingValues(horizontal = 8.dp)
  111.                 ) {
  112.                     Text(
  113.                         text = if (confirmPasswordVisible) "Hide" else "Show",
  114.                         style = MaterialTheme.typography.bodyMedium
  115.                     )
  116.                 }
  117.             },
  118.             modifier = Modifier.fillMaxWidth()
  119.         )
  120.  
  121.         Spacer(modifier = Modifier.height(32.dp))
  122.  
  123.         // Sign Up Button
  124.         Button(
  125.             onClick = {
  126.                 Toast.makeText(context, "Not Implemented", Toast.LENGTH_SHORT).show()
  127.             },
  128.             modifier = Modifier.fillMaxWidth()
  129.         ) {
  130.             Text("Sign Up")
  131.         }
  132.  
  133.         Spacer(modifier = Modifier.height(24.dp))
  134.  
  135.         // "or with" divider
  136.         Row(
  137.             verticalAlignment = Alignment.CenterVertically,
  138.             modifier = Modifier.fillMaxWidth()
  139.         ) {
  140.             HorizontalDivider(modifier = Modifier.weight(1f))
  141.             Text(
  142.                 text = "or with",
  143.                 modifier = Modifier.padding(horizontal = 50.dp),
  144.             )
  145.             HorizontalDivider(modifier = Modifier.weight(1f))
  146.         }
  147.  
  148.         Spacer(modifier = Modifier.height(24.dp))
  149.  
  150.         Row(
  151.             horizontalArrangement = Arrangement.spacedBy(24.dp),
  152.             modifier = Modifier.padding(bottom = 24.dp)
  153.         ) {
  154.             // Social login buttons here
  155.             SocialIcons(R.drawable.ic_google, "Google")
  156.             SocialIcons(R.drawable.ic_facebook, "Facebook")
  157.             SocialIcons(R.drawable.ic_x, "Twitter")
  158.         }
  159.  
  160.         Row(
  161.             modifier = Modifier.padding(top = 8.dp),
  162.             verticalAlignment = Alignment.CenterVertically
  163.         ) {
  164.             Text("Already have an account? ")
  165.             TextButton(
  166.                 onClick = {
  167.                     Toast.makeText(context, "Not Implemented", Toast.LENGTH_SHORT).show()
  168.                 }
  169.             ) {
  170.                 Text("Sign In")
  171.             }
  172.         }
  173.     }
  174. }
  175.  
  176. @Composable
  177. fun SocialIcons(icon: Int, description: String) {
  178.     Icon(
  179.         painter = painterResource(id = icon),
  180.         contentDescription = description,
  181.         modifier = Modifier.size(32.dp),
  182.         tint = MaterialTheme.colorScheme.primary
  183.     )
  184. }
Tags: Kotling
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!