Fix category ripple effect (#1371)

after category chip https://github.com/android/compose-samples/assets/3973717/8bfe2fc4-3fa8-4010-b6d8-29860ccae43a before podcast item https://github.com/android/compose-samples/assets/3973717/eb1688cf-07f2-47d8-9102-7523c108b164 after podcast item https://github.com/android/compose-samples/assets/3973717/e439c517-acce-42b8-803e-074b724d1136
android · Apr 26, 2024 · 16aa20a · 16aa20a
2 parents 2a0be09 + ec6430c
commit 16aa20a
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 57 deletions.
diff --git a/Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/category/PodcastCategory.kt b/Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/category/PodcastCategory.kt
@@ -17,10 +17,10 @@
 package com.example.jetcaster.ui.home.category
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -31,7 +31,6 @@ import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.grid.LazyGridScope
 import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.foundation.lazy.items
-import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -130,15 +129,20 @@ private fun CategoryPodcastRow(
     navigateToPodcastDetails: (PodcastInfo) -> Unit,
     modifier: Modifier = Modifier
 ) {
-    val lastIndex = podcasts.size - 1
     LazyRow(
         modifier = modifier,
-        contentPadding = PaddingValues(start = Keyline1, top = 8.dp, end = Keyline1, bottom = 24.dp)
+        contentPadding = PaddingValues(
+            start = Keyline1,
+            top = 8.dp,
+            end = Keyline1,
+            bottom = 24.dp
+        ),
+        horizontalArrangement = Arrangement.spacedBy(24.dp)
     ) {
-        itemsIndexed(
+        items(
             items = podcasts,
-            key = { _, p -> p.uri }
-        ) { index, podcast ->
+            key = { it.uri }
+        ) { podcast ->
             TopPodcastRowItem(
                 podcastTitle = podcast.title,
                 podcastImageUrl = podcast.imageUrl,
@@ -150,8 +154,6 @@ private fun CategoryPodcastRow(
                         navigateToPodcastDetails(podcast)
                     }
             )
-
-            if (index < lastIndex) Spacer(Modifier.width(24.dp))
         }
     }
 }

diff --git a/Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/discover/Discover.kt b/Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/discover/Discover.kt
@@ -25,14 +25,16 @@ import androidx.compose.foundation.lazy.LazyListScope
 import androidx.compose.foundation.lazy.grid.LazyGridScope
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Check
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
+import androidx.compose.material3.LocalMinimumInteractiveComponentEnforcement
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ScrollableTabRow
 import androidx.compose.material3.Surface
-import androidx.compose.material3.Tab
 import androidx.compose.material3.TabPosition
 import androidx.compose.material3.Text
 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.Color
@@ -139,61 +141,65 @@ private fun PodcastCategoryTabs(
         modifier = modifier
     ) {
         filterableCategoriesModel.categories.forEachIndexed { index, category ->
-            Tab(
+            ChoiceChipContent(
+                text = category.name,
                 selected = index == selectedIndex,
-                onClick = { onCategorySelected(category) }
-            ) {
-                ChoiceChipContent(
-                    text = category.name,
-                    selected = index == selectedIndex,
-                    modifier = Modifier.padding(horizontal = 4.dp, vertical = 16.dp)
-                )
-            }
+                modifier = Modifier.padding(horizontal = 4.dp, vertical = 16.dp),
+                onClick = { onCategorySelected(category) },
+            )
         }
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun ChoiceChipContent(
     text: String,
     selected: Boolean,
+    onClick: () -> Unit,
     modifier: Modifier = Modifier
 ) {
-    Surface(
-        color = when {
-            selected -> MaterialTheme.colorScheme.secondaryContainer
-            else -> MaterialTheme.colorScheme.surfaceContainer
-        },
-        contentColor = when {
-            selected -> MaterialTheme.colorScheme.onSecondaryContainer
-            else -> MaterialTheme.colorScheme.onSurfaceVariant
-        },
-        shape = MaterialTheme.shapes.medium,
-        modifier = modifier
-    ) {
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
-            modifier = Modifier.padding(
-                horizontal = when {
-                    selected -> 8.dp
-                    else -> 16.dp
-                },
-                vertical = 8.dp
-            )
+    // When adding onClick to Surface, it automatically makes this item higher.
+    // On the other hand, adding .clickable modifier, doesn't use the same shape as Surface.
+    // This way we disable the minimum height requirement
+    CompositionLocalProvider(value = LocalMinimumInteractiveComponentEnforcement provides false) {
+        Surface(
+            color = when {
+                selected -> MaterialTheme.colorScheme.secondaryContainer
+                else -> MaterialTheme.colorScheme.surfaceContainer
+            },
+            contentColor = when {
+                selected -> MaterialTheme.colorScheme.onSecondaryContainer
+                else -> MaterialTheme.colorScheme.onSurfaceVariant
+            },
+            shape = MaterialTheme.shapes.medium,
+            modifier = modifier,
+            onClick = onClick,
         ) {
-            if (selected) {
-                Icon(
-                    imageVector = Icons.Default.Check,
-                    contentDescription = stringResource(id = R.string.cd_selected_category),
-                    modifier = Modifier
-                        .height(18.dp)
-                        .padding(end = 8.dp)
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier.padding(
+                    horizontal = when {
+                        selected -> 8.dp
+                        else -> 16.dp
+                    },
+                    vertical = 8.dp
+                )
+            ) {
+                if (selected) {
+                    Icon(
+                        imageVector = Icons.Default.Check,
+                        contentDescription = stringResource(id = R.string.cd_selected_category),
+                        modifier = Modifier
+                            .height(18.dp)
+                            .padding(end = 8.dp)
+                    )
+                }
+                Text(
+                    text = text,
+                    style = MaterialTheme.typography.bodyMedium,
                 )
             }
-            Text(
-                text = text,
-                style = MaterialTheme.typography.bodyMedium,
-            )
         }
     }
 }
diff --git a/Jetcaster/app/src/main/java/com/example/jetcaster/ui/shared/EpisodeListItem.kt b/Jetcaster/app/src/main/java/com/example/jetcaster/ui/shared/EpisodeListItem.kt
@@ -77,14 +77,11 @@ fun EpisodeListItem(
     Box(modifier = modifier.padding(vertical = 8.dp, horizontal = 16.dp)) {
         Surface(
             shape = MaterialTheme.shapes.large,
-            color = MaterialTheme.colorScheme.surfaceContainer
+            color = MaterialTheme.colorScheme.surfaceContainer,
+            onClick = { onClick(episode) }
         ) {
             Column(
-                modifier = Modifier
-                    .padding(horizontal = 16.dp, vertical = 8.dp)
-                    .clickable {
-                        onClick(episode)
-                    },
+                modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)
             ) {
                 // Top Part
                 EpisodeListItemHeader(