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)))
}
}
}
}
Related
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)
)
}
}
When i try to enter some inputs to text field, it draws underline, how to remove this underline without change any color of outlinedtextfield.
OutlinedTextField(modifier = Modifier
.fillMaxWidth()
.padding(16.dp),value = password,
onValueChange = {
password = it},
leadingIcon = { Icon(painter = painterResource(id = R.drawable.ic_baseline_vpn_key_24), contentDescription = "icon-content")},
trailingIcon = { IconButton(onClick = { passwordVisibility = !passwordVisibility }) {
Icon(painter = icon, contentDescription = "show-password")
}},
placeholder = { Text(text = "Password",
color = Color.LightGray)},
label = { BasicText(text = "Password")},
visualTransformation = if(passwordVisibility) VisualTransformation.None else PasswordVisualTransformation()
)
You should specify the keyboardType as Password to get rid of the text underline. You can do that by using KeyboardOptions:
OutlinedTextField(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
value = password,
onValueChange = { password = it },
leadingIcon = {
Icon(
painter = painterResource(id = R.drawable.ic_baseline_vpn_key_24),
contentDescription = "icon-content"
)
},
trailingIcon = {
IconButton(onClick = { passwordVisibility = !passwordVisibility }) {
Icon(painter = icon, contentDescription = "show-password")
}
},
placeholder = {
Text(
text = "Password",
color = Color.LightGray
)
},
label = { BasicText(text = "Password") },
visualTransformation = if (passwordVisibility) VisualTransformation.None else PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Password // HERE
),
)
This is the crucial change:
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Password
)
The underline text is not related to color of OutlinedTextField.
It is related to the keyboardType applied. The default value is KeyboardType.Text.
Just add in your in OutlinedTextField:
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
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:
I am new to jetpack compose, I want my app to load the Exo two light font so I override the material typography like this,
val exoTwoLight = FontFamily(
Font(R.font.exo_two_light),
Font(R.font.exo_two_light, FontWeight.Bold)
)
val exoTwoLightTypography = Typography(
h1 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Bold,
fontSize = 96.sp
),
h2 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Bold,
fontSize = 60.sp
),
h3 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Bold,
fontSize = 48.sp
),
h4 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Bold,
fontSize = 34.sp
),
h5 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Bold,
fontSize = 20.sp
),
h6 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Bold,
fontSize = 12.sp
),
subtitle1 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Normal,
fontSize = 16.sp
),
subtitle2 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Medium,
fontSize = 14.sp
),
body1 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Normal,
fontSize = 16.sp
),
body2 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Normal,
fontSize = 14.sp
),
button = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Medium,
fontSize = 14.sp,
),
caption = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Normal,
fontSize = 12.sp,
),
overline = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Normal,
fontSize = 10.sp,
)
)
Now when I try to load an input field in the app I can see that placeholder and leading icons are not aligned at all
I tried to customize the placeholder as it is required as a composable
By customization, I mean adding top padding of 2/4 dp to the placeholder
Row(modifier = Modifier.padding(top=10.dp)) {
OutlinedTextField(
leadingIcon = {
Icon(
painter = painterResource(id = R.drawable.gallery_icon),
contentDescription = "",
tint = colorResource(R.color.teal_200),
modifier = Modifier.clickable {
}
)
},
placeholder = {
Text(
text = "Placeholder",
style = MaterialTheme.typography.button,
modifier = Modifier.padding(top = 3.dp)
)
},
modifier = Modifier.fillMaxWidth(),
readOnly = false,
value = sampleValue,
onValueChange = {
sampleValue = it
},
maxLines = 1,
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
)
}
It only solves the issue for the placeholder but values seem to be misaligned
This is the complete code
var sampleValue by remember {
mutableStateOf("")
}
Column{
Row(modifier = Modifier.padding(top=10.dp)){
OutlinedTextField(
leadingIcon = {
if (true) {
Icon(
painter = painterResource(id = R.drawable.capture_more_images),
contentDescription = "",
tint = colorResource(R.color.teal_200),
modifier = Modifier.clickable {
}
)
} else {
Icon(
painter = painterResource(id = R.drawable.capture_more_images),
contentDescription = "",
tint = colorResource(R.color.disabled)
)
}
},
placeholder = {
Row(
modifier = Modifier.height(24.dp),
verticalAlignment = Alignment.CenterVertically
){
Text(
text = "Placeholder",
style = MaterialTheme.typography.button
)
}
},
modifier = Modifier.fillMaxWidth(),
readOnly = false,
value = sampleValue,
onValueChange = {
sampleValue = it
},
maxLines = 1,
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
)
}
Row(modifier = Modifier.padding(top=10.dp)) {
OutlinedTextField(
leadingIcon = {
Icon(
painter = painterResource(id = R.drawable.gallery_icon),
contentDescription = "",
tint = colorResource(R.color.teal_200),
modifier = Modifier.clickable {
}
)
},
placeholder = {
Text(
text = "Placeholder",
style = MaterialTheme.typography.button,
modifier = Modifier.padding(top = 3.dp)
)
},
modifier = Modifier.fillMaxWidth(),
readOnly = false,
value = sampleValue,
onValueChange = {
sampleValue = it
},
maxLines = 1,
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
)
}
Row(modifier = Modifier.padding(top=10.dp)) {
OutlinedTextField(
placeholder = {
Text(
text = "Placeholder",
style = MaterialTheme.typography.button,
)
},
modifier = Modifier.fillMaxWidth(),
value = sampleValue,
onValueChange = {
sampleValue = it
}
)
}
}
I want that placeholder to be aligned vertically centered ( without giving any top padding ) with the leading icon what is the solution?
The solution to this is to set the singleLine property of the TextField to true. Like this:
TextField(
singleLine = true,
placeholder = {
Text(text = "Search for reminders")
},
leadingIcon = {
Icon(
painter = painterResource(id = R.drawable.search_icon),
tint = MaterialTheme.colorScheme.outline,
contentDescription = "Back button"
)
}
)
Many icons have built-in padding on one or more sides. To compensate for this, you can adjust the icon's position using the offset modifier. Set it some positive or negative value:
placeholder = {
Row(
modifier = Modifier.height(24.dp).offset(y = 5.dp),
verticalAlignment = Alignment.CenterVertically
){
Text(
text = "Placeholder",
style = MaterialTheme.typography.button
)
}
}
If I put down a specific value for height, then my value for the text field moves somewhere, I can't understand why.
But if I don't set the height values, then everything is displayed in order
Here is my code:
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.fillMaxWidth()
// .size(40.dp)
.background(color = LightGray20, shape = RoundedCornerShape(6.dp))
.padding(6.dp)
) {
TextField(
modifier = Modifier.width(80.dp),
// .height(28.dp),
value = product.quantity.toString(),
onValueChange = {
it.toDoubleOrNull()?.let { value -> quantityChangeHandler(product, value) }
},
textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.End, fontSize = 16.sp),
maxLines = 1,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Number,
imeAction = ImeAction.Done
),
keyboardActions = KeyboardActions(
onDone = { localFocusManager.clearFocus() }
),
shape = RoundedCornerShape(8.dp),
colors = TextFieldDefaults.textFieldColors(
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent,
),
)
Text(
text = description,
fontSize = 16.sp,
maxLines = 1,
modifier = Modifier.padding(start = 2.dp)
)
}
Here is the my design what i want to do:
Here what i find about paddings: