I have a Jetpack Compose (Beta04) BasicTextField (with decorationBox). How can I clear the focus?
I have tried with focusRequester but this doesn't works:
val focusRequester = remember { FocusRequester() }
// ...
BasicTextField(modifier = Modifier.focusRequester(focusRequester), /* ... */)
// ...
placesFocusRequester.freeFocus()
To clear focus from the currently focused component you can use the FocusManager.clearFocus method:
val focusRequester = remember { FocusRequester() }
val focusManager = LocalFocusManager.current
var value by rememberSaveable { mutableStateOf("initial value") }
BasicTextField(
value = value,
onValueChange = { value = it },
decorationBox = { innerTextField ->
Row(
Modifier
.background(Color.LightGray, RoundedCornerShape(percent = 30))
.padding(16.dp)
.focusRequester(focusRequester)
) {
//...
innerTextField()
}
}
)
Button(onClick = { focusManager.clearFocus() }) {
Text("Clear focus")
}
#Composable
fun InputEditText(
value: String,
modifier: Modifier,
onValueChange: (String) -> Unit,
textStyle: TextStyle, hintTextStyle:
TextStyle, placeHolderString: String = "",
enabled: Boolean = true, readOnly: Boolean = false,
singleLine: Boolean = false,
maxLines: Int = Int.MAX_VALUE,
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
keyboardActions: KeyboardActions = KeyboardActions.Default,
cursorColor: Color = Color.Black,
imageVector: ImageVector,
iconTint: Color = Color.Gray,
backColor: Color = Color.White,
borderColor: Color = Color.LightGray,
showPassword: Boolean = false,
backGroundShape: Shape = RectangleShape,
passwordVisible: MutableState,
error: String,
howError: Boolean = false
) {
BasicTextField(
visualTransformation = if (showPassword) {
if (!passwordVisible.value) VisualTransformation.None else PasswordVisualTransformation()
} else { VisualTransformation.None },
value = value,
onValueChange = onValueChange,
modifier = modifier,
textStyle = textStyle,
decorationBox = { innerTextField ->
Column {
Row(
modifier = Modifier
.background(backColor, backGroundShape)
.border( width = 1.dp, color = if (showError) Color.Red else borderColor, backGroundShape )
.padding(14.dp)
.fillMaxWidth(),
horizontalArrangement = Arrangement.Start,
verticalAlignment = CenterVertically
) {
Icon(
imageVector = imageVector,
contentDescription = null,
tint = iconTint,
modifier = Modifier.padding(end = 6.dp)
)
if (value.isEmpty()) {
Text(
text = placeHolderString,
color = hintTextStyle.color,
fontSize = hintTextStyle.fontSize,
fontStyle = hintTextStyle.fontStyle,
fontFamily = hintTextStyle.fontFamily,
textAlign = hintTextStyle.textAlign,
fontWeight = hintTextStyle.fontWeight,
style = hintTextStyle
)
}
innerTextField()
if (showPassword) {
Column(
modifier = Modifier.fillMaxWidth(),
verticalArrangement = Arrangement.Bottom,
horizontalAlignment = Alignment.End
) {
Image(
painter = painterResource(
id = if (!passwordVisible.value)
R.drawable.ic_baseline_visibility_off_24
else R.drawable.ic_baseline_visibility_24
),
contentDescription = "Cart button icon",
modifier = Modifier
.size(24.dp)
.clickable {
passwordVisible.value = !passwordVisible.value
},
colorFilter = ColorFilter.tint(color = iconTint)
)
}
}
if (showError) {
Column(
modifier = Modifier.fillMaxWidth(),
verticalArrangement = Arrangement.Bottom,
horizontalAlignment = Alignment.End
) {
Icon(
imageVector = Icons.Filled.Info,
contentDescription = null,
tint = Color.Red,
modifier = Modifier.padding(end = 6.dp)
)
}
}
}
if (showError) {
Row(modifier = Modifier.fillMaxWidth()) {
Text(
text = error,
modifier = Modifier.fillMaxWidth(),
style = TextStyle(
color = Color.Red,
fontFamily = FontFamily.SansSerif,
fontSize = 11.sp,
textAlign = TextAlign.Start,
)
)
}
}
}
},
enabled = enabled,
readOnly = readOnly,
singleLine = singleLine,
maxLines = maxLines,
keyboardOptions = keyboardOptions,
keyboardActions = keyboardActions,
cursorBrush = SolidColor(cursorColor)
)
}
Related
I have created one function called TextInput that contained TextField
#Composable
fun TextInput(
inputType: InputType
) {
var value by remember { mutableStateOf("") }
TextField(
modifier = Modifier.clip(RoundedCornerShape(30.dp)),
value = value,
onValueChange = { value = it },
leadingIcon = { Icon(imageVector = inputType.icon, null) },
label = { Text(text = inputType.label) },
colors = TextFieldDefaults.textFieldColors(
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent
),
singleLine = true,
keyboardOptions = inputType.keyboardOptions,
visualTransformation = inputType.visualTransformation,
)
}
Now on click of the button SIGN UP\SIGN IN I want to access the value and show success/error based on validation.
Button(
onClick = {
//here
},
modifier = Modifier
.padding(top = 30.dp)
.width(200.dp),
shape = RoundedCornerShape(20.dp)
) {
Text(
text = "SIGN IN",
)
}
==================================================
Button(
onClick = {
//here
},
modifier = Modifier
.padding(top = 5.dp)
.width(200.dp),
shape = RoundedCornerShape(20.dp)
) {
Text(text = "SIGN UP")
}
If you want to see whole code to understand what i mean exactly.
#Composable
fun Sign_in_up_Screen() {
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(
painter = painterResource(R.drawable.login),
contentDescription = "",
modifier = Modifier
.background(Color.Companion.Red)
.fillMaxWidth()
)
TopTextButton()
}
}
#Composable
fun Login_Screen() {
val context = LocalContext.current
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(20.dp),
modifier = Modifier.fillMaxSize()
) {
TextInput(InputType.Email)
TextInput(InputType.Password)
Button(
onClick = {
//here
},
modifier = Modifier
.padding(top = 30.dp)
.width(200.dp),
shape = RoundedCornerShape(20.dp)
) {
Text(
text = "SIGN IN",
)
}
}
}
#Composable
fun Signup_Screen() {
val context = LocalContext.current
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(20.dp),
modifier = Modifier.fillMaxSize()
) {
TextInput(InputType.FullName)
TextInput(InputType.Email)
TextInput(InputType.Password)
TextInput(InputType.ConfirmPassword)
Button(
onClick = {
//here
},
modifier = Modifier
.padding(top = 5.dp)
.width(200.dp),
shape = RoundedCornerShape(20.dp)
) {
Text(text = "SIGN UP")
}
}
}
sealed class InputType(
val label: String,
val icon: ImageVector,
val keyboardOptions: KeyboardOptions,
val visualTransformation: VisualTransformation
) {
object FullName : InputType(
label = "Full Name",
icon = Icons.Default.Person,
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
visualTransformation = VisualTransformation.None
)
object Email : InputType(
label = "E-mail",
icon = Icons.Default.Email,
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
visualTransformation = VisualTransformation.None
)
object Password : InputType(
label = "Password",
icon = Icons.Default.Lock,
keyboardOptions = KeyboardOptions(
imeAction = ImeAction.Done,
keyboardType = KeyboardType.Password
),
visualTransformation = PasswordVisualTransformation()
)
object ConfirmPassword : InputType(
label = "Confirm Password",
icon = Icons.Default.Lock,
keyboardOptions = KeyboardOptions(
imeAction = ImeAction.Done,
keyboardType = KeyboardType.Password
),
visualTransformation = PasswordVisualTransformation()
)
}
#Composable
fun TextInput(
inputType: InputType
) {
var value by remember { mutableStateOf("") }
TextField(
modifier = Modifier.clip(RoundedCornerShape(30.dp)),
value = value,
onValueChange = { value = it },
leadingIcon = { Icon(imageVector = inputType.icon, null) },
label = { Text(text = inputType.label) },
colors = TextFieldDefaults.textFieldColors(
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent
),
singleLine = true,
keyboardOptions = inputType.keyboardOptions,
visualTransformation = inputType.visualTransformation,
)
}
#Composable
fun TopTextButton() {
var screen by remember { mutableStateOf(false) }
Row(
modifier = Modifier.padding(bottom = 40.dp),
) {
TextButton( onClick = {
if (screen)
screen = !screen
}) {
Text(text = "Sign in")
}
Spacer(Modifier.width(145.dp))
TextButton(onClick = {
if (!screen)
screen = !screen
}) {
Text(text = "Sign up")
}
}
if (!screen){
Login_Screen()
}
if (screen) {
Signup_Screen()
}
}
Is this code correct or should I put a function for each {Textfield}?
So each text field has its own state
I am beginner android studio programming😅
You can add onValueChange param into TextInput like this;
#Composable
fun TextInput(
inputType: InputType,
onValueChange: (String) -> Unit
) {
TextField(
//
onValueChange = {
onValueChange(it)
value = it
}
//
}
print your value;
TextInput(InputType.Email){ textFieldValue ->
println(textFieldValue)
}
Below is the code for custom TextField. I have used TextField in Fragment and DialogFragment. I am having some issues while using it in DialogFragment. The phone keyboard opens when I click on the TextField below when it is used in Fragment. But even though it focuses on the TextField, the keyboard doesn't pop up when it is used in DialogFragment.
fun MyTextFiled(
search: (String) -> Unit,
query: String?
) {
var state by rememberSaveable { mutableStateOf(query) }
Card(
shape = RoundedCornerShape(dimensionResource(id = R.dimen.padding_5dp)),
) {
Row(
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.height(36.dp).background(colorResource(id = R.color.background_wallet_searchView)),
) {
Icon(
painter = painterResource(id = R.drawable.ic_new_search),
contentDescription = null,
modifier = Modifier
.size(20.dp)
.padding(start = dimensionResource(id = R.dimen.padding_5dp)),
tint = colorResource(id = R.color.text_secondary),
)
BasicTextField(
value = state?:"",
onValueChange = {
search.invoke(it)
state = it
},
maxLines = 1,
modifier = Modifier
.weight(1F)
.align(Alignment.CenterVertically)
.padding(horizontal = dimensionResource(id = R.dimen.padding_5dp)),
singleLine = true,
textStyle = TextStyle(
color = colorResource(id = R.color.text_secondary),
fontSize = 13.sp,
fontStyle = MaterialTheme.typography.overline.fontStyle
),
keyboardOptions = KeyboardOptions.Default.copy(
capitalization = KeyboardCapitalization.Sentences,
autoCorrect = true,
keyboardType = KeyboardType.Number,
imeAction = ImeAction.Search
),
decorationBox = { innerTextField ->
if (state.isNullOrEmpty()) {
Text(
text = stringResource(id = R.string.search),
style = MaterialTheme.typography.overline,
fontSize = 12.sp,
color = colorResource(id = R.color.text_secondary)
)
}
innerTextField()
}
)
if (!state.isNullOrEmpty())
Icon(
painter = painterResource(id = R.drawable.round_close_24),
contentDescription = null,
modifier = Modifier
.clickable {
state = ""
search.invoke("")
}
.size(20.dp)
.padding(end = dimensionResource(id = R.dimen.padding_5dp))
)
}
}
}
MessageScreen:
#Composable
fun MessageScreen(
messagesViewModel: MessagesViewModel,
navHostController: NavController,
sharedViewModel: SharedViewModel
) {
val listState = rememberLazyListState()
// Set State of Message Screen
val receiverProfile = sharedViewModel.receiverProfile
val senderProfile = sharedViewModel.senderProfile
Log.d("TAG", "MessageScreen: RECEIVER = $receiverProfile SENDER = $senderProfile")
// Get All Messages from Firebase
messagesViewModel.getAllMessageFromFirebase(receiverProfile, senderProfile)
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.SpaceBetween,
) {
TopBar(
title = receiverProfile!!.displayName,
buttonIcon = painterResource(id = R.drawable.ic_back_arrow_back_24)
) {
navHostController.popBackStack()
}
Box(modifier = Modifier.weight(10f)) {
LazyColumn(
modifier = Modifier
.fillMaxWidth(),
verticalArrangement = Arrangement.Top,
state = listState
) {
items(items = messagesViewModel.allMessagesState) { message ->
MessageCard(message = message, sharedViewModel = sharedViewModel)
Log.d("TAG 14", message.toString())
}
CoroutineScope(Dispatchers.Main).launch {
if (messagesViewModel.allMessagesState.isNotEmpty()) {
listState.scrollToItem(messagesViewModel.allMessagesState.size - 1)
}
}
}
}
Box(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp), contentAlignment = Alignment.Center
) {
SendMessageCard(messagesViewModel, sharedViewModel)
}
}
}
`
**SendMessageCard :-**
#Composable
fun SendMessageCard(messagesViewModel: MessagesViewModel, sharedViewModel: SharedViewModel) {
Card(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight(),
elevation = 8.dp
) {
Row(
modifier = Modifier,
horizontalArrangement = Arrangement.SpaceAround
) {
OutlinedTextField(
value = messagesViewModel.textState.value,
onValueChange = {
messagesViewModel.textState.value = it
},
modifier = Modifier.fillMaxWidth(),
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),
trailingIcon = {
IconButton(onClick = {
messagesViewModel.sendMessage(
message = Message(
messagesViewModel.textState.value,
Timestamp.now(),
sharedViewModel.senderProfile!!.mailId
),
sharedViewModel = sharedViewModel
)
}) {
Icon(imageVector = Icons.Filled.Send, contentDescription = "Send Message")
}
},
textStyle = TextStyle(fontSize = 20.sp),
label = {
Text(text = "Type Message")
}
)
}
}
}
I figured out the solution to my problem. I used Dialog Compose inside Dialog Fragment and the keyboard popped up.
I'm trying to put a drop down for US states that uses a TextField and a TextField in a Row and the second TextField (zip) does not show up. What am I doing wrong?
Here is how I'm declaring the row:
Row (Modifier.fillMaxWidth()) {
StateSelection(
onFormChanged = onFormChanged,
selectedLocation = selectedLocation,
label = "State"
)
Spacer(modifier = Modifier.width(8.dp))
ShippingField(
modifier = modifier,
onFormChanged = onFormChanged,
formType = FormType.SHIPPING_ZIP,
label = "Zip",
valueField = selectedLocation.zipCode
)
}
StatesDropDown:
#Composable
fun StateSelection(
onFormChanged: (FormType, String) -> Unit,
selectedLocation: Address,
label: String
) {
// State variables
val statesMap = AddressUtils.mapOfAmericanStatesToValue
var stateName: String by remember { mutableStateOf(selectedLocation.shippingState) }
var expanded by remember { mutableStateOf(false)}
val focusManager = LocalFocusManager.current
Box(contentAlignment = Alignment.CenterStart) {
Row(
Modifier
.padding(vertical = 8.dp)
.clickable {
expanded = !expanded
}
.padding(8.dp),
horizontalArrangement = Arrangement.Start,
verticalAlignment = Alignment.CenterVertically
) { // Anchor view
TextField(
modifier = Modifier
.fillMaxWidth(),
value = stateName,
onValueChange = {
onFormChanged(FormType.SHIPPING_COUNTRY, it)
},
label = { Text(text = label) },
textStyle = MaterialTheme.typography.subtitle1,
singleLine = true,
trailingIcon = {
IconButton(onClick = { expanded = true }) {
Icon(imageVector = Icons.Filled.ArrowDropDown, contentDescription = "")
}
},
keyboardActions = KeyboardActions(onNext = { focusManager.moveFocus(FocusDirection.Down) }),
keyboardOptions = KeyboardOptions(
imeAction = ImeAction.Done,
keyboardType = KeyboardType.Text
),
colors = TextFieldDefaults.textFieldColors(
cursorColor = MaterialTheme.colors.secondary,
textColor = MaterialTheme.colors.onPrimary,
focusedIndicatorColor = MaterialTheme.colors.secondary,
backgroundColor = MaterialTheme.colors.secondaryVariant
)
) // state name label
DropdownMenu(expanded = expanded, onDismissRequest = {
expanded = false
}) {
statesMap.asIterable().iterator().forEach {
val (key, value) = it
DropdownMenuItem(onClick = {
expanded = false
stateName = key
onFormChanged(FormType.SHIPPING_STATE, key)
},
modifier = Modifier.fillMaxWidth()) {
Text(text = key)
}
}
}
}
}
}
ZipCode:
#Composable
fun ShippingField(
modifier: Modifier,
onFormChanged: (FormType, String) -> Unit,
formType: FormType,
label: String,
valueField: String
) {
val focusManager = LocalFocusManager.current
var state by rememberSaveable {
mutableStateOf(valueField)
}
TextField(modifier = modifier
.background(MaterialTheme.colors.primaryVariant)
.fillMaxWidth(),
value = state,
onValueChange = {
state = it
onFormChanged(formType, it)
},
label = { Text(text = label) },
textStyle = MaterialTheme.typography.subtitle1,
singleLine = true,
keyboardActions = KeyboardActions(onNext = { focusManager.moveFocus(FocusDirection.Down) }),
keyboardOptions = KeyboardOptions(
imeAction = ImeAction.Next,
keyboardType = KeyboardType.Text
),
colors = TextFieldDefaults.textFieldColors(
cursorColor = MaterialTheme.colors.secondary,
textColor = MaterialTheme.colors.onPrimary,
focusedIndicatorColor = MaterialTheme.colors.secondary,
backgroundColor = MaterialTheme.colors.secondaryVariant
)
)
}
Row (Modifier.fillMaxWidth()) {
StateSelection(
modifier = Modifier.weight(1f)
...
)
Spacer(modifier = Modifier.width(8.dp))
ShippingField(
modifier = Modifier.weight(1f),
...
)
}
You should do it like above, and then pass the modifier to your composables below. Weight distributes and fills max width evenly on your composables
You have to remove the modifier = Modifier.fillMaxWidth() in the 1st TextField in the StatesDropDown composable.
I have the following page on which I'm trying to display a list of saved cards with the ability to add a new one. The last item in the column is an expandable one so that when clicked, the user can see a form for filling out card info in order to add a new card. This was working just fine yesterday, but I can't figure out why it's not working today.
The actual CardItem elements receive clicks just fine but the custom expandable one does not and neither does the ShadowWrapper parent nor the RaisedCard one.
Cards screen:
private data class CreditCard(val type: CreditCardTypes, val lastDigits: String)
#Composable
fun CardSelectionScreen(onCardSelected: () -> Unit) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.padding(vertical = 24.dp, horizontal = 16.dp)
.verticalScroll(rememberScrollState())
) {
var selectedCardIndex by remember { mutableStateOf(0) }
val cardList = listOf(
CreditCard(CreditCardTypes.MASTERCARD, "3429"),
CreditCard(CreditCardTypes.VISA, "3429"),
CreditCard(CreditCardTypes.MASTERCARD, "3429")
)
TopBarPadding(true)
Spacer(modifier = Modifier.height(10.dp))
RaisedCard() {
Column(
modifier = Modifier.padding(vertical = 20.dp),
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
Text(
text = stringResource(id = R.string.please_select_a_card),
fontSize = 16.sp,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Start
)
Spacer(modifier = Modifier.height(9.dp))
for (i in cardList.indices) {
CreditCardItem(cardList[i],
isSelected = selectedCardIndex == i, onItemSelected = { ->
selectedCardIndex = i
})
}
ShadowWrapper( // This is the item's layout
cardElevation = 1.dp,
shadowElevation = 3.dp
) {
Column(
modifier = Modifier
.animateContentSize()
) {
Row(
modifier = Modifier
.fillMaxWidth()
.clip(RoundedCornerShape(6.dp))
.background(
if (selectedCardIndex == cardList.size) colorResource(
id = R.color.bottom_modal_drawer_background
) else Color.White
)
.padding(horizontal = 16.dp, vertical = 16.dp)
.clickable(
indication = null,
interactionSource = MutableInteractionSource()
) { // this does not register at all, tried with Log.d
selectedCardIndex = cardList.size
},
verticalAlignment = Alignment.CenterVertically
) {
Image(
painter = painterResource(id = R.drawable.ic_add_credit_card),
contentDescription = "Add credit card icon"
)
Spacer(modifier = Modifier.width(13.dp))
Text(
stringResource(id = R.string.new_card_addition),
textAlign = TextAlign.Start,
fontSize = 16.sp,
fontWeight = FontWeight.Normal,
color = colorResource(id = R.color.Orange_100)
)
}
if (selectedCardIndex == cardList.size) {
Column(
modifier = Modifier.padding(
horizontal = 16.dp
)
) {
Spacer(modifier = Modifier.padding(22.fixedDp()))
Text(
text = LocalContext.current.getString(R.string.add_credit_card_top_msg),
fontSize = 16.sp,
fontWeight = FontWeight.Bold,
color = colorResource(id = R.color.Black_100)
)
Spacer(modifier = Modifier.padding(10.dp))
InputField(label = LocalContext.current.getString(R.string.owner_name))
Spacer(modifier = Modifier.padding(18.fixedDp()))
InputField(label = LocalContext.current.getString(R.string.credit_card_number))
Spacer(modifier = Modifier.padding(18.fixedDp()))
Row() {
Box(
modifier = Modifier
.weight(1.5f)
) {
InputField(label = LocalContext.current.getString(R.string.expiration_date))
}
Spacer(modifier = Modifier.padding(6.fixedDp()))
Box(
modifier = Modifier
.weight(1f)
) {
InputField(
label = LocalContext.current.getString(R.string.cvv),
isPassword = true,
placeholder = ""
)
}
}
Spacer(modifier = Modifier.height(34.fixedDp()))
Row() {
MyCheckbox(
modifier = Modifier.padding(top = 3.dp),
isCheckedInitially = true
)
Spacer(modifier = Modifier.width(13.dp))
Text(
stringResource(id = R.string.save_card_for_future_transactions),
fontSize = 14.sp,
fontWeight = FontWeight.Normal,
color = colorResource(id = R.color.Black_100)
)
}
Spacer(modifier = Modifier.padding(22.fixedDp()))
}
}
}
}
Spacer(modifier = Modifier.height(2.dp))
}
}
Spacer(modifier = Modifier.height(32.dp))
MyButton(
text = stringResource(id = R.string.continue_text),
MyButtonType.PRIMARY,
onClick = { onCardSelected() }
)
Spacer(modifier = Modifier.height(20.dp))
AcceptedCardsFooter()
BottomBarPadding(true)
}
}
#Composable
private fun CreditCardItem(
cardDetails: CreditCard,
isSelected: Boolean,
onItemSelected: () -> Unit
) {
ShadowWrapper(cardElevation = 1.dp, shadowElevation = 3.dp) {
Row(
modifier = Modifier
.fillMaxWidth()
.clip(RoundedCornerShape(6.dp))
.background(if (isSelected) colorResource(id = R.color.bottom_modal_drawer_background) else Color.White)
.padding(horizontal = 16.dp, vertical = 15.dp)
.clickable(indication = null, interactionSource = MutableInteractionSource()) {
onItemSelected()
},
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Row(verticalAlignment = Alignment.CenterVertically) {
MyRadioButton(label = "", selected = isSelected)
Spacer(modifier = Modifier.width(16.dp))
Box(
modifier = Modifier
.width(43.dp)
.height(33.dp)
.clip(RoundedCornerShape(4.dp))
.background(colorResource(id = R.color.Grey_10))
.padding(horizontal = 6.dp, vertical = 7.dp)
) {
Image(
painter = painterResource(id = cardDetails.type.icon),
contentDescription = "",
modifier = Modifier.align(Alignment.Center)
)
}
Spacer(modifier = Modifier.padding(8.fixedDp()))
Text(
text = "${cardDetails.type.prefix}****${cardDetails.lastDigits}",
fontSize = 16.sp,
color = colorResource(id = R.color.Black_100)
)
}
}
}
}
RaisedCard.kt:
#Composable
fun RaisedCard(
modifier: Modifier = Modifier,
mainBody: #Composable () -> Unit
) {
Card(
shape = RoundedCornerShape(13.dp),
elevation = 10.dp,
modifier = modifier
.fillMaxWidth()
.wrapContentHeight()
) {
Column(
modifier = Modifier
.background(Color.White)
.padding(horizontal = 16.dp)
) {
mainBody()
}
}
}
ShadowWrapper.kt:
#Composable
fun ShadowWrapper(
modifier: Modifier = Modifier,
border: BorderStroke = BorderStroke(0.dp, Color.Transparent),
cardElevation: Dp = 2.dp,
shadowElevation: Dp = 1.dp,
shadowShapeRadius: Dp = 6.dp,
content: #Composable () -> Unit,
) {
Card(
elevation = cardElevation,
border = border,
shape = RoundedCornerShape(shadowShapeRadius),
modifier = modifier.shadow(shadowElevation, RoundedCornerShape(shadowShapeRadius)).wrapContentHeight()
) {
content()
}
}
I wasn't able to reproduce your issue, probably because other parts of your application are triggering additional recompositions. However the cause is most likely that you forget to remember your MutableInteractionSources.
Like this:
otherModifiers.clickable(
indication = null,
interactionSource = remember { MutableInteractionSource() }
) { // this does not register at all, tried with Log.d
selectedCardIndex = cardList.size
}
If you do not wrap MutableInteractionSource in a remember, a new instance is created on every recomposition, so state like a previous touch events is lost
I'm trying to use BasicTextField with TextAlignment.End for RTL. it's my code:
val textState = remember { mutableStateOf(TextFieldValue("")) }
val shape = RoundedCornerShape(CornerSize(4.dp))
BasicTextField(
value = textState.value,
onValueChange = { newText -> textState.value = newText },
textStyle = LocalTextStyle.current.copy(
color = ColorPrimaryDarkText,
fontWeight = FontWeight.Medium,
textAlign = TextAlign.End,
fontSize = 14.sp,
),
maxLines = 1,
singleLine = true,
modifier = Modifier
.fillMaxWidth()
.padding(32.dp, 0.dp)
.clip(shape)
.background(color = Color.White),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Done
),
decorationBox = { innerTextField ->
Row(
modifier = Modifier
.fillMaxWidth()
.background(Color.White, shape)
.padding(8.dp),
) {
if (textState.value.text.isEmpty()) {
Text(
text = "hint",
textAlign = TextAlign.End,
fontWeight = FontWeight.Medium,
modifier = Modifier.fillMaxWidth(),
fontSize = 14.sp,
)
} else {
innerTextField()
}
}
}
)
it's OK when it's empty but it's not working well when you try to type anything (it's starting to type from center):
Remove the textAlign = TextAlign.End and use something like:
CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl ) {
BasicTextField( /* your code */)
}
Otherwise if you want to use your code add horizontalArrangement = Arrangement.End in Row in the decorationBox parameter:
decorationBox = { innerTextField ->
Row(
modifier = Modifier
.fillMaxWidth()
.background(Color.White, shape)
.padding(8.dp),
horizontalArrangement = Arrangement.End){
//your code
}