Set ripple effect for Audio UI SettingsButton. (#1947)

composables/api/current.api

@@ -160,6 +160,10 @@ package com.google.android.horologist.composables {
     method @androidx.compose.runtime.Composable public static void TimePickerWith12HourClock(kotlin.jvm.functions.Function1<? super java.time.LocalTime,kotlin.Unit> onTimeConfirm, optional androidx.compose.ui.Modifier modifier, optional java.time.LocalTime time);
   }
 
+  public final class UnboundedRippleButtonKt {
+    method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void UnboundedRippleButton(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, optional androidx.compose.ui.Modifier modifier, optional float rippleRadius, optional boolean enabled, optional androidx.wear.compose.material.ButtonColors colors, optional androidx.compose.foundation.interaction.MutableInteractionSource interactionSource, optional androidx.compose.ui.graphics.Shape shape, optional androidx.wear.compose.material.ButtonBorder border, kotlin.jvm.functions.Function1<? super androidx.compose.foundation.layout.BoxScope,kotlin.Unit> content);
+  }
+
 }
 
 package com.google.android.horologist.composables.picker {

media/ui/src/main/java/com/google/android/horologist/media/ui/components/controls/UnboundedRippleButton.kt → composables/src/main/java/com/google/android/horologist/composables/UnboundedRippleButton.kt

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-package com.google.android.horologist.media.ui.components.controls
+package com.google.android.horologist.composables
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
@@ -40,6 +40,7 @@ import androidx.wear.compose.material.LocalContentAlpha
 import androidx.wear.compose.material.LocalContentColor
 import androidx.wear.compose.material.LocalTextStyle
 import androidx.wear.compose.material.MaterialTheme
+import com.google.android.horologist.annotations.ExperimentalHorologistApi
 
 /**
  * A button that when clicked shows an unbounded ripple effect that can be larger than the button
@@ -48,8 +49,9 @@ import androidx.wear.compose.material.MaterialTheme
  * Code modified from https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:wear/compose/compose-material/src/main/java/androidx/wear/compose/material/Button.kt
  *
  */
+@ExperimentalHorologistApi
 @Composable
-internal fun UnboundedRippleButton(
+public fun UnboundedRippleButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     rippleRadius: Dp = Dp.Unspecified,

media/audio-ui/build.gradle.kts

@@ -101,6 +101,7 @@ dependencies {
     api(projects.annotations)
     implementation(projects.composeLayout)
     implementation(projects.composeMaterial)
+    implementation(project(":composables"))
     debugImplementation(projects.logo)
 
     api(libs.wearcompose.material)
@@ -109,6 +110,7 @@ dependencies {
 
     implementation(libs.compose.material.iconscore)
     implementation(libs.compose.material.iconsext)
+    implementation(libs.compose.material.ripple)
 
     implementation(libs.androidx.wear)
     implementation(libs.androidx.lifecycle.viewmodel.compose)

media/audio-ui/src/main/java/com/google/android/horologist/audio/ui/components/actions/SettingsButton.kt

@@ -24,10 +24,10 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import androidx.wear.compose.material.Button
 import androidx.wear.compose.material.ButtonDefaults.buttonColors
 import androidx.wear.compose.material.MaterialTheme
 import com.google.android.horologist.audio.VolumeState
+import com.google.android.horologist.composables.UnboundedRippleButton
 import com.google.android.horologist.compose.material.Icon
 import com.google.android.horologist.compose.material.IconRtlMode
 import com.google.android.horologist.images.base.paintable.ImageVectorPaintable.Companion.asPaintable
@@ -48,7 +48,7 @@ public fun SettingsButton(
     iconSize: Dp = 26.dp,
     tapTargetSize: Dp = 52.dp,
 ) {
-    Button(
+    UnboundedRippleButton(
         modifier = modifier.size(tapTargetSize),
         onClick = onClick,
         colors = buttonColors(
@@ -57,6 +57,7 @@ public fun SettingsButton(
             contentColor = MaterialTheme.colors.onSurface,
         ),
         enabled = enabled,
+        rippleRadius = tapTargetSize / 2,
     ) {
         Icon(
             paintable = imageVector.asPaintable(),

media/ui/src/main/java/com/google/android/horologist/media/ui/components/animated/AnimatedMediaButton.kt

@@ -37,7 +37,7 @@ import com.airbnb.lottie.compose.LottieDynamicProperties
 import com.airbnb.lottie.compose.rememberLottieAnimatable
 import com.google.android.horologist.annotations.ExperimentalHorologistApi
 import com.google.android.horologist.composables.RepeatableClickableButton
-import com.google.android.horologist.media.ui.components.controls.UnboundedRippleButton
+import com.google.android.horologist.composables.UnboundedRippleButton
 import kotlinx.coroutines.launch
 import androidx.compose.ui.semantics.contentDescription as contentDescriptionProperty
 

media/ui/src/main/java/com/google/android/horologist/media/ui/components/controls/MediaButton.kt

@@ -40,6 +40,7 @@ import androidx.wear.compose.material.ButtonDefaults
 import androidx.wear.compose.material.Icon
 import androidx.wear.compose.material.MaterialTheme
 import com.google.android.horologist.annotations.ExperimentalHorologistApi
+import com.google.android.horologist.composables.UnboundedRippleButton
 import com.google.android.horologist.media.ui.components.controls.MediaButtonDefaults.mediaButtonDefaultColors
 
 /**