Jetpack Compose - TextOverflow.Ellipsis doesn't work without specifying maxLines - kotlin

I want to display a Text inside a Card with some inner padding and sometimes the text will not fit in. I want this thing to be marked with an ellipsis. But I can't make it work without maxLines.
#Composable
fun CardWithText() {
Card(
modifier = Modifier
.height(60.dp)
.width(100.dp)
.border(1.dp, Color.Black, RoundedCornerShape(0))
) {
Card(
modifier = Modifier
.padding(8.dp)
.fillMaxSize()
.border(1.dp, Color.Black, RoundedCornerShape(0))
) {
Text(
text = "One two three four five six seven eight nine ten eleven twelve",
maxLines = 2,
overflow = TextOverflow.Ellipsis,
color = Color.Black
)
}
}
}
With maxLines = 2
With maxLines = 3 or not using maxLines at all

This is a known issue, causing Ellipsis to ignore parent size constraints. Star it to bring more attention and follow the updates.
Meanwhile you can use this hacky solution: it'll calculate the real number of lines and pass the correct value for maxLines:
#Composable
fun TextEllipsisFixed(
text: String,
modifier: Modifier = Modifier,
color: Color = Color.Unspecified,
fontSize: TextUnit = TextUnit.Unspecified,
fontStyle: FontStyle? = null,
fontWeight: FontWeight? = null,
fontFamily: FontFamily? = null,
letterSpacing: TextUnit = TextUnit.Unspecified,
textDecoration: TextDecoration? = null,
textAlign: TextAlign? = null,
lineHeight: TextUnit = TextUnit.Unspecified,
softWrap: Boolean = true,
maxLines: Int = Int.MAX_VALUE,
onTextLayout: (TextLayoutResult) -> Unit,
style: TextStyle = LocalTextStyle.current,
) {
SubcomposeLayout(modifier = modifier) { constraints ->
var slotId = 0
fun placeText(
text: String,
onTextLayout: (TextLayoutResult) -> Unit,
constraints: Constraints,
maxLines: Int,
) = subcompose(slotId++) {
Text(
text = text,
color = color,
fontSize = fontSize,
fontStyle = fontStyle,
fontWeight = fontWeight,
fontFamily = fontFamily,
letterSpacing = letterSpacing,
textDecoration = textDecoration,
textAlign = textAlign,
lineHeight = lineHeight,
softWrap = softWrap,
onTextLayout = onTextLayout,
style = style,
overflow = TextOverflow.Ellipsis,
maxLines = maxLines,
)
}[0].measure(constraints)
var textLayoutResult: TextLayoutResult? = null
val initialPlaceable = placeText(
text = text,
constraints = constraints,
onTextLayout = {
textLayoutResult = it
},
maxLines = maxLines,
)
val finalPlaceable = textLayoutResult?.let { layoutResult ->
if (!layoutResult.didOverflowHeight) return#let initialPlaceable
val lastVisibleLine = (0 until layoutResult.lineCount)
.last {
layoutResult.getLineBottom(it) <= layoutResult.size.height
}
placeText(
text = text,
constraints = constraints,
onTextLayout = onTextLayout,
maxLines = lastVisibleLine + 1,
)
} ?: initialPlaceable
layout(
width = finalPlaceable.width,
height = finalPlaceable.height
) {
finalPlaceable.place(0, 0)
}
}
}
Usage:
Card(
modifier = Modifier
.height(60.dp)
.width(100.dp)
.border(1.dp, Color.Black, RoundedCornerShape(0))
) {
Card(
modifier = Modifier
.padding(8.dp)
.fillMaxSize()
.border(1.dp, Color.Black, RoundedCornerShape(0))
) {
TextEllipsisFixed(
text = "One two three four five six seven eight nine ten eleven twelve",
color = Color.Black
)
}
}
Result:

Related

how to make Parralel scroll in jetpack compose?

I am makeing a profile screen in jetpack compose
I want to make the Blue background behind the image scroll up when the image is scrolled up because it doesn't look good :)
This is what I need help with, see the gif to understand better.
how can I achieve what I want, that the blue background will scroll up also?
I tried moving the background box around the code,
out of the column at the head
out of the column at the TopBar
out of the column at the ProfileSection
but it didn't work because the column rearrange the objects so that they are ontop of each other and I just want it from behind
source code
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.politi_cal.R
#Composable
fun CelebProfileScreen() {
BlackBackgroundSquare()
Column(modifier = Modifier.fillMaxSize()) {
LazyColumn(content = {
item {
TopBar()
Spacer(modifier = Modifier.height(60.dp))
ProfileSection(
name = "Amit Segal",
company = "N12 news channel",
)
// voting bar
VotingBar(
leftyPercent = 10, rightyPercent = 90
)
// lazy column for more info
MoreInfo("Amit Segal is a journalist and a news anchor. He is the host of the N12 news channel. He is a very popular journalist. Amit Yitzchak Segal[1] (born Biz in Nisan 5, 1982, April 10, 1982) is an Israeli journalist, radio and television personality. Serves as the political commentator of the news company and a political columnist in the \"Yediot Aharonot\" newspaper. One of the most influential journalists in Israel[2]. Presents Meet the Press on Channel 12 together with Ben Caspit.")
}
})
}
}
#Composable
fun MoreInfo(information_param: String, modifier: Modifier = Modifier) {
Column(modifier = modifier.padding(start = 26.dp, end = 26.dp)) {
Text(
text = "More information",
color = Color.Black,
fontSize = 36.sp,
fontWeight = FontWeight.Bold
)
Text(
text = information_param,
color = Color.Black,
fontSize = 24.sp,
fontWeight = FontWeight.Normal,
maxLines = 10,
overflow = TextOverflow.Ellipsis
)
}
}
#Composable
fun VotingBar(
modifier: Modifier = Modifier, leftyPercent: Int, rightyPercent: Int
) {
var leftyPercentWeight: Float = (leftyPercent / 10).toFloat()
var rightyPercentWeight: Float = (rightyPercent / 10).toFloat()
val shape = RoundedCornerShape(32.dp)
Column(
Modifier.padding(start = 16.dp, end = 16.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Row(
modifier = modifier
.fillMaxWidth()
.height(32.dp)
.background(Color.White)
.clip(shape)
.border(1.dp, Color.Black, shape)
) {
Column(
// add rounded corners to the left side
modifier = Modifier
.background(Color(0xFFA60321))
.weight(rightyPercentWeight)
.clip(CircleShape)
.fillMaxHeight(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
}
Column(
modifier = Modifier
.background(Color(0xFF03588C))
.fillMaxHeight(leftyPercentWeight)
.weight(1f)
.clip(CircleShape),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
// add rounded corners to the right side
) {
}
}
// second row
// stack over flow https://stackoverflow.com/questions/74619069/what-is-the-attribute-of-the-moddifier-that-i-need-to-change-to-make-the-corners?noredirect=1#comment131712293_74619069
Column(
Modifier.padding(start = 46.dp, end = 46.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.background(Color.White),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
) {
Row {
Box(
modifier = Modifier
.size(30.dp)
.clip(CircleShape)
.background(Color(0xFFA60321))
)
Spacer(modifier = Modifier.width(10.dp))
Text(
text = "Right $rightyPercent%",
fontSize = 20.sp,
fontWeight = FontWeight.Bold
)
}
Row() {
Box(
modifier = Modifier
.size(30.dp)
.clip(CircleShape)
.background(Color(0xFF03588C))
)
Spacer(modifier = Modifier.width(10.dp))
Text(
text = "Left $leftyPercent%", fontSize = 20.sp, fontWeight = FontWeight.Bold
)
}
}
}
}
}
#Composable
fun BlackBackgroundSquare() {
Box(
// modifier fill only half the screen
modifier = Modifier
.fillMaxWidth()
.height(300.dp)
// insert background color as hex
.background(Color(0xFF2C3E50))
)
}
#Composable
fun TopBar(
modifier: Modifier = Modifier
) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center,
modifier = modifier.fillMaxWidth()
) {
Text(
text = "Profile",
overflow = TextOverflow.Ellipsis,
fontWeight = FontWeight.Bold,
fontSize = 40.sp,
color = Color.White
)
}
}
#Composable
fun ProfileSection(
name: String, company: String, modifier: Modifier = Modifier
) {
Column(
modifier = modifier.fillMaxWidth(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
RoundImage(
image = painterResource(id = R.drawable.profile_pic), modifier = Modifier.size(250.dp)
)
Text(
text = name,
overflow = TextOverflow.Ellipsis,
fontWeight = FontWeight.Bold,
fontSize = 40.sp,
color = Color.Black
)
Text(
text = company,
overflow = TextOverflow.Ellipsis,
fontWeight = FontWeight.Bold,
fontSize = 20.sp,
color = Color.Black
)
}
}
#Composable
fun RoundImage(
image: Painter, modifier: Modifier = Modifier
) {
Image(
painter = image,
contentDescription = "Profile image",
modifier = modifier
.aspectRatio(1f, matchHeightConstraintsFirst = true)
.border(
width = 6.dp, color = Color.White, shape = CircleShape
)
.padding(3.dp)
.clip(CircleShape)
)
}
You do not need to use LazyColumn, if it contains only a single item, but Box is a simple component for placing components on top of each other, which could be used here for the item like this:
item {
Box {
BlackBackgroundSquare()
Column {
TopBar()
Spacer(modifier = Modifier.height(60.dp))
ProfileSection(
name = "Amit Segal",
company = "N12 news channel",
)
}
}
}
Add a state to LazyColumn, then use state.firstVisibleItemIndex to detect when first item is not visible. Use a DisposableEffect to detect index by index to prevent lag. When first idx is consumed, hide your upper bar. Could use a viewmodel to save first index. Then show action bar if first item is visible again.
DisposableEffect(key1 = listState.firstVisibleItemIndex) {
onDispose {
viewModel
.setFirstVisibleItemIdx(listState.firstVisibleItemIndex)
}
}
On enter get the index from viewmodel and scroll. If no value, just show as normal.
LaunchedEffect(viewModel.firstVisibleItemIdx) {
listState.scrollToItem(viewModel.firstVisibleItemIdx.value ?: 0)
}

Compose: placement of measurables in Layout based on measuredWidth

I am trying to implement a SegmentedControl composable, but allow for segments to be of different sizes if one of them needs more space. So far I've achieved basic implementation, where all segments are equal in width:
But as you can see, Foo and Bar segments can easily occupy less space to make room for Some very long string.
So my requirements are:
When the sum of desired widths of every child is less than width of incoming constraints, distribute children evenly
Otherwise shrink children that can be shrinked until all children are visible
If it is not possible, find a configuration in which maximum amount of content can be showed.
When trying to implement the first requirement I quickly remembered that it is not possible with default Layout composable since only one measurement per measurable per layout pass is allowed, and for good reasons.
Layout(
content = {
// Segments
}
) { segmentsMeasurables, constraints ->
var placeables = segmentsMeasurables.map {
it.measure(constraints)
}
// In case every placeable has enough space in the layout,
// we divide the space evenly between them
if (placeables.sumOf { it.measuredWidth } <= constraints.maxWidth) {
placeables = segmentsMeasurables.map {
it.measure( // <- NOT ALLOWED!
Constraints.fixed(
width = constraints.maxWidth / state.segmentCount,
height = placeables[0].height
)
)
}
}
layout(
width = placeables.sumOf { it.width },
height = placeables[0].height
) {
var xOffset = 0
placeables.forEachIndexed { index, placeable ->
xOffset += placeables.getOrNull(index - 1)?.width ?: 0
placeable.placeRelative(
x = xOffset,
y = 0
)
}
}
}
I also looked into SubcomposeLayout, but it doesn't seem to do what I need (my use-case doesn't need subcomposition).
I can imagine a hacky solution in which I force at least two layout passes to collect children`s sizes and only after that perform layout logic, but it will be unstable, not performant, and will generate a frame with poorly layed-out children.
So how is it properly done? Am I missing something?
You have to use intrinsic measurements,
#Composable
fun Tiles(
modifier: Modifier = Modifier,
content: #Composable () -> Unit,
) {
Layout(
modifier = modifier,
content = content,
) { measurables, constraints ->
val widths = measurables.map { measurable -> measurable.maxIntrinsicWidth(constraints.maxHeight) }
val totalWidth = widths.sum()
val placeables: List<Placeable>
if (totalWidth > constraints.maxWidth) {
// do not fit, set all to same width
val width = constraints.maxWidth / measurables.size
val itemConstraints = constraints.copy(
minWidth = width,
maxWidth = width,
)
placeables = measurables.map { measurable -> measurable.measure(itemConstraints) }
} else {
// set each to its required width, and split the remainder evenly
val remainder = (constraints.maxWidth - totalWidth) / measurables.size
placeables = measurables.mapIndexed { index, measurable ->
val width = widths[index] + remainder
measurable.measure(
constraints = constraints.copy(
minWidth = width,
maxWidth = width,
)
)
}
}
layout(
width = constraints.maxWidth,
height = constraints.maxHeight,
) {
var x = 0
placeables.forEach { placeable ->
placeable.placeRelative(
x = x,
y = 0
)
x += placeable.width
}
}
}
}
#Preview(widthDp = 360)
#Composable
fun PreviewTiles() {
PlaygroundTheme {
Surface(
color = MaterialTheme.colorScheme.background
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(all = 16.dp),
) {
Tiles(
modifier = Modifier
.fillMaxWidth()
.height(40.dp)
) {
Text(
text = "Foo",
textAlign = TextAlign.Center,
modifier = Modifier.background(Color.Red.copy(alpha = .3f))
)
Text(
text = "Bar",
textAlign = TextAlign.Center,
modifier = Modifier.background(Color.Blue.copy(alpha = .3f))
)
}
Tiles(
modifier = Modifier
.fillMaxWidth()
.padding(top = 16.dp)
.height(40.dp)
) {
Text(
text = "Foo",
textAlign = TextAlign.Center,
modifier = Modifier.background(Color.Red.copy(alpha = .3f))
)
Text(
text = "Bar",
textAlign = TextAlign.Center,
modifier = Modifier.background(Color.Blue.copy(alpha = .3f))
)
Text(
text = "Some very long text",
textAlign = TextAlign.Center,
modifier = Modifier.background(Color.Red.copy(alpha = .3f))
)
}
Tiles(
modifier = Modifier
.fillMaxWidth()
.padding(top = 16.dp)
.height(40.dp)
) {
Text(
text = "Foo",
textAlign = TextAlign.Center,
modifier = Modifier.background(Color.Red.copy(alpha = .3f))
)
Text(
text = "Bar",
textAlign = TextAlign.Center,
modifier = Modifier.background(Color.Blue.copy(alpha = .3f))
)
Text(
text = "Some even much longer text that doesn't fit",
textAlign = TextAlign.Center,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
modifier = Modifier.background(
Color.Red.copy(alpha = .3f)
)
)
}
}
}
}
}

Jetpack Compose - layouting reusable components

for practicing with reusable components in Jetpack Compose, I started a little exercise.
See picture below.
As I imagine the green row, the input row, and the rows between have the same construction.
The first element got the available space, the second takes 50.dp, and the last one got 70.dp.
I tried to seperate the width into variables an pass this vars as modifiers to the single elements in the row. I thought if I need additionally fields, the I can extend it whitout any problem.
CODE DOESN'T WORK!
#Composable
fun groundComponent(
modifier: Modifier = Modifier,
spaceBetween: Dp = 0.dp,
color: Color,
content: #Composable () -> Unit
) {
Surface(
color = color
) {
Row(
modifier = modifier,
horizontalArrangement = Arrangement.spacedBy(spaceBetween)
) {
content()
}
}
}
#Composable
fun inputSection() {
val firstRowWidth = 1F
val secondRowWidth = 70.dp
val thirdRowWidth = 50.dp
Text("Add Ingredient")
groundComponent(color = Color.Green){
Text( text="Ingredient", modifier = Modifier.weight(firstRowWidth ))
Text( text="Amount", modifier = Modifier.widthIn(secondRowWidth ))
Text( text="Unit", modifier = Modifier.widthIn(thirdRowWidth ))
}
groundComponent{
Text( text="Sugar", modifier = Modifier.weight(firstRowWidth ))
Text( text="500", modifier = Modifier.widthIn(secondRowWidth ))
Text( text="gr", modifier = Modifier.widthIn(thirdRowWidth ))
}
groundComponent{
Text( text="Carrot", modifier = Modifier.weight(firstRowWidth ))
Text( text="1.5", modifier = Modifier.widthIn(secondRowWidth ))
Text( text="kg", modifier = Modifier.widthIn(thirdRowWidth ))
}
groundComponent{
TextField(
value = "newIngredient",
onValueChange = {},
modifier = Modifier.weight(firstRowWidth ))
TextField(
value = "newAmount",
onValueChange = {},
modifier = Modifier.widthIn(secondRowWidth )
)
TextField(
value = "newUnit",
onValueChange = {},
modifier = Modifier.widthIn(thirdRowWidth )
)
}
Button(onClick={}){Text("add")}
}
I got several errors with the .weight modifier.
So how is the right aproach to solve such a situation.
Thanks!
Modifier.weight is a Modifier that defined in specific scopes such as RowScope and ColumnScope. To be able to use modifiers that are defined in specific scopes you need to add Receiver to your content. BoxScope as Modifier.align() that is defined for instance, you can define your scopes either.
#Composable
fun GroundComponent(
modifier: Modifier = Modifier,
spaceBetween: Dp = 0.dp,
color: Color=Color.Unspecified,
content: #Composable RowScope.() -> Unit
) {
Surface(
color = color
) {
// Can't call content here because it has RowScope as receiver
// content()
Row(
modifier = modifier,
horizontalArrangement = Arrangement.spacedBy(spaceBetween)
) {
content()
}
}
}
Also in InputSection you define weight fractions as
val firstRowWidth = 1F
val secondRowWidth = 70.dp
val thirdRowWidth = 50.dp
these values should be proportionate to each other
if you set 1/5/6 for instance. or between 0f-1f
And by convention you can name Composable with capital initial letter since they are considered as widgets.
Thanks for your reply and your pretty good explanation!
With your help I solved my problem this way.
#Composable
fun InputRowGroundComponent(
modifier: Modifier = Modifier,
spaceBetweenElements: Dp = 0.dp,
color: Color,
content: #Composable RowScope.() -> Unit
) {
Surface(
color = color
) {
Row(
modifier = modifier,
horizontalArrangement = Arrangement.spacedBy(spaceBetweenElements),
verticalAlignment = Alignment.CenterVertically
) {
content()
}
}
}
#Composable
fun OverviewHeader(
modifier: Modifier = Modifier,
text: String
) {
Text(
modifier = modifier,
text = text,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
textAlign = TextAlign.Center
)
}
#Composable
fun OverviewContent(
modifier: Modifier = Modifier,
text: String
) {
Text(
modifier = modifier,
text = text,
maxLines = 2,
overflow = TextOverflow.Ellipsis,
)
}
#Preview(showBackground = true, widthDp = 460)
#Composable
fun testPrev() {
val rowWeights = listOf(6F,3F,2F)
val rowSpacing = 8.dp
val indentation = 10.dp
Column(
modifier = Modifier.padding(8.dp),
verticalArrangement = Arrangement.spacedBy(rowSpacing)
) {
InputRowGroundComponent(
modifier = Modifier.heightIn(45.dp),
spaceBetweenElements = rowSpacing,
color = Color.Green
) {
OverviewHeader(text = "Ingredient", modifier = Modifier.weight(rowWeights[0]))
OverviewHeader(text = "Amount", modifier = Modifier.weight(rowWeights[1]))
OverviewHeader(text = "Unit", modifier = Modifier.weight(rowWeights[2]))
}
InputRowGroundComponent(
modifier = Modifier.heightIn(30.dp),
spaceBetweenElements = rowSpacing,
color = Color.Unspecified
) {
OverviewContent(text = "Sugar", modifier = Modifier.weight(rowWeights[0]).padding(start=indentation))
OverviewContent(text = "500", modifier = Modifier.weight(rowWeights[1]).padding(start=indentation))
OverviewContent(text = "gr", modifier = Modifier.weight(rowWeights[2]).padding(start=indentation))
}
InputRowGroundComponent(
modifier = Modifier.heightIn(30.dp),
spaceBetweenElements = rowSpacing,
color = Color.Unspecified
) {
OverviewContent(text = "Carrot", modifier = Modifier.weight(rowWeights[0]).padding(start=indentation))
OverviewContent(text = "1.5", modifier = Modifier.weight(rowWeights[1]).padding(start=indentation))
OverviewContent(text = "kg", modifier = Modifier.weight(rowWeights[2]).padding(start=indentation))
}
InputRowGroundComponent(
spaceBetweenElements = rowSpacing,
color = Color.Unspecified
) {
TextField(value = "", onValueChange = {}, modifier = Modifier.weight(rowWeights[0]))
TextField(value = "", onValueChange = {}, modifier = Modifier.weight(rowWeights[1]))
TextField(value = "", onValueChange = {}, modifier = Modifier.weight(rowWeights[2]))
}
Button(
modifier = Modifier.fillMaxWidth(),
onClick = { /*Todo*/ },
content = {
Row(
verticalAlignment = Alignment.CenterVertically
) {
Icon(
imageVector = Icons.Filled.Add,
contentDescription = "Add Ingredient"
)
Text(
text = "Add"
)
}
}
)
}
}
Is this approach now right?

conditional operation with types in jetpackCompose

How to have a type to be optional and if it is not passed from outside than the second Text should not render. Right now gettin an error Type mismatch: inferred type is String but Boolean was expected
#Composable
fun FieldLabel(
label: String,
secondaryLabel: String?,
modifier: Modifier = Modifier,
) {
Text(
text = label,
textAlign = TextAlign.End,
modifier = Modifier
.fillMaxWidth(),
fontWeight = FontWeight.Bold,
fontSize = 24.sp,
color = Color.Black,
)
//How to write this part so that if there is not secondaryLabel provided than the text part does not render
secondaryLabel ? Text(
text = secondaryLabel,
modifier = Modifier
.fillMaxWidth()
fontWeight = FontWeight.Bold,
fontSize = 24.sp,
color = Color.Black,
) : null
}
You can give a default value of null to secondaryLabel and if it's not null you can render that Text.
#Composable
fun FieldLabel(
label: String,
secondaryLabel: String? = null,
modifier: Modifier = Modifier,
) {
Text(
text = label,
textAlign = TextAlign.End,
modifier = Modifier
.fillMaxWidth(),
fontWeight = FontWeight.Bold,
fontSize = 24.sp,
color = Color.Black,
)
if(secondaryLabel != null)
Text(
text = secondaryLabel,
modifier = Modifier
.fillMaxWidth()
fontWeight = FontWeight.Bold,
fontSize = 24.sp,
color = Color.Black,
)
}

How to make BottomNavigationItem fill space available?

I want to make BottomNavigation with text appearing from right side of selected item. How can I make BottomNavigationItem fill available space or move other items, to prevent text from wrapping?
here's image
Tried this, but didn't work:
#Composable
fun BottomNavigationBar(
items: List<BottomNavItem>,
navController: NavController,
onItemClick: (BottomNavItem) -> Unit
) {
val backStackEntry = navController.currentBackStackEntryAsState()
BottomNavigation(
modifier = Modifier,
elevation = 0.dp,
backgroundColor = light
) {
items.forEach{
val selected = it.screen_route == backStackEntry.value?.destination?.route
BottomNavigationItem(
selected = selected,
selectedContentColor = primary_color,
unselectedContentColor = shaded,
onClick = { onItemClick(it) },
icon = {
Row(
modifier = if (selected) Modifier
.fillMaxWidth()
.padding(horizontal = 15.dp)
else Modifier
.padding(horizontal = 15.dp)
) {
Icon(
imageVector = it.icon,
contentDescription = it.title,
tint = if (selected) primary_color else shaded,
)
if (selected){
Text(
text = it.title,
color = primary_color,
textAlign = TextAlign.Center,
fontSize = 20.sp,
modifier = Modifier.padding(start = 2.dp).align(Alignment.CenterVertically),
overflow = TextOverflow.Visible
)
}
}
}
)
}
}
}
You can check solution from Jetsnack sample app. I think this is the same behavior you want to achieve.