Develop

.gitignore

@@ -13,3 +13,4 @@
 .externalNativeBuild
 .cxx
 local.properties
+/.idea/

app/build.gradle.kts

@@ -50,13 +50,12 @@ dependencies {
     implementation(libs.accompanist.placeholder)
     implementation(libs.androidx.compose.material.iconsExtended)
     implementation(libs.androidx.tv.foundation)
-//    implementation(libs.androidx.tv.material)
     implementation(libs.androidx.lifecycle.runtime.compose)
     implementation(libs.androidx.lifecycle.viewModelCompose)
     implementation(libs.androidx.lifecycle.runtime)
     implementation(libs.androidx.navigation.compose)
     implementation(libs.qrcode)
     implementation(libs.line.awesome.icons)
-    implementation("androidx.compose.ui:ui-tooling-preview:1.3.3")
-    debugImplementation("androidx.compose.ui:ui-tooling:1.3.3")
+    implementation(libs.androidx.compose.ui.tooling.preview)
+    debugImplementation(libs.androidx.compose.ui.tooling)
 }

app/src/main/java/com/techlads/composetv/hero/HeroItem.kt

@@ -0,0 +1,56 @@
+package com.techlads.composetv.hero
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.techlads.composetv.R
+
+@Composable
+fun HeroItem(modifier: Modifier = Modifier) {
+    Card(
+        modifier = modifier
+            .padding(horizontal = 24.dp, vertical = 24.dp)
+            .fillMaxWidth()
+            .height(200.dp),
+        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp),
+    ) {
+        Box {
+            Image(
+                modifier = Modifier.fillMaxSize(),
+                painter = painterResource(id = R.drawable.hero_item),
+                contentDescription = "Hero item background",
+                contentScale = ContentScale.Crop
+            )
+            Column(
+                Modifier
+                    .fillMaxSize()
+                    .background(Color.Black.copy(alpha = 0.7f))
+                    .padding(32.dp)
+            ) {
+                Spacer(modifier = Modifier.weight(1f))
+                Text(text = "Heading", style = MaterialTheme.typography.titleLarge)
+                Text(
+                    text = "Description",
+                    style = MaterialTheme.typography.titleSmall.copy(fontWeight = FontWeight.ExtraLight)
+                )
+            }
+        }
+
+
+    }
+}
+
+@Preview
+@Composable
+fun HeroItemPrev() {
+    HeroItem()
+}

app/src/main/java/com/techlads/composetv/home/HomeScreenContent.kt

@@ -1,22 +1,36 @@
 package com.techlads.composetv.home
 
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import com.techlads.composetv.home.navigation.NestedHomeNavigation
 import com.techlads.composetv.leftmenu.LeftMenu
+import com.techlads.composetv.leftmenu.data.MenuData
 
 @Composable
 fun HomeScreenContent() {
-   Row {
-       LeftMenu(modifier = Modifier.width(200.dp), defaultFocus = 0, menuItems = MenuData.menuItems) {
+    val isExpanded = remember {
+        mutableStateOf(false)
+    }
 
-       }
-       NestedHomeNavigation()
-   }
+    Row {
+        LeftMenu(
+            modifier = Modifier.wrapContentWidth(),
+            defaultFocus = 0,
+            isExpanded = isExpanded.value,
+            menuItems = MenuData.menuItems,
+            onMenuFocused = { _, isSelected ->
+                isExpanded.value = !isExpanded.value && isSelected
+            }
+        ) {
+
+        }
+        NestedHomeNavigation()
+    }
 }
 
 @Preview

app/src/main/java/com/techlads/composetv/home/carousel/CarouselItem.kt

@@ -0,0 +1,66 @@
+package com.techlads.composetv.home.carousel
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.focusable
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.Card
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+
+
+@Composable
+fun CarouselItem(parent: Int, child: Int) {
+
+    var isFocused by remember { mutableStateOf(false) }
+    val scale = animateFloatAsState(if (isFocused) 1.2f else 1f)
+
+
+    Card(
+        modifier = Modifier
+            .zIndex(if (isFocused) 20f else 1f)
+            .graphicsLayer(
+                scaleX = scale.value,
+                scaleY = scale.value
+            )
+            .padding(horizontal = 8.dp)
+            .fillMaxHeight()
+            .aspectRatio(1.8f)
+            .onFocusChanged {
+                isFocused = it.isFocused
+            }
+            .border(
+                border = BorderStroke(
+                    1.dp,
+                    if (isFocused)
+                        Color.LightGray
+                    else
+                        Color.Transparent
+                ), shape = MaterialTheme.shapes.medium
+            )
+            .clickable { }
+            .focusable()
+    ) {
+        Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
+            Text(text = "Item $parent x $child", textAlign = TextAlign.Center)
+        }
+    }
+}
+
+@Preview
+@Composable
+fun CarouselItemPrev() {
+    CarouselItem(1, 1)
+}

app/src/main/java/com/techlads/composetv/home/carousel/HomeCarousel.kt

@@ -0,0 +1,24 @@
+package com.techlads.composetv.home.carousel
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.tv.foundation.lazy.list.TvLazyColumn
+
+
+@Composable
+fun HomeCarousel(modifier: Modifier) {
+    TvLazyColumn(modifier, contentPadding = PaddingValues(bottom = 100.dp)) {
+        items(15) {
+            HorizontalCarouselItem(it)
+        }
+    }
+}
+
+@Preview
+@Composable
+fun HomeCarouselPrev() {
+    HomeCarousel(Modifier)
+}

app/src/main/java/com/techlads/composetv/home/carousel/HorizontalCarouselItem.kt

@@ -0,0 +1,37 @@
+package com.techlads.composetv.home.carousel
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.tv.foundation.lazy.list.TvLazyRow
+
+@Composable
+fun HorizontalCarouselItem(index: Int) {
+    Column(Modifier.height(150.dp)) {
+        Text(text = "Row $index", modifier = Modifier.padding(horizontal = 24.dp))
+        TvLazyRow(
+            contentPadding = PaddingValues(
+                start = 16.dp,
+                top = 8.dp,
+                bottom = 8.dp,
+                end = 100.dp
+            )
+        ) {
+            items(15) {
+                CarouselItem(index, it)
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun HorizontalCarouselItemPrev() {
+    HorizontalCarouselItem(1)
+}

app/src/main/java/com/techlads/composetv/home/navigation/NestedHomeNavigation.kt

@@ -1,8 +1,23 @@
 package com.techlads.composetv.home.navigation
 
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import com.techlads.composetv.hero.HeroItem
+import com.techlads.composetv.home.carousel.HomeCarousel
 
 @Composable
-fun NestedHomeNavigation(){
+fun NestedHomeNavigation() {
+    Column(Modifier.fillMaxSize()) {
+        HeroItem()
+        HomeCarousel(Modifier.weight(1f))
+    }
+}
 
+@Preview
+@Composable
+fun NestedHomeNavigationPrev() {
+    NestedHomeNavigation()
 }

app/src/main/java/com/techlads/composetv/leftmenu/CenteredMenu.kt

@@ -0,0 +1,49 @@
+package com.techlads.composetv.leftmenu
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.tv.foundation.lazy.list.TvLazyColumn
+import com.techlads.composetv.leftmenu.model.MenuItem
+
+@Composable
+fun CenteredMenu(
+    modifier: Modifier = Modifier,
+    requester: FocusRequester = FocusRequester(),
+    menuItems: List<MenuItem>,
+    defaultFocus: Int,
+    isExpanded: Boolean = false,
+    onMenuFocused: ((menuItem: MenuItem, isFocused: Boolean) -> Unit)? = null,
+    onMenuSelected: ((menuItem: MenuItem) -> Unit)? = null,
+) {
+    val menus = remember {
+        menuItems
+    }
+
+    TvLazyColumn(
+        modifier
+    ) {
+        items(menus.size) {
+            val item = menus[it]
+            if (it == defaultFocus) {
+                LeftMenuItem(
+                    requester = requester,
+                    menuItem = item,
+                    modifier = Modifier.fillParentMaxWidth(),
+                    expanded = isExpanded,
+                    onMenuFocused = onMenuFocused,
+                    onMenuSelected = onMenuSelected
+                )
+            } else {
+                LeftMenuItem(
+                    menuItem = item,
+                    modifier = Modifier.fillParentMaxWidth(),
+                    expanded = isExpanded,
+                    onMenuFocused = onMenuFocused,
+                    onMenuSelected = onMenuSelected
+                )
+            }
+        }
+    }
+}