Is there a way to disable all interaction for Jetpack Compose's TextField?
You can use the enabled attribute:
enabled : controls the enabled state of the TextField. When false, the text field will be neither editable nor focusable, the input of the text field will not be selectable, visually text field will appear in the disabled UI state
Something like:
var text by rememberSaveable { mutableStateOf("Text") }
TextField(
value = text,
onValueChange = { text = it },
enabled = false,
label = { Text("Label") },
singleLine = true
)
My project is on alpha08 atm. Hopefully they add some built in way of doing this soon but in the meantime I've been doing this:
val textState = remember { mutableStateOf(TextFieldValue()) }
val disabled = remember { mutableStateOf(true) }
Box {
TextField(value = textState.value, onValueChange = {
textState.value = it
})
if (disabled.value) {
// Set alpha(0f) to hide click animation
Box(modifier = Modifier.matchParentSize().alpha(0f).clickable(onClick = {}))
}
}
So yeah, drawing an invisible clickable Box that's the same size over the TextField. You can resize the TextField to whatever you'd want, calling .matchParentSize() on the invisible Box will make it match the TextField due to them being the only children in the parent Box.
You can toggle the disabled state by setting disabled.value = true/false wherever is appropriate.
readOnly attribute can also work in case if you want focusable & selectable text field but not editable.
Like this:
var value by remember { mutableStateOf("Hello World!") }
TextField(
value = value,
onValueChange = { value = it },
readOnly = true,
)
Related
I have input field defined like this:
BasicTextField(
keyboardOptions = KeyboardOptions(keyboardType=KeyboardType.Number),
value = text,
enabled = enabled,
singleLine = true,
textStyle = Theme.typography.Body16,
onValueChange = { onTextChange(it) },
modifier = Modifier
.fillMaxWidth(0.85f)
.onFocusChanged {
hasFocus = it.hasFocus
}
)
which allows to enter just numbers and display numeric keyboard. But users can paste any text. How to prevent pasting text ? or completely disable paste option ?
You can check if the new value is digits only
onValueChange = {
if (TextUtils.isDigitsOnly(it))
onTextChange(it)
}
Many Android apps feature a search box in the app bar / toolbar, that looks somewhat like this screenshot:
How do I recreate something similar in Jetpack Compose + Material3? I would like the text field to have these features:
support showing a hint when the content string is empty (e.g. "Type your search...")
auto-focus on the first composition, so that the keyboard is opened
put the cursor at the end of the content string on the first composition
I tried to reproduce the same behavior in Jetpack Compose + Material3 by putting a TextField in the title of a CenterAlignedTopAppBar but the result does not look good. The text field uses the whole height of the app bar and has a grey background, and both of these things look odd.
I came up with a AppBarTextField after some engineering, see the code below. I had to use the lower-level BasicTextField since the normal TextField is not customizable enough. The code having to do with theming and color was copied directly from TextField's implementation, so that the theme's customizations apply normally to the components of the text field.
The parameters the AppBarTextField composable accepts are:
value: the content string to show in the text field
onValueChange: new values are passed here (remember to update value!)
hint: the hint to show when the text field is empty
modifier, keyboardOptions and keyboardActions: they are passed directly to BasicTextField and they behave the same as they would in a normal TextField. If you need to customize other TextField parameters just add them to the function signature and then pass them to BasicTextField.
The requested features are implemented:
the focus acquisition was achieved with a SideEffect, so that it would only happen on the first composition
putting the cursor at the end on the first composition required using a TextFieldValue
the strange-looking background is not present anymore, since no .background() modifier is present (while it is in the normal TextField)
the hint was added using by passing a placeholder to TextFieldDecorationBox in the decorationBox parameter (note that this was also possible with TextField)
TextFieldDecorationBox's padding is also now only 4dp. Padding was added here (and not with a modifier on BasicTextField) since otherwise the bottom line indicator (which is, instead, displayed using the .indicatorLine() modifier) would not be shown correctly.
#OptIn(ExperimentalMaterial3Api::class)
#Composable
fun AppBarTextField(
value: String,
onValueChange: (String) -> Unit,
hint: String,
modifier: Modifier = Modifier,
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
keyboardActions: KeyboardActions = KeyboardActions.Default,
) {
val interactionSource = remember { MutableInteractionSource() }
val textStyle = LocalTextStyle.current
// make sure there is no background color in the decoration box
val colors = TextFieldDefaults.textFieldColors(containerColor = Color.Unspecified)
// If color is not provided via the text style, use content color as a default
val textColor = textStyle.color.takeOrElse {
MaterialTheme.colorScheme.onSurface
}
val mergedTextStyle = textStyle.merge(TextStyle(color = textColor, lineHeight = 50.sp))
// request focus when this composable is first initialized
val focusRequester = FocusRequester()
SideEffect {
focusRequester.requestFocus()
}
// set the correct cursor position when this composable is first initialized
var textFieldValue by remember {
mutableStateOf(TextFieldValue(value, TextRange(value.length)))
}
textFieldValue = textFieldValue.copy(text = value) // make sure to keep the value updated
CompositionLocalProvider(
LocalTextSelectionColors provides LocalTextSelectionColors.current
) {
BasicTextField(
value = textFieldValue,
onValueChange = {
textFieldValue = it
// remove newlines to avoid strange layout issues, and also because singleLine=true
onValueChange(it.text.replace("\n", ""))
},
modifier = modifier
.fillMaxWidth()
.heightIn(32.dp)
.indicatorLine(
enabled = true,
isError = false,
interactionSource = interactionSource,
colors = colors
)
.focusRequester(focusRequester),
textStyle = mergedTextStyle,
cursorBrush = SolidColor(MaterialTheme.colorScheme.primary),
keyboardOptions = keyboardOptions,
keyboardActions = keyboardActions,
interactionSource = interactionSource,
singleLine = true,
decorationBox = { innerTextField ->
// places text field with placeholder and appropriate bottom padding
TextFieldDefaults.TextFieldDecorationBox(
value = value,
visualTransformation = VisualTransformation.None,
innerTextField = innerTextField,
placeholder = { Text(text = hint) },
singleLine = true,
enabled = true,
isError = false,
interactionSource = interactionSource,
colors = colors,
contentPadding = PaddingValues(bottom = 4.dp)
)
}
)
}
}
Here is an example usage:
var value by rememberSaveable { mutableStateOf("initial content") }
CenterAlignedTopAppBar(
title = {
AppBarTextField(
value = value,
onValueChange = { newValue -> value = newValue },
hint = "A hint..."
)
},
navigationIcon = /* the back icon */,
actions = /* the search icon */
)
I have a TextField in column with verticalScroll().
When adding a large number of characters, the textfield size goes beyond the keyboard and I stop seeing what I am typing
I tried to use this lib, but that's doesn't help
I think you can use BringIntoViewRequester in your TextField.
var state by rememberSaveable {
mutableStateOf("")
}
val coroutineScope = rememberCoroutineScope()
val bringIntoViewRequester = remember {
BringIntoViewRequester()
}
TextField(
value = state,
onValueChange = { text ->
state = text
// This will cause the TextField be repositioned on the screen
// while you're typing
coroutineScope.launch {
bringIntoViewRequester.bringIntoView()
}
},
modifier = Modifier
.bringIntoViewRequester(bringIntoViewRequester)
.onFocusChanged {
if (it.isFocused) {
coroutineScope.launch {
delay(400) // delay to way the keyboard shows up
bringIntoViewRequester.bringIntoView()
}
}
},
)
See the complete sample here.
you can add android:ellipsize="end" and android:maxLines="1" or whatever lines you want, in your text xml hope it would be helpful.
I have this TextFied Composable with both KeyboardOptions and KeyboardActions.
#Composable
fun TodoInputText(...) {
val keyboardController = LocalSoftwareKeyboardController.current
TextField( ....
onValueChange = onTextChanged,
keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Done),
keyboardActions = KeyboardActions(onDone = {
onImeAction()
keyboardController?.hide()
}))}
The TextField is working with the Done Action but I need to disable Done ImeAction on the keyboard whenever the TextFied is empty as illustrated on this GIF
I have already extracted a state to check if the TextField is empty.
#Composable
fun TodoItemEntryInput(...) {
//hold state for TextField
val (text, setText) = remember { mutableStateOf("") }
val isTextBlank = text.isNotBlank()
//declare lambda function submit that handles a submit event when done is pressed
val submitAction = { .... }
TodoItemInput(
text = text,
onTextChange = setText,
submitAction = submitAction,
)}
Now my question is how can I use the isTextBlank state to disable or Gray-out the Done ImeAction whenever the text is empty. This is to avoid bugs if the user enters blank text - I found input verification not very optimal for this case.
This is impossible in regular Android, so with Jetpack Compose this task also cannot be solved.
All you can do is check if the text in the onDone callback is valid, continue if it is, and show an error if it is not.
On tapping a TextField, created with Jetpack compose, the label of TextField moves upward. How do we disable this?
Or is there any other way the TexField would work like an EditText in View system where we have hint which disappears on tapping the EditText?
Jetpack compose version - 1.0.3
placeholder attribute might be what you are looking for.
But, the text doesn't disappear on clicking the TextField.
It disappears only when the user enters some input text.
Default state
Focused state
After entering input
Code
TextField(
placeholder = { Text(text = "Label") },
// Other attributes
)
UPDATE
You can use placeholder with state.
var focusState by remember { mutableStateOf(false) }
placeholder = {
Text(
text = if (focusState) "" else "label",
)
}
and focusState you take from onFocusChanged
TextField(
modifier = Modifier
.onFocusChanged { focus ->
focusState = focus.isFocused
}