How can the cursor in an OutlinedTextField be hidden? I tried the following, but it doesn't seem to work. My input needs a border, so I don't think I can use another component than OutlinedTextField.
OutlinedTextField(
value = "",
onValueChange = {},
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
singleLine = true,
maxLines = 1,
shape = inputCornerShape,
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = Color(0xFF6650a4),
unfocusedBorderColor = Color(0xFF625b71),
cursorColor = Color.Transparent,
errorCursorColor = Color.Transparent
),
modifier = Modifier
.fillMaxWidth()
.weight(1f)
.wrapContentHeight()
.indicatorLine(
enabled = false,
isError = false,
interactionSource = interactionSource,
colors = TextFieldDefaults.textFieldColors(
disabledIndicatorColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
errorIndicatorColor = Color.Transparent,
cursorColor = Color.Transparent,
errorCursorColor = Color.Transparent
),
focusedIndicatorLineThickness = 0.dp,
unfocusedIndicatorLineThickness = 0.dp
)
)
You can hide the cursor using cursorColor = Color.Transparent in the colors attribute. You should also apply the same color to the text selection applying a custom TextSelectionColors:
val customTextSelectionColors = TextSelectionColors(
handleColor = Color.Transparent,
backgroundColor = Color.Transparent
)
CompositionLocalProvider(LocalTextSelectionColors provides customTextSelectionColors) {
OutlinedTextField(
value = text,
onValueChange = { text = it },
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
singleLine = true,
maxLines = 1,
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = Color(0xFF6650a4),
unfocusedBorderColor = Color(0xFF625b71),
cursorColor = Color.Transparent,
errorCursorColor = Color.Transparent
),
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
)
}
Alright, so I found out that apparently settings the cursor color only didn't work when I set it from a parameter (like in my question). As soon as I copied the default value of the parameter and pasted it as the value of color it started working. That's when I realised I didn't include cursorColor and errorCursorColor when instantiating my Composable. I added other colors there, but not these ones. I thought they would be added, but instead, the entire TextFieldColors object is overwritten (obviously). When I added cursorColor and errorCursorColor here too, it started working. Derp.
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)
)
}
}
WHAT I AM TRYING TO DO: I am trying to use a TextField inside the title of MediumTopAppBar.
THE PROBLEM: The TextField looks like it's been cut off from the top.
MY CODE
Scaffold(
topBar = {
MediumTopAppBar(
title = {
TextField(
value = "",
onValueChange = {/*TODO*/},
modifier = Modifier
.fillMaxWidth()
.padding(0.dp)
.height(40.dp)
.zIndex(1f)
.border(0.dp, Color.Transparent, RoundedCornerShape(8.dp)),
colors = TextFieldDefaults.textFieldColors(
textColor = Color.Gray,
disabledTextColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent
),
shape = RoundedCornerShape(8.dp)
)
},
......
I tried to set the heigh of the TextField with smaller number
How it looks like
Use a BasicTextField instead of a TextField:
MediumTopAppBar(
title = {
BasicTextField(
value = text,
onValueChange = { text = it },
modifier = Modifier
.fillMaxWidth()
.padding(0.dp)
.height(40.dp)
.zIndex(1f)
.border(0.dp, Color.Transparent, RoundedCornerShape(8.dp)),
interactionSource = interactionSource,
enabled = enabled,
singleLine = singleLine
){
TextFieldDefaults.TextFieldDecorationBox(
value = text,
innerTextField = it,
enabled = enabled,
singleLine = singleLine,
visualTransformation = VisualTransformation.None,
interactionSource = interactionSource,
contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
top = 0.dp,
bottom = 0.dp
),
colors = TextFieldDefaults.textFieldColors(
textColor = Color.Gray,
disabledTextColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent
),
)
}
},
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)))
}
}
}
}
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:
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: