I need to make the Chip size adapt to the font size when it is changed from the watch settings. I'm using compose in android studio for Wear OS. When the font size is set to normal from the watch settings, the app looks fine, but when the font size is changed to the largest setting from the watch settings, the text overflows, and my biggest issue is with the Chips, as they do not adapt to the new font size, and the text overflows at the bottom of the chip. So, I need to make the Chip adapt and resize when this happens.
This is my code:
fun MainScreen(
userPreferences: SharedPreferences,
oneTrainingsOnClick: () -> Unit,
freeTrainingOnClick: () -> Unit,
settingsOnClick: () -> Unit,
signInOnClick: () -> Unit
) {
val isUserLoggedIn = userPreferences.getBoolean(MainActivity.LOG_IN, false)
val chipColor = colorResource(id = R.color.gray)
val listState = rememberScalingLazyListState(initialCenterItemIndex = 0)
val coroutineScope = rememberCoroutineScope()
val focusRequester = remember { FocusRequester() }
Scaffold(
positionIndicator = { PositionIndicator(scalingLazyListState = listState) },
timeText = { TimeOnList(listState) },
vignette = { Vignette(vignettePosition = VignettePosition.TopAndBottom) }
) {
ScalingLazyColumn(
state = listState,
modifier = Modifier
.fillMaxSize()
.onRotaryScrollEvent {
coroutineScope.launch { listState.scrollBy(it.verticalScrollPixels) }
true
}
.focusRequester(focusRequester)
.focusable()
) {
item {
Chip(
icon = {
Image(
painter = painterResource(id = R.drawable.ic_one_icon),
contentDescription = null
)
},
onClick = {
if (isUserLoggedIn) oneTrainingsOnClick() else signInOnClick()
},
enabled = true,
colors = ChipDefaults.chipColors(chipColor),
modifier = Modifier
.wrapContentSize()
.fillMaxWidth()
.padding(top = 40.dp),
shape = RoundedCornerShape(30.dp),
label = {
Text(
text =
if (isUserLoggedIn) stringResource(id = R.string.one_trainings_button)
else stringResource(id = R.string.start),
style = TextStyle(
textAlign = TextAlign.Left,
fontFamily = Font(R.font.roboto_bold).toFontFamily(),
fontSize = dimensionResource(id = R.dimen.general_text).value.sp,
color = colorResource(id = R.color.white)
),
maxLines = 2,
modifier = Modifier.fillMaxWidth()
)
},
)
}
item {
Chip(
icon = {
Image(
painter = painterResource(id = R.drawable.ic_free_training),
contentDescription = null
)
},
onClick = { freeTrainingOnClick() },
colors = ChipDefaults.chipColors(chipColor),
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(30.dp),
label = {
Text(
text = stringResource(id = R.string.free_training_button),
style = TextStyle(
textAlign = TextAlign.Left,
fontFamily = Font(R.font.roboto_bold).toFontFamily(),
fontSize = dimensionResource(id = R.dimen.general_text).value.sp,
color = colorResource(id = R.color.white)
),
// overflow = TextOverflow.Ellipsis,
// maxLines = 1,
modifier = Modifier.fillMaxWidth()
)
}
)
}
item {
Chip(
icon = {
Image(
painter = painterResource(id = R.drawable.ic_settings),
contentDescription = null
)
},
onClick = { settingsOnClick() },
colors = ChipDefaults.chipColors(chipColor),
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(30.dp),
label = {
Text(
text = stringResource(id = R.string.configuration_text),
maxLines = 1,
style = TextStyle(
textAlign = TextAlign.Left,
fontFamily = Font(R.font.roboto_bold).toFontFamily(),
fontSize = dimensionResource(id = R.dimen.general_text).value.sp,
color = colorResource(id = R.color.white)
),
overflow = TextOverflow.Ellipsis,
modifier = Modifier.fillMaxWidth()
)
},
secondaryLabel = {
Text(text = stringResource(id = R.string.failed_authentication))
}
)
}
}
LaunchedEffect(Unit) { focusRequester.requestFocus() }
}
}
This is what happens when the font size is changed to the largest setting:enter image description here
Horologist's Chip handles that for you, see a screenshot test.
Add dependency:
implementation "com.google.android.horologist:horologist-compose-material:<version>"
Usage:
Chip(
label = stringResource(id = R.string.configuration_text),
onClick = { settingsOnClick() },
secondaryLabel = stringResource(id = R.string.failed_authentication)
icon = DrawableResPaintable(id = R.drawable.ic_settings),
)