Develop Reference

Jetpack Compose - Cant wrap content textField

I am doing some things with Compose and i encountered this problem
I cant understand WHY my textfield width is to the end of the parent. I want to wrap the content dependening on the input lenght. I painted the background red on purpouse.
I cant hardcode a padding because if the lenght of the field is too much the text starts to go out sight
What i am doing wrong?
Row(Modifier.wrapContentSize()) {
ConstraintLayout(
Modifier
.wrapContentSize()
) {
val (text1, text2) = createRefs()
Text(
modifier = modifier
.wrapContentWidth()
.constrainAs(text1) {
end.linkTo(text2.start)
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
},
text = "$",
color = Color.White,
fontSize = sp_50,
fontFamily = FontFamily(
Font(R.font.mulish_bold)
),
textAlign = TextAlign.Center
)
TextField(
modifier = modifier
.wrapContentWidth()
.constrainAs(text2) {
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
start.linkTo(text1.end)
}.background(Color.Red),
visualTransformation = {
show = it.isNotEmpty()
val value =
if (it.isEmpty())
NUM_0
else it.text
val amountFormat: String = notFormatAmount(value).toStringThousandAmount()
TransformedText(
AnnotatedString(amountFormat.take(amountFormat.length)),
OffsetMapping.Identity
)
},
value = text,
onValueChange = {
text = it
if (onTextChange != null) {
onTextChange(
it.ifEmpty { NUM_0 }
)
}
},
colors = TextFieldDefaults.textFieldColors(
textColor = Color.White,
disabledTextColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent,
cursorColor = Color.Transparent
),
textStyle = TextStyle(
color = Color.White,
fontFamily = FontFamily(
Font(R.font.mulish_bold)
),
textAlign = TextAlign.Justify,
fontSize = sp_50
),
singleLine = true,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword)
)
}
}

Modified code:
Row(Modifier.wrapContentSize()) {
ConstraintLayout(
Modifier
.wrapContentSize()
) {
val (text1, text2) = createRefs()
Text(
modifier = modifier
.wrapContentWidth()
.constrainAs(text1) {
end.linkTo(text2.start)
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
},
text = "$",
color = Color.White,
fontSize = sp_50,
fontFamily = FontFamily(
Font(R.font.mulish_bold)
),
textAlign = TextAlign.Center
)
TextField(
modifier = modifier
.wrapContentWidth()
.constrainAs(text2) {
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
start.linkTo(text1.end)
width = Dimension.fillToConstraints
}.background(Color.Red),
visualTransformation = {
show = it.isNotEmpty()
val value =
if (it.isEmpty())
NUM_0
else it.text
val amountFormat: String = notFormatAmount(value).toStringThousandAmount()
TransformedText(
AnnotatedString(amountFormat.take(amountFormat.length)),
OffsetMapping.Identity
)
},
value = text,
onValueChange = {
text = it
if (onTextChange != null) {
onTextChange(
it.ifEmpty { NUM_0 }
)
}
},
colors = TextFieldDefaults.textFieldColors(
textColor = Color.White,
disabledTextColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent,
cursorColor = Color.Transparent
),
textStyle = TextStyle(
color = Color.White,
fontFamily = FontFamily(
Font(R.font.mulish_bold)
),
textAlign = TextAlign.Justify,
fontSize = sp_50
),
singleLine = true,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword)
)
}
}

Android Development Jetpack Compose

I have created a search view that takes input. If the input string is greater than or equal to 3 then a drop down is shown with some suggestion. That suggestion list comes from the server, but currently it shows for length 3, but I can't type more in textfield after 3 chars - the keyboard hides if try to write more.
Here is my code snippet.
val searchitems by viewmodel.stateFlowMessage.collectAsState()
var showdropdown by remember {
mutableStateOf(false)
}
Box(
Modifier
.fillMaxWidth()
.height(56.dp)
.background(Color.White), contentAlignment = Alignment.Center
) {
Column() {
TextField(
value = state.value,
onValueChange = {
state.value = it
if (state.value.text.length >= 3) {
searchquery()showdropdown = true
}
},
singleLine = true,
textStyle = TextStyle(
fontWeight = FontWeight(400),
color = Color.Black,
fontSize = 14.sp,
),
modifier = Modifier
.fillMaxHeight()
.fillMaxWidth(1f),
placeholder = {
Text(
text = label,
modifier = Modifier
.wrapContentSize()
.padding(start = 15.dp),
style = TextStyle(
fontSize = 14.sp, color = colorResource(id = R.color.grey))
)
},
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Search,
autoCorrect = true,
),
leadingIcon = {
Image(
imageVector = Icons.Default.Search,
contentDescription = "",
modifier = Modifier
.size(24.dp)
.padding(start = 4.dp),
colorFilter = ColorFilter.tint(color = colorResource(id = R.color.grey))
)
},
colors = TextFieldDefaults.textFieldColors(
cursorColor = colorResource(id = R.color.grey),
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent,
backgroundColor = colorResource(id = R.color.col2)
)
)
}
DropdownMenu(expanded = showdropdown,
onDismissRequest = { showdropdown = false }, properties = PopupProperties(focusable = false)) {
Log.d("checks", "${searchitems.size}")
for (it in searchitems) {
DropdownMenuItem(onClick = {
selectitem(it)
state.value = TextFieldValue(it)
showdropdown = false
}
) {
Text(text = it,
style = TextStyle(fontSize = 14.sp,
color = Color.Black,
fontWeight = FontWeight(400)))
}
}
}
}

Aligning the text of a TextField with its Trailing icon

I have an svg icon in my drawables folder from our designer, and I'm trying to figure out a way to align the trailing icon of the TextField with its text in a way that it will look the same on most devices. I'm trying to avoid fixed dp values but I can't find a built-in way to do this.
screen code:
var customAmountTxt by remember { mutableStateOf(TextFieldValue()) }
TextField(
value = customAmountTxt,
onValueChange = {
customAmountTxt = it
},
maxLines = 1,
singleLine = true,
leadingIcon = {
Icon(
painter = painterResource(id = R.drawable.ic_euro),
contentDescription = stringResource(
R.string.euro_icon_desc
),
modifier = Modifier.padding(
start = 16.dp,
end = 16.dp,
top = 12.dp,
bottom = 12.dp
)
)
},
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Number,
imeAction = ImeAction.Done
),
keyboardActions = KeyboardActions(onDone = {
focusManager.clearFocus()
keyboardController?.hide()
}),
shape = RoundedCornerShape(6.dp),
colors = TextFieldDefaults.textFieldColors(
backgroundColor = colorResource(id = R.color.white),
textColor = colorResource(id = R.color.black),
focusedIndicatorColor = colorResource(id = R.color.white),
unfocusedIndicatorColor = colorResource(id = R.color.white),
disabledIndicatorColor = colorResource(id = R.color.white),
cursorColor = colorResource(id = R.color.black)
),
textStyle = TextStyle(
color = Color.Black,
fontSize = 16.sp,
fontWeight = FontWeight.Normal,
textAlign = TextAlign.Start
),
modifier = Modifier
.height(50.dp)
.fillMaxWidth()
.shadow(8.dp, shape = RoundedCornerShape(6.dp))
)
current output:

Is there a way to show "italic, "bold", "underline" buttons on Android keyboard?

I am working on an Android app in compose,
When writing text, I need to show a keaybord that has the "underline", "italic" and "bold" buttons present on top of the keyboard text.
Is there a way I can do that?
Currently, this is what I have:
val keyboardController = LocalSoftwareKeyboardController.current
var textValue by remember { mutableStateOf(TextFieldValue("Write your text...")) }
TextField(
value = textValue,
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(),
placeholder = { Text(text = "John Doe") },
textStyle = TextStyle(
color = Color.Gray,
fontSize = 20.sp,
// fontWeight = FontWeight.Bold,
// textDecoration = TextDecoration.Underline
),
// Update value of textValue with the latest value of the text field
onValueChange = {
textValue = it
},
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
keyboardActions = KeyboardActions(
onDone = {
keyboardController?.hide()
// do something here
}
) )

Jetpack compose: Setting ImeAction does not close or change focus for the keyboard

I'm using Jetpack compose 1.0.0-alpha07. I made a login screen that contains two TextFields customized using other composables.
However, setting ImeAction in keyboardOptions does not seem to work. For instance ImeAction.Next does not move focus to the next TextField. I think I should do something to make it possible, but no document or article has talked even briefly about ImeOptions. Here's the code I have for the screen:
Login composable:
EmailEdit(onChange = { email.value = it })
PasswordEdit(onChange = { password.value = it })
EmailEdit:
#Composable
fun EmailEdit(onChange: (String) -> Unit) {
val t = remember { mutableStateOf("") }
TextField(
value = t.value,
onValueChange = { value ->
t.value = value
onChange(value)
},
leadingIcon = { Icon(asset = Icons.Default.Email) },
label = { Text(text = "Email") },
maxLines = 1,
keyboardOptions = KeyboardOptions(
imeAction = ImeAction.Next, // ** Go to next **
keyboardType = KeyboardType.Email
),
visualTransformation = VisualTransformation.None
)
} errorHint = "Not a valid email"
)
}
PassEdit:
#Composable
fun PasswordEdit(onChange: (String) -> Unit) {
val t = remember { mutableStateOf("") }
TextField(
value = t.value,
onValueChange = { value ->
t.value = value
onChange(value)
},
leadingIcon = { Icon(asset = Icons.Default.Security) },
label = { Text(text = "Password") },
maxLines = 1,
keyboardOptions = KeyboardOptions(
imeAction = ImeAction.Done, // ** Done. Close the keyboard **
keyboardType = KeyboardType.Text
),
visualTransformation = PasswordVisualTransformation()
)
}
To perform Done and Next what code should I add?

You can use
keyboardOptions: software keyboard options that contains configuration such as KeyboardType and ImeAction
keyboardActions when the input service emits an IME action, the corresponding callback is called
For Done:
You can use the LocalSoftwareKeyboardController to interact with the keyboard.
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
keyboardActions = KeyboardActions(
onDone = {keyboardController?.hide()}
)
For Next:
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
keyboardActions = KeyboardActions(
onNext = { focusRequester.requestFocus() }
)
Something like:
val (focusRequester) = FocusRequester.createRefs()
val keyboardController = LocalSoftwareKeyboardController.current
TextField(
value = text,
onValueChange = {
text = it
},
label = { Text("Label") },
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
keyboardActions = KeyboardActions(
onNext = { focusRequester.requestFocus() }
)
)
TextField(
value = text,
onValueChange = {
text = it
},
modifier = Modifier.focusRequester(focusRequester),
label = { Text("Label") },
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
keyboardActions = KeyboardActions(
onDone = { keyboardController?.hide() }
)
)

You can use LocalFocusManager.
val localFocusManager = LocalFocusManager.current
Inside parent composable of your fields.
To move focus to next field:
localFocusManager.moveFocus(FocusDirection.Down)
Inside onNext of KeyboardActions to move focus in specific direction such as left, right, up and down.
To clear focus:
localFocusManager.clearFocus()
Inside onDone of KeyboardActions to clear focus.
Email Field :
OutlinedTextField(
value = userId,
onValueChange = { userId = it },
label = { Text("Email") },
modifier = Modifier.fillMaxWidth(),
singleLine = true,
leadingIcon = {
Icon(
painter = painterResource(id = R.drawable.ic_account),
contentDescription = "ID"
)
},
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = Color.Gray,
unfocusedBorderColor = Color.LightGray,
focusedLabelColor = Color(0xffcc0000)
),
keyboardOptions =
KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Next
),
keyboardActions = KeyboardActions(onNext = {
localFocusManager.moveFocus(FocusDirection.Down)
})
)
Password Field :
OutlinedTextField(
value = password,
onValueChange = { password = it },
label = { Text("Password") },
modifier = Modifier.fillMaxWidth(),
singleLine = true,
leadingIcon = {
Icon(
painter = painterResource(id = R.drawable.ic_password),
contentDescription = "Password"
)
},
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = Color.Gray,
unfocusedBorderColor = Color.LightGray,
focusedLabelColor = Color(0xffcc0000)
),
keyboardOptions =
KeyboardOptions(
keyboardType = KeyboardType.Password,
imeAction = ImeAction.Done
),
keyboardActions = KeyboardActions(onDone = {
localFocusManager.clearFocus()
})
)
Tried with version 1.0.1

use the onImeActionPerformed parameter.
For Done:
TextField(
onImeActionPerformed = { _, controller ->
controller?.hideSoftwareKeyboard()
}
)
For Next:
val focusRequester = remember { FocusRequester() }
TextField(
onImeActionPerformed = { _, _ ->
focusRequester.requestFocus()
}
)
TextField(
modifier = Mofifier.focusRequester(focusRequester)
)
Here's a working example:
val focusRequester = remember { FocusRequester() }
val email = remember { mutableStateOf("") }
TextField(
value = email.value,
onValueChange = { email.value = it },
imeAction = ImeAction.Next,
onImeActionPerformed = { _, _ -> focusRequester.requestFocus() }
)
val password = remember { mutableStateOf("") }
TextField(
value = password.value,
onValueChange = { password.value = it },
imeAction = ImeAction.Done,
onImeActionPerformed = { _, controller -> controller?.hideSoftwareKeyboard() },
modifier = Modifier.focusRequester(focusRequester)
)
Documentation:
FocusRequestModifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/FocusRequesterModifier
TextField: https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#TextField(kotlin.String,%20kotlin.Function1,%20androidx.compose.ui.Modifier,%20androidx.compose.ui.text.TextStyle,%20kotlin.Function0,%20kotlin.Function0,%20kotlin.Function0,%20kotlin.Function0,%20kotlin.Boolean,%20androidx.compose.ui.text.input.VisualTransformation,%20androidx.compose.foundation.text.KeyboardOptions,%20kotlin.Int,%20kotlin.Function2,%20kotlin.Function1,%20androidx.compose.foundation.InteractionState,%20androidx.compose.ui.graphics.Color,%20androidx.compose.ui.graphics.Color,%20androidx.compose.ui.graphics.Color,%20androidx.compose.ui.graphics.Color,%20androidx.compose.ui.graphics.Shape)

With Compose in this instance you need to create a set of references to each focusable text field on your screen as below (textField1, textField2) and get a reference to the keyboardController.
Then you can add a type of action to your keyboard options signalling how the action button should look when the keyboard is displayed.
In the keyboardActions parameter, you can call a function on the specified IME action - in this case i've stated I want textField2 to take focus when the keyboard action button is pressed. You assign the references in the Modifier.focusRequester parameter in the TextField.
Lastly, to make your first TextField take focus when the screen appears, you call a DisposableEffect function where you specify you would like textField1 to take focus when the screen is first displayed.
val (textField1, textField2) = remember { FocusRequester.createRefs() }
val keyboardController = LocalSoftwareKeyboardController.current
TextField(
modifier = Modifier.focusRequester(textField1),
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
keyboardActions = KeyboardActions( onNext = {textField2.requestFocus()}
),
)
TextField(
modifier = Modifier.focusRequester(textField2),
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
keyboardActions = KeyboardActions( onDone = {
keyboardController?.hide()}
),
)
DisposableEffect(Unit) {
textField1.requestFocus()
onDispose { }
}