I have a TextField to enter the amount as follows:
#OptIn(ExperimentalMaterialApi::class)
#Composable
fun AmountTextField(
modifier: Modifier,
sendMoneyViewModel: SendMoneyViewModel,
isReadOnly: Boolean,
focusManager: FocusManager
) {
val paymentAmount = sendMoneyViewModel.paymentAmount.collectAsState()
val focusRequester = remember { FocusRequester() }
LaunchedEffect(Unit) {
focusRequester.requestFocus()
}
val interactionSource = remember { MutableInteractionSource() }
Row(
modifier = modifier,
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
) {
Spacer(modifier = Modifier.weight(1f))
Text(
modifier = Modifier.wrapContentWidth(),
text = stringResource(id = R.string.rupee_symbol),
color = Black191919,
fontSize = 36.sp,
fontFamily = composeFontFamily,
fontWeight = getFontWeight(FontWeightEnum.EXTRA_BOLD)
)
BasicTextField(
modifier = Modifier
.focusRequester(focusRequester)
.background(color = YellowFFFFEAEA)
.height(IntrinsicSize.Min)
.width(IntrinsicSize.Min)
.clipToBounds(),
value = paymentAmount.value,
onValueChange = {
sendMoneyViewModel.onAmountValueChanged(it)
},
interactionSource = interactionSource,
visualTransformation = CurrencyMaskTransformation(SendMoneyViewModel.AMOUNT_MAX_LENGTH),
singleLine = true,
textStyle = TextStyle(
color = Black191919,
fontSize = 36.sp,
fontFamily = composeFontFamily,
fontWeight = getFontWeight(FontWeightEnum.EXTRA_BOLD),
textAlign = TextAlign.Center
),
keyboardActions = KeyboardActions(onDone = {
if (paymentAmount.value.isNotBlank()) {
focusManager.moveFocus(FocusDirection.Next)
}
}),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Number, autoCorrect = false, imeAction = ImeAction.Next
),
readOnly = isReadOnly
) {
TextFieldDefaults.TextFieldDecorationBox(
value = paymentAmount.value,
visualTransformation = CurrencyMaskTransformation(SendMoneyViewModel.AMOUNT_MAX_LENGTH),
innerTextField = it,
singleLine = true,
enabled = !isReadOnly,
interactionSource = interactionSource,
contentPadding = PaddingValues(0.dp),
placeholder = { AmountFieldPlaceholder() },
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
cursorColor = Color.Black,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent
)
)
}
Spacer(modifier = Modifier.weight(1f))
}
}
#Composable
fun AmountFieldPlaceholder() {
Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
Text(
modifier = Modifier
.wrapContentWidth()
.align(Alignment.Center),
text = "0",
fontSize = 36.sp,
fontFamily = composeFontFamily,
fontWeight = getFontWeight(FontWeightEnum.EXTRA_BOLD),
color = GreyE3E5E5,
textAlign = TextAlign.Center
)
}
}
Initially it looks like this:
After typing "12", it's looking like this:
You can see that text "1" is cutting off.
Ideally it should look like this after typing 1234567:
But apart from actual text size, it has extra inner padding also from start and end. So it can be unexpectedly scrolled as follows:
Why TextField is having extra inner padding from start and end. Due to this, text is cutting while typing.
I have tried many solutions like:
Resizeable BasicTextField in Jetpack Compose
I also tried to set WindowInsets, but nothing is working.
I will suggest using View's EditText here since it provides lots of flexibility in terms of customization.
I have pasted the code on Paste Bin https://pastebin.com/Z1hS7xns
Update: wrap buildAmountEditText() with remember{} otherwise it'll be created every time there's new message string
#Composable
fun AmountTextField(
amount: String,
onAmountChange: (String) -> Unit
) {
Row(
horizontalArrangement = Arrangement.SpaceAround,
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = stringResource(R.string.rupee_symbol),
style = MaterialTheme.typography.h2.copy(
color = Color(0xFF191919),
fontWeight = FontWeight.ExtraBold
)
)
val titleField = remember {
buildAmountEditText(
context = LocalContext.current,
amount = amount,
onAmountChange = onAmountChange,
placeholder = "0",
focusChangeListener = { _, hasFocus ->
// do something with focus
},
paddingValues = PaddingValues(0)
)
}
AndroidView(factory = { titleField })
}
}
Remove singleLine property or set it as false. This is the simplest solution.
Related
compose_version = 1.2.0
kotlin 1.7.0
I am trying to remove the TextField. As I am using it with a trailing icon. So I can't use the BasicTextField as it doesn't have the trailing icon.
I am using version 1.2.0 and I was thinking that the includeFontPadding was false by default. However, that didn't work. So I tried to explicitly try and set it as follows:
textStyle = TextStyle(
platformStyle = PlatformTextStyle(
includeFontPadding = true
))
However, this didn't work either. So just wondering about the version 1.2.0 and removing the default padding.
Column(modifier = Modifier
.fillMaxWidth()
.background(color = Color.White)
.border(width = 2.dp, shape = RoundedCornerShape(4.dp), color = Color.LightGray)
.height(56.dp)) {
Text(
modifier = Modifier
.fillMaxWidth()
.padding(start = 16.dp),
text = "Gender (optional)")
TextField(
textStyle = TextStyle(
platformStyle = PlatformTextStyle(
includeFontPadding = true
)),
colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.White),
modifier = Modifier
.fillMaxWidth(),
value = rememberMobileCode,
onValueChange = { newMobileCode ->
rememberMobileCode = newMobileCode
},
trailingIcon = {
Icon(dropdownIcon, contentDescription = "dropdown icon", modifier = Modifier.clickable {
rememberIsExpanded = !rememberIsExpanded
})
},
singleLine = true,
readOnly = true
)
}
Starting with 1.2.0 you can use the BasicTextField + TextFieldDecorationBox.
You can set the trailingIcon and you can use the contentPadding attribute to change the paddings:
val colors = TextFieldDefaults.textFieldColors()
BasicTextField(
value = text,
onValueChange = { text = it },
modifier = Modifier
.fillMaxWidth()
.background(
color = colors.backgroundColor(enabled).value,
shape = RoundedCornerShape(8.dp)
),
interactionSource = interactionSource,
enabled = enabled,
singleLine = singleLine
) {
TextFieldDefaults.TextFieldDecorationBox(
value =text,
innerTextField = it,
singleLine = singleLine,
enabled = enabled,
visualTransformation = VisualTransformation.None,
label = { Text(text = "label") },
trailingIcon = {
IconButton(onClick = { }) {
Icon(imageVector = Icons.Filled.Clear, contentDescription = "Clear")
}
},
placeholder = { /* ... */ },
interactionSource = interactionSource,
// change the padding
contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
top = 2.dp, bottom = 2.dp
)
)
}
Hi this is my BasicTextField :
fun TextFieldRow(data: TextFieldData) {
val interactionSource = remember { MutableInteractionSource() }
val text by data.text.observeAsState("")
Row(
modifier = Modifier
.fillMaxWidth()
.padding(start = 20.dp, end = 20.dp, top = 17.dp)
) {
BasicTextField(
value = text,
onValueChange = {
data.text.value = it
},
modifier = Modifier
.padding(vertical = 6.dp)
.fillMaxWidth()
.indicatorLine(
enabled = true,
isError = false,
interactionSource = interactionSource,
colors = TextFieldDefaults.textFieldColors()
)
) { innerTextField ->
TextFieldDefaults.TextFieldDecorationBox(
value = text,
innerTextField = innerTextField,
enabled = true,
singleLine = true,
visualTransformation = VisualTransformation.None,
interactionSource = interactionSource,
contentPadding = TextFieldDefaults.textFieldWithLabelPadding(start = 4.dp),
label = { Text(text = data.label) }
)
}
}
}
I set the label in the TextFieldDecorationBox. It work well when I type some letters (the title goes up), but when I just take focus, the title stay in the middle. Any help ?
EDIT
I would like something like that, the reason why I use BasicTextField instead of TextField is because I want to manage padding.
You can change innerTextField like;
BasicTextField(
//
){ innerTextField ->
Box{
if(text.value.isEmpty())
Text(
text = "Title",
color = Color.Black.copy(alpha = 0.5f)
)
innerTextField()
}
}
I am trying to make a navigation bar but with the same look and color as my activity, using Jetpack Compose.
Below is the UI I want
I tried using TopAppBar but I am unable to get the same look and field, it looks like as below
Below is the code
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Surface(
modifier = Modifier
.fillMaxSize()
) {
MainView(logOut = signOut)
}
}
}
#Composable
fun NavigationBar(onIconClicked : () -> Unit,text: String){
TopAppBar(
title = {
Text(
text = text,
color = Color.Black,
fontSize = 48.sp
)
},
navigationIcon = {
Icon(
imageVector = Icons.Default.Close,
contentDescription = "Close",
modifier = Modifier.clickable(onClick = onIconClicked),
tint = Color.Black
)
},
// backgroundColor = /*...*/
)
}
#Composable
fun MainView(logOut: (doLogout: Boolean) -> Unit) {
Column(
Modifier
.background(colorResource(id = R.color.theme_light_blue))
.padding(40.dp, 0.dp)
.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(45.dp)
) {
NavigationBar(onIconClicked = { /*TODO*/ }, text = "settings")
Box(
Modifier
.fillMaxWidth()
) {
Text(
modifier = Modifier.align(Alignment.CenterStart),
text = "current user",
style = TextStyle(
colorResource(id = R.color.black),
fontSize = 32.sp
)
)
ClickableText(
modifier = Modifier.align(Alignment.CenterEnd),
style = TextStyle(
colorResource(id = R.color.black),
fontSize = 32.sp,
textAlign = TextAlign.End,
fontWeight = FontWeight.Bold
),
text = AnnotatedString("SIGN OUT"),
onClick = { logOut(true) }
)
}
var text by rememberSaveable { mutableStateOf("Text") }
Column(
Modifier
.fillMaxWidth()
.background(colorResource(id = R.color.theme_dark_blue))
) {
TextField(
value = text,
onValueChange = {
text = it
},
textStyle = TextStyle(
fontSize = 20.sp,
),
modifier = Modifier.fillMaxWidth(),
maxLines = 1,
singleLine = true,
colors = TextFieldDefaults.textFieldColors(
textColor = Color.Black,
backgroundColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent
),
)
}
}
I know I can simply add a Row above the MainView which contains the icon and a text field but is that a right way to achieve it or can we do something with TopAppBar
The following changes would get you the desired result.
In TopAppBar add the following attributes
backgroundColor = colorResource(id = R.color.theme_light_blue),
elevation = 0.dp,
modifier = Modifier.fillMaxWidth(),
As answered by #Abhimanyu adding backgroundColor worked but it was showing a darker shade which did not match the UI.
Below is a little tweak that worked.
In TopAppBar
backgroundColor = colorResource(id = R.color.theme_light_blue).copy(alpha = 0f),
elevation = 0.dp,
modifier = Modifier.fillMaxWidth()
I want to customize TextField composable in Jetpack Compose. I am trying to achieve the result in the image below, but somehow TextField has some default paddings which i couldn't find how to change values of. I want to remove default paddings and customize it
(The image on the right one is the result i achieved. I drew a border so that you can see it has padding, btw below that TextField are just Text composables, they aren't TextFields)
Below is my TextField code
TextField(
value = "",
onValueChange = {},
modifier = Modifier
.weight(1F)
.padding(0.dp)
.border(width = 1.dp, color = Color.Red),
placeholder = {
Text(
"5555 5555 5555 5555", style = TextStyle(
color = Color.Gray
)
)
},
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent
),
)
You can use BasicTextField, it's a plain text field without any decorations. Note that it doesn't have placeholder/hint too, you have to implement those by yourself if you need.
BasicTextField(value = "", onValueChange = {}, Modifier.fillMaxWidth())
Since 1.2.0-alpha04 it's much easier to make your BasicTextField look like TextField or OutlinedTextField. You can copy source code of TextField, which is pretty short since most of logic was moved into TextFieldDefaults.TextFieldDecorationBox, and pass the needed padding value into contentPadding parameter of TextFieldDefaults.TextFieldDecorationBox.
In the latest alpha release (androidx.compose.material:material:1.2.0-alpha04) they exposed TextFieldDefaults.TextFieldDecorationBox.
This is the implementation of the decorationBox composable used in the material TextField implementation.
You can use it as follows:
val interactionSource = remember { MutableInteractionSource() }
BasicTextField(
value = value,
onValueChange = onValueChange,
modifier = modifier,
visualTransformation = visualTransformation,
interactionSource = interactionSource,
enabled = enabled,
singleLine = singleLine,
) { innerTextField ->
TextFieldDefaults.TextFieldDecorationBox(
value = value,
visualTransformation = visualTransformation,
innerTextField = innerTextField,
singleLine = singleLine,
enabled = enabled,
interactionSource = interactionSource,
contentPadding = PaddingValues(0.dp), // this is how you can remove the padding
)
}
This will allow you to remove the padding but still get the rest of the features that come with TextField.
Remember to use the same MutableInteractionSource for both the BasicTextField and the TextFieldDefaults.TextFieldDecorationBox.
The official documentation I linked to above shows more examples if its usage.
Thank you all, i did use BasicTextField and achieved the result i wanted :)
#Composable
fun BottomOutlineTextField(placeholder: String, value: String, onValueChange: (String) -> Unit) {
BasicTextField(
modifier = Modifier.fillMaxWidth(),
value = value,
onValueChange = onValueChange,
textStyle = TextStyle(
color = if (isSystemInDarkTheme()) Color(0xFF969EBD) else Color.Gray
),
decorationBox = { innerTextField ->
Row(modifier = Modifier.fillMaxWidth()) {
if (value.isEmpty()) {
Text(
text = placeholder,
color = if (isSystemInDarkTheme()) Color(0xFF969EBD) else Color.Gray,
fontSize = 14.sp
)
}
}
innerTextField()
}
)
}
I wanted to cut off the 16.dp at the start. I managed to this in the following way:
BoxWithConstraints(modifier = Modifier
.clipToBounds()
) {
TextField(modifier = Modifier
.requiredWidth(maxWidth+16.dp)
.offset(x=(-8).dp))
}
I solved this problem by coping all source code from TextField and replace this lines of code :
val paddingToIcon = TextFieldPadding - HorizontalIconPadding
// val padding = Modifier.padding(
// start = if (leading != null) paddingToIcon else TextFieldPadding,
// end = if (trailing != null) paddingToIcon else TextFieldPadding
// )
val padding = Modifier.padding(
start = if (leading != null) paddingToIcon else 0.dp,
end = if (trailing != null) paddingToIcon else 0.dp
)
And this work great!
You can put your TextField in a Box and apply modifiers, e.g.
Box(
modifier = Modifier.background(
shape = RoundedCornerShape(percent = 10),
color = colorBackgroundGray
)
) {
TextField(
value = text,
onValueChange = onValueChange,
modifier = Modifier.fillMaxWidth().padding(8.dp, 0.dp, 0.dp, 0.dp)...
}
Using
...
decorationBox{
TextFieldDefaults.TextFieldDecorationBox(
....
)
required me to add the anotation #OptIn(ExperimentalMaterialApi::class) which seems to not be a good aproach for a release scenario.
Instead, I could get the result I as expecteing by the following implementation:
#Composable
fun Input(
text: TextFieldValue = TextFieldValue(),
onValueChanged: (TextFieldValue) -> Unit = { },
keyboardType: KeyboardType = KeyboardType.Text,
imeAction: ImeAction = ImeAction.Done,
isEnable: Boolean = true,
singleLine: Boolean = true,
shape: Shape = rounded,
autoCorrect: Boolean = false,
innerPadding: PaddingValues = PaddingValues(15.dp, 7.dp)
) {
val focusManager = LocalFocusManager.current
val fontSize = 16.sp
BasicTextField(
value = text,
onValueChange = onValueChanged,
Modifier
.clip(shape)
.border(1.dp, Color.Gray, shape)
.background(Color.White),
textStyle = TextStyle(color = Color.Black, fontSize = fontSize),
enabled = isEnable,
singleLine = singleLine,
keyboardOptions = KeyboardOptions(
KeyboardCapitalization.None,
autoCorrect,
keyboardType,
imeAction
),
keyboardActions = KeyboardActions(
onAny = {
focusManager.clearFocus()
}
),
decorationBox = {
Box(
modifier = Modifier.padding(innerPadding)
) {
if(text.text.isBlank()) {
Text(
text = "Search",
style = TextStyle(color = Color.Black, fontSize = fontSize)
)
}
it()
}
}
)
}
Hope it helps somebody.
It is so easy, just copy all TextField or OutlinedTextField functions and remove defaultMinSize then add contentPadding
After that, you can use it instead of main TextField or OutlinedTextField
for OutlinedTextField:
#Composable
fun BorderTextField(
value: String,
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
readOnly: Boolean = false,
textStyle: TextStyle = LocalTextStyle.current,
label: #Composable (() -> Unit)? = null,
placeholder: #Composable (() -> Unit)? = null,
leadingIcon: #Composable (() -> Unit)? = null,
trailingIcon: #Composable (() -> Unit)? = null,
isError: Boolean = false,
visualTransformation: VisualTransformation = VisualTransformation.None,
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
keyboardActions: KeyboardActions = KeyboardActions.Default,
singleLine: Boolean = false,
maxLines: Int = Int.MAX_VALUE,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
shape: Shape = MaterialTheme.shapes.small,
colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors()
) {
// If color is not provided via the text style, use content color as a default
val textColor = textStyle.color.takeOrElse {
colors.textColor(enabled).value
}
val mergedTextStyle = textStyle.merge(TextStyle(color = textColor))
#OptIn(ExperimentalMaterialApi::class)
BasicTextField(
value = value,
modifier = if (label != null) {
modifier
// Merge semantics at the beginning of the modifier chain to ensure padding is
// considered part of the text field.
.semantics(mergeDescendants = true) {}
} else {
modifier
}
.background(colors.backgroundColor(enabled).value, shape),
onValueChange = onValueChange,
enabled = enabled,
readOnly = readOnly,
textStyle = mergedTextStyle,
cursorBrush = SolidColor(colors.cursorColor(isError).value),
visualTransformation = visualTransformation,
keyboardOptions = keyboardOptions,
keyboardActions = keyboardActions,
interactionSource = interactionSource,
singleLine = singleLine,
maxLines = maxLines,
decorationBox = #Composable { innerTextField ->
TextFieldDefaults.OutlinedTextFieldDecorationBox(
value = value,
visualTransformation = visualTransformation,
innerTextField = innerTextField,
placeholder = placeholder,
label = label,
leadingIcon = leadingIcon,
trailingIcon = trailingIcon,
singleLine = singleLine,
enabled = enabled,
isError = isError,
interactionSource = interactionSource,
colors = colors,
contentPadding = TextFieldDefaults.outlinedTextFieldPadding(
start = 0.dp,
top = 0.dp,
end = 0.dp,
bottom = 0.dp
),
border = {
TextFieldDefaults.BorderBox(
enabled,
isError,
interactionSource,
colors,
shape
)
}
)
}
)
}
Actually that is innate, it follows material guidelines. If you wish to disable it, an alternative could be to set the height of the TextField explicitly, and matching it with the font size of the text. That way it will only extend till the text does. Another way would be to look at the source of TextField. You could just copy the source and make modifications to meet your requirements. The former sounds like an easy fix, however, the latter is no big deal as well. It is doable, and is a recommended practice to customize behavior for your needs. Also, just as a side note, I don't think it is a good idea to disable that padding. It was added to design guidelines since it seems pretty sensible and natural to have it. Sometimes we find some designs attractive when we think about them but they aren't as good when seen implemented.
I have a custom TextField which has no problem in the single TextField but when I create a Row() and put two custom TextField inside that, the divider is gone.
My custom text field: I created a BasicTextField and set a column BorderColumnState() to draw border when the text field is focus
#Composable
fun InputTextField(
modifier: Modifier = Modifier,
textFieldValue: TextFieldValue = TextFieldValue(""),
labelText: String,
withBorderModifier: Modifier = Modifier,
enabled: Boolean = true,
dividerColor: Color,
dividerThickness: Dp = 0.5.dp,
spacer: Dp,
textStyle: TextStyle,
keyboardOptions: KeyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),
isDropDown: Boolean = false,
valueChange: (String) -> Unit
) {
var value by remember { mutableStateOf(textFieldValue) }
//This is used if we want to use it in DropDown
if (textFieldValue.text.isNotEmpty() && isDropDown)
value = textFieldValue
///////////////////////////////////////////
val dividerState = remember {
mutableStateOf(true)
}
BasicTextField(
value = value,
onValueChange = {
value = it
valueChange.invoke(it.text)
},
modifier = Modifier
.onFocusChanged {
dividerState.value = !it.isFocused
},
decorationBox = { innerTextField ->
val mainModifier = if (!dividerState.value) {
withBorderModifier
} else {
modifier
}
BorderColumnState(
mainModifier,
labelText,
textStyle,
spacer,
innerTextField,
dividerState,
dividerThickness,
dividerColor
)
}, keyboardOptions = keyboardOptions, enabled = enabled
)
}
#Composable
private fun BorderColumnState(
modifier: Modifier,
labelText: String,
textStyle: TextStyle,
spacer: Dp,
innerTextField: #Composable () -> Unit,
dividerState: MutableState<Boolean>,
dividerThickness: Dp,
dividerColor: Color
) {
Column(
modifier = modifier.wrapContentHeight(),
horizontalAlignment = Alignment.Start
) {
Text(text = labelText, style = textStyle)
Spacer(modifier = Modifier.size(spacer))
innerTextField()
if (dividerState.value) {
Spacer(
modifier = modifier
.size(dividerThickness)
.background(dividerColor)
)
}
}
}
Usage custom text field: When I want to use two custom text field inside a Row, the divider is gone
#Composable
fun EditProfileScreen() {
val disableButtonState = remember {
mutableStateOf(false)
}
Box(modifier = Modifier.fillMaxSize()) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(start = 24.dp, end = 24.dp, top = 32.5.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
CountryCodeAndMobileNumber(
countryCodeList = listOf("+98"),
clientInfo,
disableButtonState,
viewModel
)
Spacer(modifier = Modifier.size(16.dp))
InputTextField(
modifier = Modifier.fillMaxWidth(),
textFieldValue = TextFieldValue("sasasasas#gmail.com"),
labelText = stringResource(R.string.email_address),
withBorderModifier = Modifier
.fillMaxWidth()
.border(
width = 1.dp,
shape = AppShapes.small,
color = AppColor.brandColor.BLUE_DE_FRANCE
)
.padding(4.dp),
textStyle = AppFont.PoppinsTypography.caption,
dividerColor = AppColor.neutralColor.SILVER_CHALICE,
spacer = 8.dp,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email)
) {}
}
}
}
#Composable
private fun CountryCodeAndMobileNumber(
countryCodeList: List<String>,
clientInfo: Client,
) {
var mobileClientInfo = clientInfo
Row(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
) {
CountryCodeDropDown(
list = countryCodeList,
label = stringResource(
id = R.string.country
),
dividerColor = AppColor.neutralColor.SILVER_CHALICE,
enabled = false
)
Spacer(modifier = Modifier.size(4.dp))
InputTextField(
textFieldValue = TextFieldValue("111111"),
labelText = stringResource(R.string.mobile_number),
withBorderModifier = Modifier
.wrapContentWidth()
.border(
width = 1.dp,
shape = AppShapes.small,
color = AppColor.brandColor.BLUE_DE_FRANCE
)
.padding(4.dp),
enabled = false,
textStyle = AppFont.PoppinsTypography.caption,
dividerColor = AppColor.neutralColor.SILVER_CHALICE,
spacer = 8.dp,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone)
) {
}
}
}
How can I solve this problem?
val mainModifier = if (!dividerState.value) {
withBorderModifier
} else {
modifier
}
You can not assign modifier as a variable. that's why it's not working.
Edit your code like this:
BorderColumnState(
Modifier.then(if (!dividerState.value) withBorderModifier else modifier),
labelText,
textStyle,
spacer,
innerTextField,
dividerState,
dividerThickness,
dividerColor
)
I checked the code on my IDE. Why are you setting the size for the divider?
I changed the spacer to this and that's working fine.
Spacer(
modifier = Modifier
.fillMaxWidth()
.height(dividerThickness)
.background(dividerColor)
)