I am new to jetpack compose, I want my app to load the Exo two light font so I override the material typography like this,
val exoTwoLight = FontFamily(
Font(R.font.exo_two_light),
Font(R.font.exo_two_light, FontWeight.Bold)
)
val exoTwoLightTypography = Typography(
h1 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Bold,
fontSize = 96.sp
),
h2 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Bold,
fontSize = 60.sp
),
h3 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Bold,
fontSize = 48.sp
),
h4 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Bold,
fontSize = 34.sp
),
h5 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Bold,
fontSize = 20.sp
),
h6 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Bold,
fontSize = 12.sp
),
subtitle1 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Normal,
fontSize = 16.sp
),
subtitle2 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Medium,
fontSize = 14.sp
),
body1 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Normal,
fontSize = 16.sp
),
body2 = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Normal,
fontSize = 14.sp
),
button = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Medium,
fontSize = 14.sp,
),
caption = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Normal,
fontSize = 12.sp,
),
overline = TextStyle(
fontFamily = exoTwoLight,
fontWeight = FontWeight.Normal,
fontSize = 10.sp,
)
)
Now when I try to load an input field in the app I can see that placeholder and leading icons are not aligned at all
I tried to customize the placeholder as it is required as a composable
By customization, I mean adding top padding of 2/4 dp to the placeholder
Row(modifier = Modifier.padding(top=10.dp)) {
OutlinedTextField(
leadingIcon = {
Icon(
painter = painterResource(id = R.drawable.gallery_icon),
contentDescription = "",
tint = colorResource(R.color.teal_200),
modifier = Modifier.clickable {
}
)
},
placeholder = {
Text(
text = "Placeholder",
style = MaterialTheme.typography.button,
modifier = Modifier.padding(top = 3.dp)
)
},
modifier = Modifier.fillMaxWidth(),
readOnly = false,
value = sampleValue,
onValueChange = {
sampleValue = it
},
maxLines = 1,
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
)
}
It only solves the issue for the placeholder but values seem to be misaligned
This is the complete code
var sampleValue by remember {
mutableStateOf("")
}
Column{
Row(modifier = Modifier.padding(top=10.dp)){
OutlinedTextField(
leadingIcon = {
if (true) {
Icon(
painter = painterResource(id = R.drawable.capture_more_images),
contentDescription = "",
tint = colorResource(R.color.teal_200),
modifier = Modifier.clickable {
}
)
} else {
Icon(
painter = painterResource(id = R.drawable.capture_more_images),
contentDescription = "",
tint = colorResource(R.color.disabled)
)
}
},
placeholder = {
Row(
modifier = Modifier.height(24.dp),
verticalAlignment = Alignment.CenterVertically
){
Text(
text = "Placeholder",
style = MaterialTheme.typography.button
)
}
},
modifier = Modifier.fillMaxWidth(),
readOnly = false,
value = sampleValue,
onValueChange = {
sampleValue = it
},
maxLines = 1,
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
)
}
Row(modifier = Modifier.padding(top=10.dp)) {
OutlinedTextField(
leadingIcon = {
Icon(
painter = painterResource(id = R.drawable.gallery_icon),
contentDescription = "",
tint = colorResource(R.color.teal_200),
modifier = Modifier.clickable {
}
)
},
placeholder = {
Text(
text = "Placeholder",
style = MaterialTheme.typography.button,
modifier = Modifier.padding(top = 3.dp)
)
},
modifier = Modifier.fillMaxWidth(),
readOnly = false,
value = sampleValue,
onValueChange = {
sampleValue = it
},
maxLines = 1,
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
)
}
Row(modifier = Modifier.padding(top=10.dp)) {
OutlinedTextField(
placeholder = {
Text(
text = "Placeholder",
style = MaterialTheme.typography.button,
)
},
modifier = Modifier.fillMaxWidth(),
value = sampleValue,
onValueChange = {
sampleValue = it
}
)
}
}
I want that placeholder to be aligned vertically centered ( without giving any top padding ) with the leading icon what is the solution?
The solution to this is to set the singleLine property of the TextField to true. Like this:
TextField(
singleLine = true,
placeholder = {
Text(text = "Search for reminders")
},
leadingIcon = {
Icon(
painter = painterResource(id = R.drawable.search_icon),
tint = MaterialTheme.colorScheme.outline,
contentDescription = "Back button"
)
}
)
Many icons have built-in padding on one or more sides. To compensate for this, you can adjust the icon's position using the offset modifier. Set it some positive or negative value:
placeholder = {
Row(
modifier = Modifier.height(24.dp).offset(y = 5.dp),
verticalAlignment = Alignment.CenterVertically
){
Text(
text = "Placeholder",
style = MaterialTheme.typography.button
)
}
}
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)
)
}
}
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:
How I can remove underline from my TextField? I don't want to use different TextField()
val style = TextStyle(
color = MaterialTheme.colors.primary,
fontSize = 16.sp,
fontWeight = FontWeight.SemiBold,
textDecoration = TextDecoration.None,
textAlign = TextAlign.Center
)
BasicTextField(
modifier = Modifier
.fillMaxWidth()
.align(Alignment.Center),
textStyle = style,
value = value,
onValueChange = { value = it },
singleLine = true
)
#Composable
fun TopAppBar(
name: String,
modifier: Modifier = Modifier
) {
Row(
modifier = modifier
.fillMaxWidth()
.padding(20.dp, 0.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Icon(
imageVector = Icons.Default.ArrowBack,
contentDescription = "Back",
tint = Color.Black,
modifier = Modifier.size(24.dp)
)
Text(
text = name,
overflow = TextOverflow.Ellipsis,
fontWeight = FontWeight.Bold,
fontSize = 20.sp,
maxLines = 1
)
Row {
Icon(
painter = painterResource(id = R.drawable.ic_bell),
contentDescription = null,
tint = Color.Black,
modifier = Modifier
.padding(8.dp, 8.dp)
.size(24.dp)
)
Icon(
painter = painterResource(id = R.drawable.ic_dotmenu),
contentDescription = null,
tint = Color.Black,
modifier = Modifier
.padding(8.dp, 8.dp)
.size(24.dp)
)
}
}
}
You have to set the weight and the fill to false:
Text(
modifier = Modifier.weight(weight = 1f, fill = false),
text = name,
overflow = TextOverflow.Ellipsis,
fontWeight = FontWeight.Bold,
fontSize = 20.sp,
maxLines = 1
)
You can add the weight modifier to the Text composable
Row(){
Icon()
Text(
text = ".....",
overflow = TextOverflow.Ellipsis,
fontWeight = FontWeight.Bold,
fontSize = 20.sp,
maxLines = 1,
modifier = Modifier.weight(1f)
)
//...
}
.