feat: update lib versions and replace TvLazyRow with LazyRow

android · Aug 20, 2024 · 4539569 · 4539569
1 parent a6ca5ff
commit 4539569
Show file tree

Hide file tree

Showing 10 changed files with 182 additions and 75 deletions.
diff --git a/TvMaterialCatalog/app/build.gradle.kts b/TvMaterialCatalog/app/build.gradle.kts
@@ -50,6 +50,8 @@ dependencies {
     implementation(libs.core.ktx)
     implementation(libs.appcompat)
     implementation(platform(libs.compose.bom))
+    implementation(libs.ui)
+    implementation(libs.foundation)
     implementation(libs.lifecycle.runtime.ktx)
     implementation(libs.activity.compose)
     implementation(libs.tv.foundation)

diff --git a/...og/app/src/main/java/com/google/tv/material/catalog/ExamplesScreenWithDottedBackground.kt b/...og/app/src/main/java/com/google/tv/material/catalog/ExamplesScreenWithDottedBackground.kt
@@ -70,16 +70,17 @@ fun ExamplesScreenWithDottedBackground(
                     ListItem(
                         selected = activeAction == action,
                         onClick = { },
+                        headlineContent = {
+                            Text(text = action.title)
+                        },
                         modifier = Modifier
                             .ifElse(index == 0, Modifier.focusRequester(firstItemFr))
                             .onFocusChanged {
                                 if (it.isFocused) {
                                     activeAction = action
                                 }
                             }
-                    ) {
-                        Text(text = action.title)
-                    }
+                    )
                 }
             }
         }

diff --git a/...g/app/src/main/java/com/google/tv/material/catalog/FontScaleAndLayoutDirectionSelector.kt b/...g/app/src/main/java/com/google/tv/material/catalog/FontScaleAndLayoutDirectionSelector.kt
@@ -32,7 +32,7 @@ import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.Icon
 import androidx.tv.material3.ListItem
 import androidx.tv.material3.MaterialTheme
-import androidx.tv.material3.NonInteractiveSurfaceDefaults
+import androidx.tv.material3.SurfaceDefaults
 import androidx.tv.material3.RadioButton
 import androidx.tv.material3.Surface
 import androidx.tv.material3.Text
@@ -69,7 +69,7 @@ fun FontScaleAndLayoutDirectionSelector(
                         .width(300.dp)
                         .padding(12.dp)
                         .align(Alignment.End),
-                    colors = NonInteractiveSurfaceDefaults
+                    colors = SurfaceDefaults
                         .colors(containerColor = MaterialTheme.colorScheme.surface)
                 ) {
                     TvLazyColumn(
@@ -113,6 +113,9 @@ fun FontScaleAndLayoutDirectionSelector(
                                         ListItem(
                                             selected = isSelected,
                                             onClick = { onLayoutDirectionChange(it.direction) },
+                                            headlineContent = {
+                                                Text(text = it.title)
+                                            },
                                             modifier = Modifier.semantics(mergeDescendants = true) { },
                                             leadingContent = {
                                                 Icon(
@@ -123,9 +126,7 @@ fun FontScaleAndLayoutDirectionSelector(
                                             trailingContent = {
                                                 RadioButton(selected = isSelected, onClick = { })
                                             }
-                                        ) {
-                                            Text(text = it.title)
-                                        }
+                                        )
                                     }
                                 }
                             }
@@ -154,6 +155,9 @@ fun FontScaleAndLayoutDirectionSelector(
                                         ListItem(
                                             selected = isSelected,
                                             onClick = { onFontScaleChange(it.scale) },
+                                            headlineContent = {
+                                                Text(text = it.title)
+                                            },
                                             modifier = Modifier.semantics(mergeDescendants = true) { },
                                             leadingContent = {
                                                 Icon(
@@ -164,9 +168,7 @@ fun FontScaleAndLayoutDirectionSelector(
                                             trailingContent = {
                                                 RadioButton(selected = isSelected, onClick = { })
                                             }
-                                        ) {
-                                            Text(text = it.title)
-                                        }
+                                        )
                                     }
                                 }
                             }

diff --git a/TvMaterialCatalog/app/src/main/java/com/google/tv/material/catalog/HomeGridCard.kt b/TvMaterialCatalog/app/src/main/java/com/google/tv/material/catalog/HomeGridCard.kt
@@ -7,10 +7,11 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
+import androidx.tv.material3.Card
 import androidx.tv.material3.CardDefaults
-import androidx.tv.material3.CardLayoutDefaults
+import androidx.tv.material3.CardContainerDefaults
 import androidx.tv.material3.ExperimentalTvMaterial3Api
-import androidx.tv.material3.StandardCardLayout
+import androidx.tv.material3.StandardCardContainer
 import androidx.tv.material3.Text
 
 @OptIn(ExperimentalTvMaterial3Api::class)
@@ -22,10 +23,10 @@ fun ComponentsGridCard(
     val image = getHomeGridCardImage(imageArg = component.imageArg)
     val navHostController = LocalNavController.current
 
-    StandardCardLayout(
+    StandardCardContainer(
         modifier = modifier,
         imageCard = {
-            CardLayoutDefaults.ImageCard(
+            Card(
                 onClick = { navHostController.navigate(component.routeValue) },
                 interactionSource = it,
                 colors = CardDefaults.colors(containerColor = Color.Transparent)
@@ -51,10 +52,10 @@ fun FoundationsGridCard(
     val image = getHomeGridCardImage(imageArg = foundation.imageArg)
     val navHostController = LocalNavController.current
 
-    StandardCardLayout(
+    StandardCardContainer(
         modifier = modifier,
         imageCard = {
-            CardLayoutDefaults.ImageCard(
+            Card(
                 onClick = { navHostController.navigate(foundation.routeValue) },
                 interactionSource = it,
                 colors = CardDefaults.colors(containerColor = Color.Transparent)

diff --git a/...talog/app/src/main/java/com/google/tv/material/catalog/PositionFocusedItemInLazyLayout.kt b/...talog/app/src/main/java/com/google/tv/material/catalog/PositionFocusedItemInLazyLayout.kt
@@ -0,0 +1,50 @@
+package com.google.tv.material.catalog
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.gestures.BringIntoViewSpec
+import androidx.compose.foundation.gestures.LocalBringIntoViewSpec
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.remember
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun PositionFocusedItemInLazyLayout(
+    parentFraction: Float = 0.3f,
+    childFraction: Float = 0f,
+    content: @Composable () -> Unit,
+) {
+    // a bring into view spec that pivots around the center of the scrollable container
+    val bringIntoViewSpec = remember(parentFraction, childFraction) {
+        object : BringIntoViewSpec {
+            override fun calculateScrollDistance(
+                // initial position of item requesting focus
+                offset: Float,
+                // size of item requesting focus
+                size: Float,
+                // size of the lazy container
+                containerSize: Float
+            ): Float {
+                val childSmallerThanParent = size <= containerSize
+                val initialTargetForLeadingEdge =
+                    parentFraction * containerSize - (childFraction * size)
+                val spaceAvailableToShowItem = containerSize - initialTargetForLeadingEdge
+
+                val targetForLeadingEdge =
+                    if (childSmallerThanParent && spaceAvailableToShowItem < size) {
+                        containerSize - size
+                    } else {
+                        initialTargetForLeadingEdge
+                    }
+
+                return offset - targetForLeadingEdge
+            }
+        }
+    }
+
+    // LocalBringIntoViewSpec will apply to all scrollables in the hierarchy.
+    CompositionLocalProvider(
+        LocalBringIntoViewSpec provides bringIntoViewSpec,
+        content = content,
+    )
+}
diff --git a/...rialCatalog/app/src/main/java/com/google/tv/material/catalog/ThemeAndColorModeSelector.kt b/...rialCatalog/app/src/main/java/com/google/tv/material/catalog/ThemeAndColorModeSelector.kt
@@ -31,7 +31,7 @@ import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.Icon
 import androidx.tv.material3.ListItem
 import androidx.tv.material3.MaterialTheme
-import androidx.tv.material3.NonInteractiveSurfaceDefaults
+import androidx.tv.material3.SurfaceDefaults
 import androidx.tv.material3.RadioButton
 import androidx.tv.material3.Surface
 import androidx.tv.material3.Text
@@ -68,7 +68,7 @@ fun ThemeAndColorModeSelector(
                         .width(300.dp)
                         .padding(12.dp)
                         .align(Alignment.End),
-                    colors = NonInteractiveSurfaceDefaults
+                    colors = SurfaceDefaults
                         .colors(containerColor = MaterialTheme.colorScheme.surface)
                 ) {
                     TvLazyColumn(
@@ -111,6 +111,9 @@ fun ThemeAndColorModeSelector(
                                         ListItem(
                                             selected = isSelected,
                                             onClick = { onThemeModeChange(it.mode) },
+                                            headlineContent = {
+                                                Text(text = it.title)
+                                            },
                                             modifier = Modifier.semantics(mergeDescendants = true) { },
                                             leadingContent = {
                                                 Icon(
@@ -121,9 +124,7 @@ fun ThemeAndColorModeSelector(
                                             trailingContent = {
                                                 RadioButton(selected = isSelected, onClick = { })
                                             }
-                                        ) {
-                                            Text(text = it.title)
-                                        }
+                                        )
                                     }
                                 }
                             }
@@ -152,6 +153,9 @@ fun ThemeAndColorModeSelector(
                                         ListItem(
                                             selected = isSelected,
                                             onClick = { onSeedColorChange(it) },
+                                            headlineContent = {
+                                                Text(text = it.name)
+                                            },
                                             modifier = Modifier.semantics(mergeDescendants = true) { },
                                             leadingContent = {
                                                 Box(
@@ -163,9 +167,7 @@ fun ThemeAndColorModeSelector(
                                             trailingContent = {
                                                 RadioButton(selected = isSelected, onClick = { })
                                             }
-                                        ) {
-                                            Text(text = it.name)
-                                        }
+                                        )
                                     }
                                 }
                             }

diff --git a/TvMaterialCatalog/app/src/main/java/com/google/tv/material/catalog/screens/CardsScreen.kt b/TvMaterialCatalog/app/src/main/java/com/google/tv/material/catalog/screens/CardsScreen.kt
@@ -10,14 +10,15 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
+import androidx.tv.material3.Card
 import androidx.tv.material3.CardDefaults
-import androidx.tv.material3.CardLayoutDefaults
+import androidx.tv.material3.CardContainerDefaults
 import androidx.tv.material3.ClassicCard
 import androidx.tv.material3.CompactCard
 import androidx.tv.material3.ExperimentalTvMaterial3Api
-import androidx.tv.material3.StandardCardLayout
+import androidx.tv.material3.StandardCardContainer
 import androidx.tv.material3.Text
-import androidx.tv.material3.WideCardLayout
+import androidx.tv.material3.WideCardContainer
 import androidx.tv.material3.WideClassicCard
 import com.google.tv.material.catalog.ExampleAction
 import com.google.tv.material.catalog.ExamplesScreenWithDottedBackground
@@ -30,10 +31,10 @@ fun CardsScreen() {
         ExampleAction(
             title = "Standard card",
             content = {
-                StandardCardLayout(
+                StandardCardContainer(
                     modifier = Modifier.width(180.dp),
                     imageCard = {
-                        CardLayoutDefaults.ImageCard(
+                        Card(
                             onClick = { },
                             interactionSource = it,
                             colors = CardDefaults.colors(containerColor = Color.Transparent)
@@ -133,10 +134,10 @@ fun CardsScreen() {
         ExampleAction(
             title = "Wide standard card",
             content = {
-                WideCardLayout(
+                WideCardContainer(
                     modifier = Modifier,
                     imageCard = {
-                        CardLayoutDefaults.ImageCard(
+                        Card(
                             onClick = { },
                             interactionSource = it,
                             colors = CardDefaults.colors(containerColor = Color.Transparent)

diff --git a/TvMaterialCatalog/app/src/main/java/com/google/tv/material/catalog/screens/ColorsScreen.kt b/TvMaterialCatalog/app/src/main/java/com/google/tv/material/catalog/screens/ColorsScreen.kt
@@ -18,15 +18,17 @@ import androidx.tv.foundation.lazy.grid.TvLazyVerticalGrid
 import androidx.tv.material3.Border
 import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.MaterialTheme
-import androidx.tv.material3.NonInteractiveSurfaceDefaults
+import androidx.tv.material3.SurfaceDefaults
 import androidx.tv.material3.Surface
 import androidx.tv.material3.Text
 
 @OptIn(ExperimentalTvMaterial3Api::class)
 @Composable
 fun ColorsScreen() {
     Row(
-        Modifier.fillMaxSize().padding(start = 58.dp, end = 48.dp, top = 8.dp),
+        Modifier
+            .fillMaxSize()
+            .padding(start = 58.dp, end = 48.dp, top = 8.dp),
         horizontalArrangement = Arrangement.spacedBy(20.dp)
     ) {
         TvLazyVerticalGrid(
@@ -141,7 +143,7 @@ private fun ColorBg(
         modifier = Modifier
             .fillMaxWidth()
             .height(60.dp),
-        colors = NonInteractiveSurfaceDefaults.colors(
+        colors = SurfaceDefaults.colors(
             containerColor = color
         ),
         border = Border(