From 5566a397cb7deabac014b03d29db5ea1a70e1508 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Mlynari=C4=8D?= Date: Fri, 26 Apr 2024 14:46:55 +0200 Subject: [PATCH 1/4] Fix category ripple effect --- .../jetcaster/ui/home/discover/Discover.kt | 90 ++++++++++--------- 1 file changed, 48 insertions(+), 42 deletions(-) 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 index 4d630242e4..3d43b7d78c 100644 --- 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, - ) } } } From ed15ad4621660cb7060397e84b18b4c96b79c092 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Mlynari=C4=8D?= Date: Fri, 26 Apr 2024 14:58:33 +0200 Subject: [PATCH 2/4] Simplify Podcast row --- .../jetcaster/ui/home/category/PodcastCategory.kt | 13 ++++++------- 1 file changed, 6 insertions(+), 7 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 index 2deb2d444b..bba2427c9e 100644 --- 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,6 +17,7 @@ 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 @@ -130,15 +131,15 @@ 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 +151,6 @@ private fun CategoryPodcastRow( navigateToPodcastDetails(podcast) } ) - - if (index < lastIndex) Spacer(Modifier.width(24.dp)) } } } From 5d9dbf292d914fe658c3bb3806f96dcac0589cca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Mlynari=C4=8D?= Date: Fri, 26 Apr 2024 14:58:53 +0200 Subject: [PATCH 3/4] Fix ripple on episode item --- .../com/example/jetcaster/ui/shared/EpisodeListItem.kt | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) 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 index bafb863074..af71f13955 100644 --- 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 @@ -76,14 +76,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( From ec6430c89933dfac278be171b71ce262241c892a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Mlynari=C4=8D?= Date: Fri, 26 Apr 2024 15:10:49 +0200 Subject: [PATCH 4/4] Fix formatting --- .../jetcaster/ui/home/category/PodcastCategory.kt | 9 ++++++--- 1 file changed, 6 insertions(+), 3 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 index bba2427c9e..9c6409faf6 100644 --- 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 @@ -21,7 +21,6 @@ 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 @@ -32,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 @@ -133,7 +131,12 @@ private fun CategoryPodcastRow( ) { 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) ) { items(