I'm trying to get an OutlinedTextField with gradient border like this one:
But I can add only a single color to the outline,
OutlinedTextField(
value = email,
onValueChange = {email = it},
label = { Text(text = "Email Address") },
modifier = Modifier
.fillMaxWidth(.8f)
.padding(4.dp),
colors = TextFieldDefaults.outlinedTextFieldColors(unfocusedBorderColor = Color.Green)
)
If I add a border with modifier then the gradient is applied to the border, not to the outline:
Modifier.border(width = 1.dp, brush = gradient, shape = RoundedCornerShape(12.dp))
How can I add gradient color to the outline?
so far that i know OutlinedTextField does't support gradient border. But if really want to use gradient border in text field you can try BasicTextField
var name by remember {
mutableStateOf("")
}
BasicTextField(
value = name,
onValueChange = { name = it },
cursorBrush = Brush.horizontalGradient(listOf(Color.Red, Color.Green)),
modifier = Modifier
.fillMaxWidth(),
decorationBox = { innerTextField ->
Row(
modifier = Modifier
.fillMaxWidth()
.border(
brush = Brush.horizontalGradient(listOf(Color.Green, Color.Blue)),
width = 1.dp,
shape = CircleShape
)
.padding(16.dp)
) {
Icon(Icons.Default.Email, contentDescription = "")
Spacer(modifier = Modifier.padding(3.dp))
innerTextField()
}
}
)
and this is the final result
you can learn more about basic text field by looking the sample
[BasicTextField Samples][2]
Related
I want to create the following textfield. But there are no samples on the internet for the same, neither in material documentation
#Composable
fun Textarea() {
val text = rememberSaveable { mutableStateOf("") }
TextField(
value = text.value,
onValueChange = { text.value = it }, modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.padding(10.dp)
.border(width = 1.dp, color = Color.Black, shape = RoundedCornerShape(8.dp))
)
}
You can change the size and customize it as you want as per your requirement.
I am trying to build an text field with shadow outside
This is the result I achieved so on.
But if you zoom in the picture you will see some rectangle background under white text field (please look at the corners outside of text field, there is a background)
How can I remove that background ?
#Composable
fun MyTextField() {
var text by remember {
mutableStateOf("")
}
Box(
modifier = Modifier
.padding(15.dp)
.shadow(5.dp)
.background(color = Color.White, shape = RoundedCornerShape(10.dp))
.fillMaxWidth()
.height(50.dp),
contentAlignment = Alignment.Center,
) {
TextField(
value = text,
onValueChange = { text = it },
label = { Text(text = "Phone number", color = Color.Gray, fontSize = 14.sp) },
modifier = Modifier
.fillMaxSize()
.background(color = Color.Transparent, shape = RoundedCornerShape(10.dp)),
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent
),
)
}
}
As default the shadow modifier uses a RectangleShape, it is the reason of your issue:
Apply the same shape to the shadow and background modifiers:
val shape = RoundedCornerShape(10.dp)
Box(
modifier = Modifier
.padding(15.dp)
.shadow(
elevation = 5.dp,
shape = shape
)
.background(color = Color.White, shape = shape)
.fillMaxWidth()
.height(50.dp),
contentAlignment = Alignment.Center,
)
What I want:
I want my OutlinedTextField to be always focused or disable the ability to focus.
I want the OutlinedTextField to be RoundedCornerShape but when I use background it goes out of the shape.
My Code:
Column(modifier = Modifier
.weight(1f)
.background(Color.Gray)
.clip(RoundedCornerShape(35.dp))
) {
OutlinedTextField(
value = "12",
onValueChange = {},
readOnly = true,
shape = RoundedCornerShape(35.dp),
textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.End),
leadingIcon = { Icon(painter = painterResource(id = R.drawable.ic_coin), contentDescription = null)},
modifier = Modifier
)
}
Using enabled = 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 readOnly.
To change the background color use the attribute backgroundColor in the TextFieldDefaults.outlinedTextFieldColors parameter:
OutlinedTextField(
value = "12",
onValueChange = {},
enabled = false,
shape = RoundedCornerShape(35.dp),
textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.End),
colors = TextFieldDefaults.outlinedTextFieldColors(
backgroundColor = Color.Gray,
disabledTextColor= LocalContentColor.current.copy(LocalContentAlpha.current),
)
)
If you want to wrap the component in a Column change the order of the modifiers:
Column(modifier = Modifier
.clip(RoundedCornerShape(35.dp))
.background(Color.Gray)
){
//....
}
If you want to change the border width you have to use the version 1.2.x and the OutlinedTextFieldDecorationBox specifying the border attribute:
BasicTextField(
//....
) {
OutlinedTextFieldDecorationBox(
border = {
TextFieldDefaults.BorderBox(
//...
unfocusedBorderThickness = 4.dp,
focusedBorderThickness = 4.dp
)
}
)
}
My code:
OutlinedTextField(
value = state.value,
onValueChange = { state.value = it },
modifier = Modifier.fillMaxWidth().padding(start = 30.dp, end = 30.dp),
label = { Text(text = "Something", fontSize = 14.sp) },
shape = RoundedCornerShape(12.dp),
)
I want to increase the border width so that the colors focusedBorderColor, disabledBorderColor are supported.
Outline border is defined as a constant value in OutlinedTextField.
private val IndicatorUnfocusedWidth = 1.dp
private val IndicatorFocusedWidth = 2.dp
There is no direct way to override these values.
So, you have to create complete custom TextField Composables if you need to achieve dynamic border width.
You can copy-paste the complete code in OutlinedTextField.kt and TextFieldImpl.kt and modify them as required to create the custom Composables.
You can change OutlinedTextField border like this
var hasFocus by remember { mutableStateOf(false) }
OutlinedTextField(
modifier = modifier
.border(
width = 1.dp,
color = if (hasFocus) Color.Red else Color.Unspecified
)
.onFocusChanged { focusState -> hasFocus = focusState.hasFocus },
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = Color.Unspecified,
unfocusedBorderColor = Color.Unspecified
)
)
Another solution is to use BaseTextField instead of OutlinedTextField
I have two layers in my Compose layout: One for the actual content and the one above is a Box-wrapped OutlinedTextField for search queries.
Here's the sample code:
// Placeholder for layout content
Box(modifier = Modifier.fillMaxSize()) {
Text(
text = stringResource(id = R.string.lorem_ipsum),
color = Color.Gray
)
}
// Overlaying Box with OutlinedTextField
Box(modifier = Modifier
.padding(start = 16.dp, end = 16.dp, bottom = 16.dp, top = 64.dp)
) {
OutlinedTextField(
value = viewModel.query.value,
onValueChange = { viewModel.updateQuery(it) },
modifier = Modifier
.fillMaxWidth()
.align(Alignment.BottomCenter)
.navigationBarsWithImePadding(),
keyboardOptions = KeyboardOptions(
capitalization = KeyboardCapitalization.Characters,
autoCorrect = false,
keyboardType = KeyboardType.Text,
imeAction = ImeAction.None
),
shape = CircleShape,
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.White
),
placeholder = { Text(stringResource(id = R.string.search_input_placeholder)) },
maxLines = 1,
singleLine = true
)
}
Even though I'm setting
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.White
)
in the OutlinedTextField, the background stays transparent as you can see in the following screenshot:
Adding a background color on the OutlinedTextField's modifier is giving the whole row a rectangled background, which is also not the desired result.
The OutlinedTextField with it's CircleShape should only have a background inside of the shape. How can I achieve that?
I'm using Jetpack Compose version 1.0.4.
Reason
Unfortunately, in version 1.0.4, OutlinedTextField ignores the backgroundColor even if you specify it, so you can remove the colors parameter.
Support for it will be added in 1.1.0:
https://android-review.googlesource.com/c/platform/frameworks/support/+/1741240
It's already present in 1.1.0-alpha06 so you can play with it if you want. Your original code should produce desired outcome on that version.
Solution
To achieve what you want (before 1.1.0 is released) you can simply add a background modifier with the same shape:
.background(Color.White, CircleShape)
Since the order of modifiers is important, you should add it after you apply all the paddings (navigationBarsWithImePadding in your case). Like that:
modifier = Modifier
.fillMaxWidth()
.align(Alignment.BottomCenter)
.navigationBarsWithImePadding()
.background(Color.White, CircleShape),
Note: Also be aware that you cannot use the label parameter with this approach, because the TextField with label will be higher than just the outline shape and these two shaped wouldn't match in size anymore.
Result
Entire code:
// Placeholder for layout content
Box(modifier = Modifier.fillMaxSize()) {
Text(
text = stringResource(id = R.string.lorem_ipsum),
color = Color.Gray
)
}
// Overlaying Box with OutlinedTextField
Box(modifier = Modifier
.padding(start = 16.dp, end = 16.dp, bottom = 16.dp, top = 64.dp)
) {
OutlinedTextField(
value = viewModel.query.value,
onValueChange = { viewModel.updateQuery(it) },
modifier = Modifier
.fillMaxWidth()
.align(Alignment.BottomCenter)
.navigationBarsWithImePadding()
.background(Color.White, CircleShape),
keyboardOptions = KeyboardOptions(
capitalization = KeyboardCapitalization.Characters,
autoCorrect = false,
keyboardType = KeyboardType.Text,
imeAction = ImeAction.None
),
shape = CircleShape,
placeholder = { Text(stringResource(id = R.string.search_input_placeholder)) },
maxLines = 1,
singleLine = true
)
}
How the final result looks like: