Make the buttons in a responsive dialog be responsive. (#2023)

* Make the buttons in a responsive dialog be responsive. * Buttons get wider after the 225.dp breakpoint * Added dialog activity as a sample to try different dialogs --------- Co-authored-by: ssancho14 <[email protected]>
google · Feb 6, 2024 · 91df639 · 91df639
1 parent 9d3cec9
commit 91df639
Show file tree

Hide file tree

Showing 23 changed files with 377 additions and 53 deletions.
diff --git a/...material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt b/...material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt
@@ -20,23 +20,32 @@ import android.R
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Arrangement.spacedBy
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Check
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.wear.compose.foundation.lazy.ScalingLazyListScope
 import androidx.wear.compose.material.ButtonDefaults
+import androidx.wear.compose.material.ChipColors
+import androidx.wear.compose.material.ChipDefaults
 import androidx.wear.compose.material.LocalTextStyle
 import androidx.wear.compose.material.MaterialTheme
 import com.google.android.horologist.annotations.ExperimentalHorologistApi
@@ -45,6 +54,7 @@ import com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults.re
 import com.google.android.horologist.compose.layout.ScalingLazyColumnState
 import com.google.android.horologist.compose.layout.ScreenScaffold
 import com.google.android.horologist.compose.layout.rememberColumnState
+import com.google.android.horologist.images.base.paintable.ImageVectorPaintable
 
 @ExperimentalHorologistApi
 @Composable
@@ -115,31 +125,39 @@ public fun ResponsiveDialogContent(
                 }
                 if (onOk != null || onCancel != null) {
                     item {
+                        val width = LocalConfiguration.current.screenWidthDp
+                        // Single buttons, or buttons on smaller screens are not meant to be
+                        // responsive.
+                        val buttonWidth = if (width < 225 || onOk == null || onCancel == null) {
+                            ButtonDefaults.DefaultButtonSize
+                        } else {
+                            // 14.52% margin on the sides, 4.dp between.
+                            ((width * (1f - 2 * 0.1452f) - 4) / 2).dp
+                        }
                         Row(
                             Modifier
                                 .fillMaxWidth()
                                 .padding(
                                     top = if (content != null || message != null) 12.dp else 0.dp,
                                 ),
-                            horizontalArrangement = spacedBy(
-                                4.dp,
-                                Alignment.CenterHorizontally,
-                            ),
+                            horizontalArrangement = spacedBy(4.dp, Alignment.CenterHorizontally),
                             verticalAlignment = Alignment.CenterVertically,
                         ) {
                             onCancel?.let {
-                                Button(
-                                    imageVector = Icons.Default.Close,
-                                    contentDescription = cancelButtonContentDescription,
+                                ResponsiveButton(
+                                    icon = Icons.Default.Close,
+                                    cancelButtonContentDescription,
                                     onClick = it,
-                                    colors = ButtonDefaults.secondaryButtonColors(),
+                                    buttonWidth,
+                                    ChipDefaults.secondaryChipColors(),
                                 )
                             }
                             onOk?.let {
-                                Button(
-                                    imageVector = Icons.Default.Check,
-                                    contentDescription = okButtonContentDescription,
-                                    onClick = onOk,
+                                ResponsiveButton(
+                                    icon = Icons.Default.Check,
+                                    okButtonContentDescription,
+                                    onClick = it,
+                                    buttonWidth,
                                 )
                             }
                         }
@@ -150,6 +168,34 @@ public fun ResponsiveDialogContent(
     }
 }
 
+@Composable
+private fun ResponsiveButton(
+    icon: ImageVector,
+    contentDescription: String,
+    onClick: () -> Unit,
+    buttonWidth: Dp,
+    colors: ChipColors = ChipDefaults.primaryChipColors(),
+) {
+    androidx.wear.compose.material.Chip(
+        label = {
+            Box(Modifier.fillMaxWidth()) {
+                Icon(
+                    paintable = ImageVectorPaintable(icon),
+                    contentDescription = contentDescription,
+                    modifier = Modifier
+                        .size(ButtonDefaults.DefaultIconSize)
+                        .align(Alignment.Center),
+                )
+            }
+        },
+        contentPadding = PaddingValues(0.dp),
+        shape = CircleShape,
+        onClick = onClick,
+        modifier = Modifier.width(buttonWidth),
+        colors = colors,
+    )
+}
+
 internal const val globalHorizontalPadding = 5.2f
 internal const val messageExtraHorizontalPadding = 4.16f
 internal const val titleExtraHorizontalPadding = 8.84f

diff --git a/sample/src/main/AndroidManifest.xml b/sample/src/main/AndroidManifest.xml
@@ -32,7 +32,7 @@
         android:theme="@android:style/ThemeOverlay.Material.Dark">
         <uses-library
             android:name="com.google.android.wearable"
-            android:required="true" />
+            android:required="false" />
 
         <meta-data
             android:name="com.google.android.wearable.standalone"
@@ -72,6 +72,17 @@
             </intent-filter>
         </activity>
 
+        <activity
+            android:name="com.google.android.horologist.scratch.DialogActivity"
+            android:exported="true"
+            android:label="Dialog Sample"
+            android:taskAffinity=".dialog">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
+
         <service
             android:name=".tiles.ExampleTileService"
             android:description="@string/tile_description"