[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

demos/compose/src/main/java/androidx/media3/demo/compose/MainActivity.kt

@@ -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()

demos/compose/src/main/java/androidx/media3/demo/compose/buttons/MinimalControls.kt

@@ -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)
+    modifier.size(40.dp).background(graySemiTransparentBackground, CircleShape)
-  Row(
+  Row(modifier = modifier, verticalAlignment = Alignment.CenterVertically) {
-    modifier = modifier.fillMaxWidth(),
+    Spacer(Modifier.weight(1f))
-    horizontalArrangement = Arrangement.SpaceEvenly,
-    verticalAlignment = Alignment.CenterVertically,
-  ) {
     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))
   }
 }

demos/compose/src/main/java/androidx/media3/demo/compose/buttons/NextButton.kt

@@ -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(
-    Icon(
+    Icons.Default.SkipNext,
-      Icons.Default.SkipNext,
+    contentDescription = stringResource(R.string.next_button),
-      contentDescription = stringResource(R.string.next_button),
+    modifier = modifier.clickable(enabled = state.isEnabled, onClick = state::onClick),
-      modifier = modifier,
+  )
-    )
-  }
 }

demos/compose/src/main/java/androidx/media3/demo/compose/buttons/PlayPauseButton.kt

@@ -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(icon, contentDescription = contentDescription, modifier = modifier)
+    icon,
-  }
+    contentDescription = contentDescription,
+    modifier = modifier.clickable(enabled = state.isEnabled, onClick = state::onClick),
+  )
 }

demos/compose/src/main/java/androidx/media3/demo/compose/buttons/PreviousButton.kt

@@ -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(
-    Icon(
+    Icons.Default.SkipPrevious,
-      Icons.Default.SkipPrevious,
+    contentDescription = stringResource(R.string.previous_button),
-      contentDescription = stringResource(R.string.previous_button),
+    modifier = modifier.clickable(enabled = state.isEnabled, onClick = state::onClick),
-      modifier = modifier,
+  )
-    )
-  }
 }