diff --git a/Jetcaster/core/designsystem/src/main/java/com/example/jetcaster/designsystem/theme/Color.kt b/Jetcaster/core/designsystem/src/main/java/com/example/jetcaster/designsystem/theme/Color.kt index cb09a5406..b8b6376c2 100644 --- a/Jetcaster/core/designsystem/src/main/java/com/example/jetcaster/designsystem/theme/Color.kt +++ b/Jetcaster/core/designsystem/src/main/java/com/example/jetcaster/designsystem/theme/Color.kt @@ -18,18 +18,18 @@ package com.example.jetcaster.designsystem.theme import androidx.compose.ui.graphics.Color val primaryLight = Color(0xFFFF792C) -val onPrimaryLight = Color(0xFFFFECE0) -val primaryContainerLight = Color(0xFFFFDBCC) -val onPrimaryContainerLight = Color(0xFF662500) -val secondaryLight = Color(0xFFFFBD1D) -val onSecondaryLight = Color(0xFF664800) -val secondaryContainerLight = Color(0xFFFFEECC) -val onSecondaryContainerLight = Color(0xFF664800) -val tertiaryLight = Color(0xFFFF8F0F) -val onTertiaryLight = Color(0xFFFFFFFF) -val tertiaryContainerLight = Color(0xFFFFE5CC) +val onPrimaryLight = Color(0xFF626004) +val primaryContainerLight = Color(0xFF313002) +val onPrimaryContainerLight = Color(0xFFFDFCCE) +val secondaryLight = Color(0xFFFFE523) +val onSecondaryLight = Color(0xFF332D00) +val secondaryContainerLight = Color(0xFF998700) +val onSecondaryContainerLight = Color(0xFFFFF9CC) +val tertiaryLight = Color(0xFFFF9AD8) +val onTertiaryLight = Color(0xFF33000A) +val tertiaryContainerLight = Color(0xFF660014) val onTertiaryContainerLight = Color(0xFF663600) -val errorLight = Color(0xFFBA1A1A) +val errorLight = Color(0xFFFFE5EB) val onErrorLight = Color(0xFFFFFFFF) val errorContainerLight = Color(0xFFFFDAD6) val onErrorContainerLight = Color(0xFF93000A) @@ -42,29 +42,29 @@ val onSurfaceVariantLight = Color(0xFF49454E) val outlineLight = Color(0xFF7A757F) val outlineVariantLight = Color(0xFFCBC4CF) val scrimLight = Color(0xFF000000) -val inverseSurfaceLight = Color(0xFF322F35) -val inverseOnSurfaceLight = Color(0xFFF5EFF7) +val inverseSurfaceLight = Color(0xFFEFE0D6) +val inverseOnSurfaceLight = Color(0xFF382F28) val inversePrimaryLight = Color(0xFFD3BCFD) -val surfaceDimLight = Color(0xFFDED8E0) -val surfaceBrightLight = Color(0xFFFEF7FF) -val surfaceContainerLowestLight = Color(0xFFFFFFFF) -val surfaceContainerLowLight = Color(0xFFF8F1FA) -val surfaceContainerLight = Color(0xFFF2ECF4) -val surfaceContainerHighLight = Color(0xFFEDE6EE) -val surfaceContainerHighestLight = Color(0xFFE7E0E8) +val surfaceDimLight = Color(0xFF19120C) +val surfaceBrightLight = Color(0xFF413731) +val surfaceContainerLowestLight = Color(0xFF140D08) +val surfaceContainerLowLight = Color(0xFF221A14) +val surfaceContainerLight = Color(0xFF261E18) +val surfaceContainerHighLight = Color(0xFF312822) +val surfaceContainerHighestLight = Color(0xFF3C332C) -val primaryLightMediumContrast = Color(0xFF3E2C62) -val onPrimaryLightMediumContrast = Color(0xFFFFFFFF) -val primaryContainerLightMediumContrast = Color(0xFF77639D) -val onPrimaryContainerLightMediumContrast = Color(0xFFFFFFFF) -val secondaryLightMediumContrast = Color(0xFF3A3346) -val onSecondaryLightMediumContrast = Color(0xFFFFFFFF) -val secondaryContainerLightMediumContrast = Color(0xFF72697F) -val onSecondaryContainerLightMediumContrast = Color(0xFFFFFFFF) -val tertiaryLightMediumContrast = Color(0xFF512A36) -val onTertiaryLightMediumContrast = Color(0xFFFFFFFF) -val tertiaryContainerLightMediumContrast = Color(0xFF8F606C) -val onTertiaryContainerLightMediumContrast = Color(0xFFFFFFFF) +val primaryLightMediumContrast = Color(0xFFFF792C) +val onPrimaryLightMediumContrast = Color(0xFF626004) +val primaryContainerLightMediumContrast = Color(0xFF313002) +val onPrimaryContainerLightMediumContrast = Color(0xFFFDFCCE) +val secondaryLightMediumContrast = Color(0xFFFFE523) +val onSecondaryLightMediumContrast = Color(0xFF332D00) +val secondaryContainerLightMediumContrast = Color(0xFF998700) +val onSecondaryContainerLightMediumContrast = Color(0xFFFFF9CC) +val tertiaryLightMediumContrast = Color(0xFFFF9AD8) +val onTertiaryLightMediumContrast = Color(0xFF33000A) +val tertiaryContainerLightMediumContrast = Color(0xFF660014) +val onTertiaryContainerLightMediumContrast = Color(0xFFFFE5EB) val errorLightMediumContrast = Color(0xFF740006) val onErrorLightMediumContrast = Color(0xFFFFFFFF) val errorContainerLightMediumContrast = Color(0xFFCF2C27) @@ -81,13 +81,13 @@ val scrimLightMediumContrast = Color(0xFF000000) val inverseSurfaceLightMediumContrast = Color(0xFF322F35) val inverseOnSurfaceLightMediumContrast = Color(0xFFF5EFF7) val inversePrimaryLightMediumContrast = Color(0xFFD3BCFD) -val surfaceDimLightMediumContrast = Color(0xFFCAC4CC) -val surfaceBrightLightMediumContrast = Color(0xFFFEF7FF) -val surfaceContainerLowestLightMediumContrast = Color(0xFFFFFFFF) -val surfaceContainerLowLightMediumContrast = Color(0xFFF8F1FA) -val surfaceContainerLightMediumContrast = Color(0xFFEDE6EE) -val surfaceContainerHighLightMediumContrast = Color(0xFFE1DBE3) -val surfaceContainerHighestLightMediumContrast = Color(0xFFD6D0D7) +val surfaceDimLightMediumContrast = Color(0xFF19120C) +val surfaceBrightLightMediumContrast = Color(0xFF413731) +val surfaceContainerLowestLightMediumContrast = Color(0xFF140D08) +val surfaceContainerLowLightMediumContrast = Color(0xFF221A14) +val surfaceContainerLightMediumContrast = Color(0xFF261E18) +val surfaceContainerHighLightMediumContrast = Color(0xFF312822) +val surfaceContainerHighestLightMediumContrast = Color(0xFF3C332C) val primaryLightHighContrast = Color(0xFF342157) val onPrimaryLightHighContrast = Color(0xFFFFFFFF) @@ -125,26 +125,26 @@ val surfaceContainerLightHighContrast = Color(0xFFE7E0E8) val surfaceContainerHighLightHighContrast = Color(0xFFD8D2DA) val surfaceContainerHighestLightHighContrast = Color(0xFFCAC4CC) -val primaryDark = Color(0xFFFF792C) -val onPrimaryDark = Color(0xFFFFECE0) -val primaryContainerDark = Color(0xFF703717) -val onPrimaryContainerDark = Color(0xFFFFDBCC) -val secondaryDark = Color(0xFFFFBD1D) -val onSecondaryDark = Color(0xFF412D00) -val secondaryContainerDark = Color(0xFFF0C470) -val onSecondaryContainerDark = Color(0xFF704700) -val tertiaryDark = Color(0xFFFF8F0F) -val onTertiaryDark = Color(0xFF663600) -val tertiaryContainerDark = Color(0xFF6C3A06) -val onTertiaryContainerDark = Color(0xFFFFDCC2) +val primaryDark = Color(0xFFF0FCB0) +val onPrimaryDark = Color(0xFF626004) +val primaryContainerDark = Color(0xFF313002) +val onPrimaryContainerDark = Color(0xFFFDFCCE) +val secondaryDark = Color(0xFFFFE523) +val onSecondaryDark = Color(0xFF332D00) +val secondaryContainerDark = Color(0xFF998700) +val onSecondaryContainerDark = Color(0xFFFFF9CC) +val tertiaryDark = Color(0xFFFF9AD8) +val onTertiaryDark = Color(0xFF33000A) +val tertiaryContainerDark = Color(0xFF660014) +val onTertiaryContainerDark = Color(0xFFFFE5EB) val errorDark = Color(0xFFFFB4AB) val onErrorDark = Color(0xFF690005) val errorContainerDark = Color(0xFF93000A) val onErrorContainerDark = Color(0xFFFFDAD6) val backgroundDark = Color(0xFF151218) val onBackgroundDark = Color(0xFFE7E0E8) -val surfaceDark = Color(0xFF151218) -val onSurfaceDark = Color(0xFFE7E0E8) +val surfaceDark = Color(0xFF261604) +val onSurfaceDark = Color(0xFFFBEDE4) val surfaceVariantDark = Color(0xFF49454E) val onSurfaceVariantDark = Color(0xFFCBC4CF) val outlineDark = Color(0xFF948F99) @@ -161,18 +161,18 @@ val surfaceContainerDark = Color(0xFF261E18) val surfaceContainerHighDark = Color(0xFF312822) val surfaceContainerHighestDark = Color(0xFF3C332C) -val primaryDarkMediumContrast = Color(0xFFFDB186) -val onPrimaryDarkMediumContrast = Color(0xFF2C0C00) -val primaryContainerDarkMediumContrast = Color(0xFFC97E59) -val onPrimaryContainerDarkMediumContrast = Color(0xFF000000) -val secondaryDarkMediumContrast = Color(0xFFF0C470) -val onSecondaryDarkMediumContrast = Color(0xFF201400) -val secondaryContainerDarkMediumContrast = Color(0xFFB18B3D) -val onSecondaryContainerDarkMediumContrast = Color(0xFF664800) -val tertiaryDarkMediumContrast = Color(0xFFFFBD87) -val onTertiaryDarkMediumContrast = Color(0xFF663600) -val tertiaryContainerDarkMediumContrast = Color(0xFFC3824A) -val onTertiaryContainerDarkMediumContrast = Color(0xFF663600) +val primaryDarkMediumContrast = Color(0xFFF0FCB0) +val onPrimaryDarkMediumContrast = Color(0xFF626004) +val primaryContainerDarkMediumContrast = Color(0xFF313002) +val onPrimaryContainerDarkMediumContrast = Color(0xFFFDFCCE) +val secondaryDarkMediumContrast = Color(0xFFFFE523) +val onSecondaryDarkMediumContrast = Color(0xFF332D00) +val secondaryContainerDarkMediumContrast = Color(0xFF998700) +val onSecondaryContainerDarkMediumContrast = Color(0xFFFFF9CC) +val tertiaryDarkMediumContrast = Color(0xFFFF9AD8) +val onTertiaryDarkMediumContrast = Color(0xFF33000A) +val tertiaryContainerDarkMediumContrast = Color(0xFF660014) +val onTertiaryContainerDarkMediumContrast = Color(0xFFFFE5EB) val errorDarkMediumContrast = Color(0xFFFFD2CC) val onErrorDarkMediumContrast = Color(0xFF540003) val errorContainerDarkMediumContrast = Color(0xFFFF5449) @@ -187,8 +187,8 @@ val outlineDarkMediumContrast = Color(0xFFB6B0BA) val outlineVariantDarkMediumContrast = Color(0xFF948E98) val scrimDarkMediumContrast = Color(0xFF000000) val inverseSurfaceDarkMediumContrast = Color(0xFFE7E0E8) -val inverseOnSurfaceDarkMediumContrast = Color(0xFF2C292F) -val inversePrimaryDarkMediumContrast = Color(0xFF513E75) +val inverseOnSurfaceDarkMediumContrast = Color(0xFF322F35) +val inversePrimaryDarkMediumContrast = Color(0xFF68548E) val surfaceDimDarkMediumContrast = Color(0xFF19120C) val surfaceBrightDarkMediumContrast = Color(0xFF413731) val surfaceContainerLowestDarkMediumContrast = Color(0xFF140D08) @@ -197,18 +197,18 @@ val surfaceContainerDarkMediumContrast = Color(0xFF261E18) val surfaceContainerHighDarkMediumContrast = Color(0xFF312822) val surfaceContainerHighestDarkMediumContrast = Color(0xFF3C332C) -val primaryDarkHighContrast = Color(0xFFFFF9F8) -val onPrimaryDarkHighContrast = Color(0xFF000000) -val primaryContainerDarkHighContrast = Color(0xFFFFBC9C) -val onPrimaryContainerDarkHighContrast = Color(0xFF662500) -val secondaryDarkHighContrast = Color(0xFFFFFAF7) -val onSecondaryDarkHighContrast = Color(0xFF000000) -val secondaryContainerDarkHighContrast = Color(0xFFF0C470) -val onSecondaryContainerDarkHighContrast = Color(0xFF664800) -val tertiaryDarkHighContrast = Color(0xFFFFE5CC) -val onTertiaryDarkHighContrast = Color(0xFF000000) -val tertiaryContainerDarkHighContrast = Color(0xFFFFBD87) -val onTertiaryContainerDarkHighContrast = Color(0xFF000000) +val primaryDarkHighContrast = Color(0xFFF0FCB0) +val onPrimaryDarkHighContrast = Color(0xFF626004) +val primaryContainerDarkHighContrast = Color(0xFF313002) +val onPrimaryContainerDarkHighContrast = Color(0xFFFDFCCE) +val secondaryDarkHighContrast = Color(0xFFFFE523) +val onSecondaryDarkHighContrast = Color(0xFF332D00) +val secondaryContainerDarkHighContrast = Color(0xFF998700) +val onSecondaryContainerDarkHighContrast = Color(0xFFFFF9CC) +val tertiaryDarkHighContrast = Color(0xFFFF9AD8) +val onTertiaryDarkHighContrast = Color(0xFF33000A) +val tertiaryContainerDarkHighContrast = Color(0xFF660014) +val onTertiaryContainerDarkHighContrast = Color(0xFFFFE5EB) val errorDarkHighContrast = Color(0xFFFFECE9) val onErrorDarkHighContrast = Color(0xFF000000) val errorContainerDarkHighContrast = Color(0xFFFFAEA4) diff --git a/Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/player/PlayerScreen.kt b/Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/player/PlayerScreen.kt index 9c7a4498b..fcbe58bd1 100644 --- a/Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/player/PlayerScreen.kt +++ b/Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/player/PlayerScreen.kt @@ -24,6 +24,7 @@ import androidx.compose.animation.core.spring import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.foundation.basicMarquee +import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.BoxWithConstraints @@ -52,13 +53,13 @@ import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.ArrowBack import androidx.compose.material.icons.automirrored.filled.PlaylistAdd -import androidx.compose.material.icons.filled.Forward10 import androidx.compose.material.icons.filled.MoreVert -import androidx.compose.material.icons.filled.Replay10 -import androidx.compose.material.icons.filled.SkipNext -import androidx.compose.material.icons.filled.SkipPrevious -import androidx.compose.material.icons.outlined.Pause -import androidx.compose.material.icons.outlined.PlayArrow +import androidx.compose.material.icons.rounded.Forward10 +import androidx.compose.material.icons.rounded.Pause +import androidx.compose.material.icons.rounded.PlayArrow +import androidx.compose.material.icons.rounded.Replay10 +import androidx.compose.material.icons.rounded.SkipNext +import androidx.compose.material.icons.rounded.SkipPrevious import androidx.compose.material3.ButtonGroup import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi @@ -741,8 +742,8 @@ private fun PlayerButtons( contentColor = MaterialTheme.colorScheme.onPrimary, disabledContainerColor = MaterialTheme.colorScheme.primary, disabledContentColor = MaterialTheme.colorScheme.onPrimary, - checkedContainerColor = MaterialTheme.colorScheme.primary, - checkedContentColor = MaterialTheme.colorScheme.onPrimary, + checkedContainerColor = MaterialTheme.colorScheme.tertiary, + checkedContentColor = MaterialTheme.colorScheme.onTertiary, ), shapes = ToggleButtonShapes( shape = RoundedCornerShape(60.dp), @@ -754,12 +755,13 @@ private fun PlayerButtons( .height(136.dp), ) { Icon( - imageVector = if (isPlaying) Icons.Outlined.Pause else Icons.Outlined.PlayArrow, + imageVector = if (isPlaying) Icons.Rounded.Pause else Icons.Rounded.PlayArrow, modifier = Modifier.fillMaxSize(), contentDescription = null, ) } ButtonGroup( + overflowIndicator = {}, modifier = Modifier.padding(vertical = 16.dp, horizontal = 8.dp), horizontalArrangement = Arrangement.spacedBy(8.dp), ) { @@ -769,78 +771,102 @@ private fun PlayerButtons( val rewindFastForwardButtonsModifier = Modifier .size(68.dp) + val interactionSources = List(4) { MutableInteractionSource() } + customItem( + buttonGroupContent = { + IconButton( + onClick = onPrevious, + modifier = skipButtonsModifier.animateWidth(interactionSource = interactionSources[0]), + shape = RoundedCornerShape(50.dp), + colors = IconButtonColors( + containerColor = MaterialTheme.colorScheme.surfaceContainerHighest, + contentColor = MaterialTheme.colorScheme.onSurface, + disabledContainerColor = MaterialTheme.colorScheme.surfaceContainerHighest, + disabledContentColor = MaterialTheme.colorScheme.onPrimary, + ), + interactionSource = interactionSources[0], + enabled = isPlaying, + ) { + Icon( + imageVector = Icons.Rounded.SkipPrevious, + contentDescription = null, + ) + } + }, + menuContent = { }, + ) - IconButton( - onClick = onPrevious, - modifier = skipButtonsModifier, - shape = RoundedCornerShape(50.dp), - colors = IconButtonColors( - containerColor = MaterialTheme.colorScheme.surfaceContainerHighest, - contentColor = MaterialTheme.colorScheme.onSurface, - disabledContainerColor = MaterialTheme.colorScheme.surfaceContainerHighest, - disabledContentColor = MaterialTheme.colorScheme.onPrimary, - ), - enabled = isPlaying, - ) { - Icon( - imageVector = Icons.Filled.SkipPrevious, - contentDescription = null, - ) - } - - IconButton( - onClick = { onRewindBy(Duration.ofSeconds(10)) }, - modifier = rewindFastForwardButtonsModifier, - shape = RoundedCornerShape(15.dp), - colors = IconButtonColors( - containerColor = MaterialTheme.colorScheme.secondary, - contentColor = MaterialTheme.colorScheme.onSecondary, - disabledContainerColor = MaterialTheme.colorScheme.secondary, - disabledContentColor = MaterialTheme.colorScheme.onSecondary, - ), - enabled = isPlaying, - ) { - Icon( - imageVector = Icons.Filled.Replay10, - contentDescription = null, - ) - } + customItem( + buttonGroupContent = { + IconButton( + onClick = { onRewindBy(Duration.ofSeconds(10)) }, + modifier = rewindFastForwardButtonsModifier.animateWidth(interactionSource = interactionSources[1]), + shape = RoundedCornerShape(15.dp), + colors = IconButtonColors( + containerColor = MaterialTheme.colorScheme.secondary, + contentColor = MaterialTheme.colorScheme.onSecondary, + disabledContainerColor = MaterialTheme.colorScheme.secondary, + disabledContentColor = MaterialTheme.colorScheme.onSecondary, + ), + interactionSource = interactionSources[1], + enabled = isPlaying, + ) { + Icon( + imageVector = Icons.Rounded.Replay10, + contentDescription = null, + ) + } + }, + menuContent = { }, + ) - IconButton( - onClick = { onAdvanceBy(Duration.ofSeconds(10)) }, - modifier = rewindFastForwardButtonsModifier, - shape = RoundedCornerShape(15.dp), - colors = IconButtonColors( - containerColor = MaterialTheme.colorScheme.secondary, - contentColor = MaterialTheme.colorScheme.onSecondary, - disabledContainerColor = MaterialTheme.colorScheme.secondary, - disabledContentColor = MaterialTheme.colorScheme.onSecondary, - ), - enabled = isPlaying, - ) { - Icon( - imageVector = Icons.Filled.Forward10, - contentDescription = null, - ) - } + customItem( + buttonGroupContent = { + IconButton( + onClick = { onAdvanceBy(Duration.ofSeconds(10)) }, + modifier = rewindFastForwardButtonsModifier.animateWidth(interactionSource = interactionSources[2]), + shape = RoundedCornerShape(15.dp), + colors = IconButtonColors( + containerColor = MaterialTheme.colorScheme.secondary, + contentColor = MaterialTheme.colorScheme.onSecondary, + disabledContainerColor = MaterialTheme.colorScheme.secondary, + disabledContentColor = MaterialTheme.colorScheme.onSecondary, + ), + interactionSource = interactionSources[2], + enabled = isPlaying, + ) { + Icon( + imageVector = Icons.Rounded.Forward10, + contentDescription = null, + ) + } + }, + menuContent = { }, + ) - IconButton( - onClick = onNext, - modifier = skipButtonsModifier, - shape = RoundedCornerShape(50.dp), - colors = IconButtonColors( - containerColor = MaterialTheme.colorScheme.surfaceContainerHighest, - contentColor = MaterialTheme.colorScheme.onSurface, - disabledContainerColor = MaterialTheme.colorScheme.surfaceContainerHighest, - disabledContentColor = MaterialTheme.colorScheme.onSurface, - ), - enabled = hasNext, - ) { - Icon( - imageVector = Icons.Filled.SkipNext, - contentDescription = null, - ) - } + customItem( + buttonGroupContent = { + IconButton( + onClick = onNext, + modifier = skipButtonsModifier.animateWidth(interactionSource = interactionSources[3]), + shape = RoundedCornerShape(50.dp), + colors = IconButtonColors( + containerColor = MaterialTheme.colorScheme.surfaceContainerHighest, + contentColor = MaterialTheme.colorScheme.onSurface, + disabledContainerColor = MaterialTheme.colorScheme.surfaceContainerHighest, + disabledContentColor = MaterialTheme.colorScheme.onSurface, + ), + interactionSource = interactionSources[3], + enabled = hasNext, + ) { + Icon( + imageVector = Icons.Rounded.SkipNext, + contentDescription = null, + ) + } + }, + menuContent = { }, + ) } } } diff --git a/Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/podcast/PodcastDetailsScreen.kt b/Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/podcast/PodcastDetailsScreen.kt index a08752784..7d317ce70 100644 --- a/Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/podcast/PodcastDetailsScreen.kt +++ b/Jetcaster/mobile/src/main/java/com/example/jetcaster/ui/podcast/PodcastDetailsScreen.kt @@ -21,8 +21,10 @@ import androidx.compose.animation.core.EaseOutExpo import androidx.compose.animation.core.tween import androidx.compose.foundation.background import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height @@ -289,63 +291,88 @@ fun PodcastDetailsDescription(podcast: PodcastInfo, modifier: Modifier) { @Composable fun PodcastDetailsHeaderItemButtons(isSubscribed: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier) { var isNotificationOn by remember { mutableStateOf(false) } - ButtonGroup(modifier = modifier) { - ToggleButton( - checked = isSubscribed, - onCheckedChange = { onClick() }, - colors = ToggleButtonColors( - containerColor = MaterialTheme.colorScheme.secondary, - contentColor = MaterialTheme.colorScheme.onSecondary, - disabledContainerColor = MaterialTheme.colorScheme.inverseSurface, - disabledContentColor = MaterialTheme.colorScheme.surfaceVariant, - checkedContainerColor = MaterialTheme.colorScheme.surfaceContainer, - checkedContentColor = MaterialTheme.colorScheme.secondary, - ), - shapes = ToggleButtonShapes( - shape = RoundedCornerShape(15.dp), - pressedShape = RoundedCornerShape(if (isSubscribed) 15.dp else 60.dp), - checkedShape = RoundedCornerShape(60.dp), - ), - modifier = Modifier - .width(76.dp) - .height(56.dp) - .semantics(mergeDescendants = true) { }, - ) { - Icon( - imageVector = if (isSubscribed) - Icons.Default.Check - else - Icons.Default.Add, - contentDescription = null, - ) - } - ToggleButton( - checked = isNotificationOn, - onCheckedChange = { isNotificationOn = !isNotificationOn }, - colors = ToggleButtonColors( - containerColor = MaterialTheme.colorScheme.inverseSurface, - contentColor = MaterialTheme.colorScheme.surfaceVariant, - disabledContainerColor = MaterialTheme.colorScheme.inverseSurface, - disabledContentColor = MaterialTheme.colorScheme.surfaceVariant, - checkedContainerColor = MaterialTheme.colorScheme.surfaceContainer, - checkedContentColor = MaterialTheme.colorScheme.secondary, - ), - shapes = ToggleButtonShapes( - shape = RoundedCornerShape(100.dp), - pressedShape = RoundedCornerShape(if (isNotificationOn) 100.dp else 20.dp), - checkedShape = RoundedCornerShape(20.dp), - ), - modifier = Modifier.size(56.dp), - ) { - Icon( - imageVector = if (isNotificationOn) { - Icons.Default.NotificationsActive - } else { - Icons.Default.NotificationsNone - }, - contentDescription = stringResource(R.string.cd_more), - ) - } + val interactionSource1 = remember { MutableInteractionSource() } + val interactionSource2 = remember { MutableInteractionSource() } + ButtonGroup( + overflowIndicator = {}, + modifier = modifier, + ) { + customItem( + buttonGroupContent = { + ToggleButton( + checked = isSubscribed, + onCheckedChange = { onClick() }, + colors = ToggleButtonColors( + containerColor = MaterialTheme.colorScheme.secondary, + contentColor = MaterialTheme.colorScheme.onSecondary, + disabledContainerColor = MaterialTheme.colorScheme.inverseSurface, + disabledContentColor = MaterialTheme.colorScheme.surfaceVariant, + checkedContainerColor = MaterialTheme.colorScheme.surfaceContainer, + checkedContentColor = MaterialTheme.colorScheme.secondary, + ), + shapes = ToggleButtonShapes( + shape = RoundedCornerShape(15.dp), + pressedShape = RoundedCornerShape(if (isSubscribed) 15.dp else 60.dp), + checkedShape = RoundedCornerShape(60.dp), + ), + modifier = Modifier + .width(76.dp) + .height(56.dp) + .animateWidth(interactionSource = interactionSource1) + .semantics(mergeDescendants = true) { }, + interactionSource = interactionSource1, + ) { + Icon( + imageVector = if (isSubscribed) + Icons.Default.Check + else + Icons.Default.Add, + contentDescription = null, + ) + } + }, + menuContent = { }, + ) + + customItem( + buttonGroupContent = { + ToggleButton( + checked = isNotificationOn, + onCheckedChange = { isNotificationOn = !isNotificationOn }, + colors = ToggleButtonColors( + containerColor = MaterialTheme.colorScheme.inverseSurface, + contentColor = MaterialTheme.colorScheme.surfaceVariant, + disabledContainerColor = MaterialTheme.colorScheme.inverseSurface, + disabledContentColor = MaterialTheme.colorScheme.surfaceVariant, + checkedContainerColor = MaterialTheme.colorScheme.surfaceContainer, + checkedContentColor = MaterialTheme.colorScheme.secondary, + ), + shapes = ToggleButtonShapes( + shape = RoundedCornerShape(100.dp), + pressedShape = RoundedCornerShape(if (isNotificationOn) 100.dp else 20.dp), + checkedShape = RoundedCornerShape(20.dp), + ), + interactionSource = interactionSource2, + modifier = Modifier + .size(56.dp) + .animateWidth(interactionSource = interactionSource2), + ) { + Icon( + imageVector = if (isNotificationOn) { + Icons.Default.NotificationsActive + } else { + Icons.Default.NotificationsNone + }, + contentDescription = stringResource(R.string.cd_more), + ) + } + }, + menuContent = {}, + ) + customItem( + buttonGroupContent = { Spacer(modifier.weight(1f)) }, + menuContent = { }, + ) } }