[demo-compose] Replace IconButton usage with clickable Icon

IconButton comes with some nice defaults for padding and colour, but it also requires a Modifier, on top of Icon's modifier. That makes it difficult to specify multiple Modifiers from the caller.

Since the main functionality it provides is the `enabled` and `onClick` fields, we could replicate the same behaviour using Icon's Modifier.

PiperOrigin-RevId: 756280557
This commit is contained in:
jbibik 2025-05-08 06:09:50 -07:00 committed by Copybara-Service
parent 9073c2b28d
commit 1f405e6ffa
5 changed files with 26 additions and 29 deletions

View File

@ -133,7 +133,7 @@ private fun MediaPlayerScreen(player: Player, modifier: Modifier = Modifier) {
if (showControls) {
// drawn on top of a potential shutter
MinimalControls(player, Modifier.align(Alignment.Center))
MinimalControls(player, Modifier.align(Alignment.Center).fillMaxWidth())
ExtraControls(
player,
Modifier.fillMaxWidth()

View File

@ -17,9 +17,8 @@
package androidx.media3.demo.compose.buttons
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
@ -38,14 +37,14 @@ import androidx.media3.common.Player
internal fun MinimalControls(player: Player, modifier: Modifier = Modifier) {
val graySemiTransparentBackground = Color.Gray.copy(alpha = 0.1f)
val modifierForIconButton =
modifier.size(80.dp).background(graySemiTransparentBackground, CircleShape)
Row(
modifier = modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly,
verticalAlignment = Alignment.CenterVertically,
) {
modifier.size(40.dp).background(graySemiTransparentBackground, CircleShape)
Row(modifier = modifier, verticalAlignment = Alignment.CenterVertically) {
Spacer(Modifier.weight(1f))
PreviousButton(player, Modifier.weight(1f).then(modifierForIconButton))
Spacer(Modifier.weight(1f))
PlayPauseButton(player, Modifier.weight(1f).then(modifierForIconButton))
Spacer(Modifier.weight(1f))
NextButton(player, Modifier.weight(1f).then(modifierForIconButton))
Spacer(Modifier.weight(1f))
}
}

View File

@ -16,10 +16,10 @@
package androidx.media3.demo.compose.buttons
import androidx.compose.foundation.clickable
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.SkipNext
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
@ -30,11 +30,9 @@ import androidx.media3.ui.compose.state.rememberNextButtonState
@Composable
internal fun NextButton(player: Player, modifier: Modifier = Modifier) {
val state = rememberNextButtonState(player)
IconButton(onClick = state::onClick, modifier = modifier, enabled = state.isEnabled) {
Icon(
Icons.Default.SkipNext,
contentDescription = stringResource(R.string.next_button),
modifier = modifier,
)
}
Icon(
Icons.Default.SkipNext,
contentDescription = stringResource(R.string.next_button),
modifier = modifier.clickable(enabled = state.isEnabled, onClick = state::onClick),
)
}

View File

@ -16,11 +16,11 @@
package androidx.media3.demo.compose.buttons
import androidx.compose.foundation.clickable
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Pause
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
@ -35,7 +35,9 @@ internal fun PlayPauseButton(player: Player, modifier: Modifier = Modifier) {
val contentDescription =
if (state.showPlay) stringResource(R.string.playpause_button_play)
else stringResource(R.string.playpause_button_pause)
IconButton(onClick = state::onClick, modifier = modifier, enabled = state.isEnabled) {
Icon(icon, contentDescription = contentDescription, modifier = modifier)
}
Icon(
icon,
contentDescription = contentDescription,
modifier = modifier.clickable(enabled = state.isEnabled, onClick = state::onClick),
)
}

View File

@ -16,10 +16,10 @@
package androidx.media3.demo.compose.buttons
import androidx.compose.foundation.clickable
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.SkipPrevious
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
@ -30,11 +30,9 @@ import androidx.media3.ui.compose.state.rememberPreviousButtonState
@Composable
internal fun PreviousButton(player: Player, modifier: Modifier = Modifier) {
val state = rememberPreviousButtonState(player)
IconButton(onClick = state::onClick, modifier = modifier, enabled = state.isEnabled) {
Icon(
Icons.Default.SkipPrevious,
contentDescription = stringResource(R.string.previous_button),
modifier = modifier,
)
}
Icon(
Icons.Default.SkipPrevious,
contentDescription = stringResource(R.string.previous_button),
modifier = modifier.clickable(enabled = state.isEnabled, onClick = state::onClick),
)
}