TabRow(selectedTabIndex = currentSelectedIndex,
backgroundColor = Color.Transparent,
divider = @Composable {
TabRowDefaults.Divider(color = Color.Transparent)
},
indicator = @Composable { tabPositions ->
val currentTabPosition = tabPositions[currentSelectedIndex]
TabRowDefaults.Indicator(
Modifier.composed {
val percent = 0.3f
val currentTabWidth by animateDpAsState(
targetValue = currentTabPosition.width,
animationSpec = tween(durationMillis = 250, easing = FastOutSlowInEasing)
)
val indicatorOffset by animateDpAsState(
targetValue = currentTabPosition.left + currentTabWidth/2 - (currentTabWidth * percent)/2 ,
animationSpec = tween(durationMillis = 250, easing = FastOutSlowInEasing)
)
fillMaxWidth()
.wrapContentSize(Alignment.BottomStart)
.offset(x = indicatorOffset)
.width(currentTabWidth * percent)
}
)
}
) {
Box(modifier = Modifier.padding(5.dp),
contentAlignment = Alignment.Center
){
Text(text = "Scenery",
style = TextStyle(
fontSize = if(currentSelectedIndex == 0) 16.sp else 14.sp,
color = if(currentSelectedIndex == 0) Color(0xFF242424) else Color(0xFFAEAEAE),
textAlign = TextAlign.Center
),
modifier = Modifier.clickable {
currentSelectedIndex = 0
}
)
}
Box(modifier = Modifier.padding(5.dp),
contentAlignment = Alignment.Center
){
Text(text = "Car",
style = TextStyle(
fontSize = if(currentSelectedIndex == 1) 16.sp else 14.sp,
color = if(currentSelectedIndex == 1) Color(0xFF242424) else Color(0xFFAEAEAE),
textAlign = TextAlign.Center
),
modifier = Modifier.clickable {
currentSelectedIndex = 1
}
)
}
Box(modifier = Modifier.padding(5.dp),
contentAlignment = Alignment.Center
){
Text(text = "Animal",
style = TextStyle(
fontSize = if(currentSelectedIndex == 2) 16.sp else 14.sp,
color = if(currentSelectedIndex == 2) Color(0xFF242424) else Color(0xFFAEAEAE),
textAlign = TextAlign.Center
),
modifier = Modifier.clickable {
currentSelectedIndex = 2
}
)
}
Box(modifier = Modifier.padding(5.dp),
contentAlignment = Alignment.Center
){
Text(text = "Cartoon",
style = TextStyle(
fontSize = if(currentSelectedIndex == 3) 16.sp else 14.sp,
color = if(currentSelectedIndex == 3) Color(0xFF242424) else Color(0xFFAEAEAE),
textAlign = TextAlign.Center
),
modifier = Modifier.clickable {
currentSelectedIndex = 3
}
)
}
}