Refactor ToolSelector and fix shapes that left a bit of transparent background

Author: devbridie

feature/results/src/main/java/com/android/developers/androidify/customize/ToolSelector.kt

@@ -13,12 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@file:OptIn(ExperimentalMaterial3ExpressiveApi::class)
+
 package com.android.developers.androidify.customize
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.size
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.FloatingToolbarColors
 import androidx.compose.material3.HorizontalFloatingToolbar
@@ -33,8 +36,8 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.android.developers.androidify.theme.AndroidifyTheme
+import com.android.developers.androidify.theme.Primary
 
-@OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Composable
 fun ToolSelector(
     tools: List<CustomizeTool>,
@@ -43,103 +46,106 @@ fun ToolSelector(
     horizontal: Boolean,
     modifier: Modifier = Modifier,
 ) {
+    val buttons = @Composable {
+        tools.forEachIndexed { index, tool ->
+            ToolSelectorToggleButton(
+                modifier = Modifier,
+                tool = tool,
+                checked = selectedOption == tool,
+                onCheckedChange = { onToolSelected(tool) },
+            )
+            if (index != tools.size - 1) {
+                Spacer(Modifier.size(8.dp))
+            }
+        }
+    }
+    val toolbarColors = FloatingToolbarColors(
+        toolbarContainerColor = MaterialTheme.colorScheme.surface,
+        toolbarContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
+        fabContainerColor = MaterialTheme.colorScheme.tertiary,
+        fabContentColor = MaterialTheme.colorScheme.onTertiary,
+    )
+
     if (horizontal) {
         HorizontalFloatingToolbar(
-            modifier = modifier.border(
-                2.dp,
-                color = MaterialTheme.colorScheme.outline,
-                shape = MaterialTheme.shapes.large,
-            ).padding(2.dp),
-            colors = FloatingToolbarColors(
-                toolbarContainerColor = MaterialTheme.colorScheme.surface,
-                toolbarContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
-                fabContainerColor = MaterialTheme.colorScheme.tertiary,
-                fabContentColor = MaterialTheme.colorScheme.onTertiary,
-            ),
+            modifier = modifier.toolbarBorder(),
+            shape = MaterialTheme.shapes.large,
+            colors = toolbarColors,
             expanded = true,
         ) {
-            tools.forEachIndexed { index, tool ->
-                ToggleButton(
-                    modifier = Modifier,
-                    checked = selectedOption == tool,
-                    onCheckedChange = { onToolSelected(tool) },
-                    shapes = ToggleButtonDefaults.shapes(checkedShape = MaterialTheme.shapes.large),
-                    colors = ToggleButtonDefaults.toggleButtonColors(
-                        checkedContainerColor = MaterialTheme.colorScheme.onSurface,
-                        containerColor = MaterialTheme.colorScheme.surface,
-                    ),
-                ) {
-                    Icon(
-                        painterResource(tool.icon),
-                        contentDescription = tool.displayName,
-                    )
-                }
-                if (index != tools.size - 1) {
-                    Spacer(Modifier.width(8.dp))
-                }
-            }
+            buttons()
         }
     } else {
         VerticalFloatingToolbar(
-            modifier = modifier.border(
-                2.dp,
-                color = MaterialTheme.colorScheme.outline,
-                shape = MaterialTheme.shapes.large,
-            ).padding(2.dp),
-            colors = FloatingToolbarColors(
-                toolbarContainerColor = MaterialTheme.colorScheme.surface,
-                toolbarContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
-                fabContainerColor = MaterialTheme.colorScheme.tertiary,
-                fabContentColor = MaterialTheme.colorScheme.onTertiary,
-            ),
+            modifier = modifier.toolbarBorder(),
+            shape = MaterialTheme.shapes.large,
+            colors = toolbarColors,
             expanded = true,
         ) {
-            tools.forEachIndexed { index, tool ->
-                ToggleButton(
-                    modifier = Modifier,
-                    checked = selectedOption == tool,
-                    onCheckedChange = { onToolSelected(tool) },
-                    shapes = ToggleButtonDefaults.shapes(checkedShape = MaterialTheme.shapes.large),
-                    colors = ToggleButtonDefaults.toggleButtonColors(
-                        checkedContainerColor = MaterialTheme.colorScheme.onSurface,
-                        containerColor = MaterialTheme.colorScheme.surface,
-                    ),
-                ) {
-                    Icon(
-                        painterResource(tool.icon),
-                        contentDescription = tool.displayName,
-                    )
-                }
-                if (index != tools.size - 1) {
-                    Spacer(Modifier.width(8.dp))
-                }
-            }
+            buttons()
         }
     }
 }
 
+@Composable
+private fun ToolSelectorToggleButton(
+    tool: CustomizeTool,
+    checked: Boolean,
+    onCheckedChange: (Boolean) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    ToggleButton(
+        modifier = modifier,
+        checked = checked,
+        onCheckedChange = onCheckedChange,
+        shapes = ToggleButtonDefaults.shapes(
+            checkedShape = MaterialTheme.shapes.large,
+        ),
+        colors = ToggleButtonDefaults.toggleButtonColors(
+            checkedContainerColor = MaterialTheme.colorScheme.onSurface,
+            containerColor = MaterialTheme.colorScheme.surface,
+        ),
+    ) {
+        Icon(
+            painterResource(tool.icon),
+            contentDescription = tool.displayName,
+        )
+    }
+}
+
+@Composable
+private fun Modifier.toolbarBorder() = this.border(
+    2.dp,
+    color = MaterialTheme.colorScheme.outline,
+    shape = MaterialTheme.shapes.large,
+)
+
 @Preview
 @Composable
 private fun ToolsPreviewHorizontal() {
     AndroidifyTheme {
-        ToolSelector(
-            tools = listOf(CustomizeTool.Size, CustomizeTool.Background),
-            selectedOption = CustomizeTool.Size,
-            horizontal = true,
-            onToolSelected = {},
-        )
+        Box(Modifier.background(Primary)) {
+            ToolSelector(
+                tools = listOf(CustomizeTool.Size, CustomizeTool.Background),
+                selectedOption = CustomizeTool.Size,
+                horizontal = true,
+                onToolSelected = {},
+            )
+        }
     }
 }
 
 @Preview
 @Composable
 private fun ToolsPreviewVertical() {
     AndroidifyTheme {
-        ToolSelector(
-            tools = listOf(CustomizeTool.Size, CustomizeTool.Background),
-            selectedOption = CustomizeTool.Size,
-            horizontal = false,
-            onToolSelected = {},
-        )
+        Box(Modifier.background(Primary)) {
+            ToolSelector(
+                tools = listOf(CustomizeTool.Size, CustomizeTool.Background),
+                selectedOption = CustomizeTool.Size,
+                horizontal = false,
+                onToolSelected = {},
+            )
+        }
     }
 }