Highlander
Reputation: 31
Can't comprehend how insets in Compose work. Why do I have this space here?
I am trying to learn about how Composables work, but it's very difficult when one example I see implementing something I have works, and what I have has the audacity of not listening to me. This is basically my Composable function, where I have a Scaffold, a Column that holds an Image and a Surface which is basically the Registration form. Now if you look at the image, android has a space for gesture navigation, that is solely for the purpose of interpreting the gesture for the system to manage. I enabled edge-to-edge in the activity class, i have the activity attribute of softInputMode set to "adjustResize" and I can't seem to find why that space is being drawn out, I removed every .imePadding() from all modifiers, yet that space is still there. I may be dumb and not see a solution and I'm hoping someone shines light on my dumb brain.
@Composable
fun RegisterScreen(
viewModel: RegisterCredentialsViewModel
){
Shapes.setStatusBar()
val snackbarHostState = remember { SnackbarHostState() }
val isEnabledInternet by viewModel.isEnabledInternet.observeAsState(null)
val isEnabledRegister by viewModel.isEnabledRegister.observeAsState(null)
val registerResult by viewModel.registerFormResult.observeAsState(null)
LaunchedEffect(registerResult) {
registerResult?.let {
if (it.show) { // Only show Snackbar for error messages
snackbarHostState.showSnackbar(
message = it.message,
withDismissAction = registerResult!!.withDismissAction,
duration = registerResult!!.duration
)
it.show = false
}
}
}
Scaffold(
modifier = Modifier
.fillMaxSize(),
containerColor = hearty_theme_light_primary,
snackbarHost = {
SnackbarHost(
hostState = snackbarHostState
) { data ->
Snackbar(
snackbarData = data,
containerColor = registerResult!!.color
)
}
}
) {
Column (modifier = Modifier.padding(it)){
Image(
painter = painterResource(
when (isEnabledInternet!!) {
true -> R.drawable.img_signup_art
else -> R.drawable.no_internet
}
),
contentDescription = "Register greet art",
modifier = Modifier
.fillMaxWidth()
.padding(all = 15.dp)
.weight(.3f)
)
Surface(
shape = RoundedCornerShape(
topStart = 25.dp,
topEnd = 25.dp
),
modifier = Modifier
.fillMaxWidth()
.weight(.7f)
) {
Column(
modifier = Modifier
// .verticalScroll(rememberScrollState())
// .imePadding()
.padding(horizontal = 25.dp)
.padding(top = 25.dp),
verticalArrangement = Arrangement.SpaceBetween
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(top = 10.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
var user by rememberSaveable { mutableStateOf("") }
var pass by rememberSaveable { mutableStateOf("") }
var repass by rememberSaveable { mutableStateOf("") }
var email by rememberSaveable { mutableStateOf("") }
val acceptedRegex = Regex("[\\w*.,<>?!'\"\\|/-=+@#$%^&()\\[\\]{}]*")
OutlinedTextField(
modifier = Modifier
.fillMaxWidth(),
value = user,
onValueChange = { newText ->
run {
if (newText.matches(acceptedRegex) && newText.length <= 32) {
user = newText
viewModel.updateField(
CredentialsField.USERNAME,
user
)
}
}
},
placeholder = { Text("...", color = Color(0x55002200)) },
textStyle = TextStyle(
fontSize = 16.sp
),
label = { Text(stringResource(R.string.formRegisterUsername)) },
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Ascii,
imeAction = ImeAction.Next
),
colors = TextFieldDefaults.colors(
focusedLabelColor = hearty_theme_light_primary,
unfocusedLabelColor = hearty_theme_light_primary,
focusedIndicatorColor = hearty_theme_light_primary,
focusedContainerColor = Color.White,
unfocusedContainerColor = Color.White
),
singleLine = true
)
TextFieldSupportMaxLength(
Modifier.fillMaxWidth(),
textFieldValue = user,
maxLength = 32
)
OutlinedTextField(
modifier = Modifier.fillMaxWidth(),
value = pass,
onValueChange = { newText ->
run {
if (newText.matches(acceptedRegex) && newText.length <= 32) {
pass = newText
viewModel.updateField(
CredentialsField.PASSWORD,
pass
)
}
}
},
placeholder = { Text("***", color = Color(0x55002200)) },
textStyle = TextStyle(
fontSize = 16.sp
),
label = { Text(stringResource(R.string.formRegisterPassword)) },
visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Password,
imeAction = ImeAction.Next
),
colors = TextFieldDefaults.colors(
focusedLabelColor = hearty_theme_light_primary,
unfocusedLabelColor = hearty_theme_light_primary,
focusedIndicatorColor = hearty_theme_light_primary,
focusedContainerColor = Color.White,
unfocusedContainerColor = Color.White
),
singleLine = true
)
TextFieldSupportMaxLength(
Modifier.fillMaxWidth(),
textFieldValue = pass,
maxLength = 32
)
OutlinedTextField(
modifier = Modifier
.fillMaxWidth(),
value = repass,
onValueChange = { newText ->
run {
if (newText.matches(acceptedRegex) && newText.length <= 32) {
repass = newText
viewModel.updateField(
CredentialsField.REPASSWORD,
repass
)
}
}
},
placeholder = { Text("***", color = Color(0x55002200)) },
textStyle = TextStyle(
fontSize = 16.sp
),
label = { Text(stringResource(R.string.formRegisterRepeatPassword)) },
visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Password,
imeAction = ImeAction.Next
),
colors = TextFieldDefaults.colors(
focusedLabelColor = hearty_theme_light_primary,
unfocusedLabelColor = hearty_theme_light_primary,
focusedIndicatorColor = hearty_theme_light_primary,
focusedContainerColor = Color.White,
unfocusedContainerColor = Color.White
),
singleLine = true
)
TextFieldSupportMaxLength(
Modifier.fillMaxWidth(),
textFieldValue = repass,
maxLength = 32
)
OutlinedTextField(
modifier = Modifier
.fillMaxWidth(),
value = email,
onValueChange = { newText ->
run {
if (newText.matches(acceptedRegex) && newText.length <= 128) {
email = newText
viewModel.updateField(CredentialsField.EMAIL, email)
}
}
},
placeholder = { Text("***@***.com", color = Color(0x55002200)) },
textStyle = TextStyle(
fontSize = 16.sp
),
label = { Text(stringResource(R.string.formRegisterEmail)) },
visualTransformation = VisualTransformation.None,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Email
),
colors = TextFieldDefaults.colors(
focusedLabelColor = hearty_theme_light_primary,
unfocusedLabelColor = hearty_theme_light_primary,
focusedIndicatorColor = hearty_theme_light_primary,
focusedContainerColor = Color.White,
unfocusedContainerColor = Color.White
),
singleLine = true
)
TextFieldSupportMaxLength(
Modifier.fillMaxWidth().padding(bottom = 15.dp),
textFieldValue = email,
maxLength = 128
)
Button(
onClick = {
run {
viewModel.registerClick()
}
},
shape = RoundedCornerShape(12.dp),
modifier = Modifier
.fillMaxWidth(),
enabled = isEnabledRegister!!,
colors = ButtonColors(
containerColor = hearty_theme_light_primary,
contentColor = hearty_theme_light_onPrimary,
disabledContainerColor = hearty_theme_light_primary.copy(alpha = 0.5f),
disabledContentColor = hearty_theme_light_onPrimary.copy(alpha = 0.5f)
),
contentPadding = PaddingValues(vertical = 15.dp),
content = {
Text(
text = stringResource(R.string.buttonRegister).uppercase(),
color = Color.White,
fontSize = 20.sp,
fontWeight = FontWeight.ExtraBold
)
})
}
Row(
modifier = Modifier
.fillMaxWidth()
.padding(top = 15.dp, bottom = 15.dp),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = stringResource(R.string.formRegisterToLogin),
color = Color.Black,
fontSize = 16.sp,
fontWeight = FontWeight.Normal
)
TextButton(
onClick = { viewModel.isReadyForLoginActivity.value = true },
contentPadding = PaddingValues(5.dp),
enabled = isEnabledRegister!!,
content = {
Text(
text = stringResource(R.string.buttonLogin).uppercase(),
color = hearty_theme_light_primary,
fontSize = 16.sp,
fontWeight = FontWeight.ExtraBold,
fontStyle = FontStyle.Italic
)
}
)
}
}
}
}
}
}
I tried adding stuff like .imePadding() to every composable piece, Column, Surface, but to no avail. It added more space, on top of the already existing one, and I think I'm going insane.
Upvotes: 3
Views: 247
Answers (1)
Abdo21
Reputation: 1527
Because you apply the inset provided by Scaffold to your composable. It adds padding to the top and bottom of your composable content.
Scaffold(
modifier = Modifier
.fillMaxSize(),
containerColor = hearty_theme_light_primary,
snackbarHost = {
SnackbarHost(
hostState = snackbarHostState
) { data ->
Snackbar(
snackbarData = data,
containerColor = registerResult!!.color
)
}
}
) {
Column(modifier = Modifier.padding(it)){} // HERE !!!!
}
If you want to control which side you want to apply the inset to, you can apply it only to a specific side by using the named parameter of the padding modifier (top, bottom, ...)
Here is an example where i apply the insets only to the top, so the bottom padding you see will be removed:
Scaffold(
modifier = Modifier
.fillMaxSize(),
containerColor = hearty_theme_light_primary,
snackbarHost = {
SnackbarHost(
hostState = snackbarHostState
) { data ->
Snackbar(
snackbarData = data,
containerColor = registerResult!!.color
)
}
}
) {
Column(modifier = Modifier.padding(top = it.calculateTopPadding())){}
}
Upvotes: 2
Related Questions
- Why scroll doesn't work in Column? (jetpack compose)
- How to have Image zoom in Jetpack compose?
- Can't get Android Jetpack Compose BackHandler to work
- android studio bumblebee Jetpack compose textfield error
- Why can't I get the same instance of class when I have used remember in Android Jetpack Compose?
- why this two items have different width in jetpack compose
- Why can't toPx() work outside of Canvas in Jetpack Compose?
- Why onboarding button not work in jetpack compose?
- Why BasicTextField (in compose) doesn't work well?