DetailsScreen

app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt

@@ -0,0 +1,226 @@
+package com.techlads.composetv.features.details
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+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
+import androidx.tv.material3.LocalContentColor
+import androidx.tv.material3.MaterialTheme
+import androidx.tv.material3.Text
+import com.techlads.composetv.R
+import com.techlads.composetv.theme.AppTheme
+import com.techlads.composetv.theme.Material3Theme
+import com.techlads.composetv.widgets.BorderedFocusableItem
+import com.techlads.composetv.widgets.Button
+
+@Composable
+fun ProductDetailsScreen() {
+    ProductDetailsContent()
+}
+
+@Composable
+fun ProductDetailsContent() {
+    Box {
+        SearchIcon(
+            modifier = Modifier
+                .size(80.dp)
+                .align(Alignment.TopStart)
+                .padding(24.dp)
+                .zIndex(1f)
+        )
+
+        Column(
+            Modifier
+                .align(Alignment.BottomCenter)
+                .fillMaxSize()
+        ) {
+            BannerImage(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .weight(.4f)
+            )
+            Column(modifier = Modifier.weight(.6f)) {
+                ButtonSection()
+                DetailsSection()
+            }
+        }
+
+        ThumbnailImageCard(
+            modifier = Modifier
+                .align(Alignment.CenterStart)
+                .padding(start = 30.dp),
+            parent = 1, child = 1
+        )
+    }
+}
+
+
+@Composable
+fun SearchIcon(modifier: Modifier) {
+    Image(
+        modifier = modifier,
+        painter = painterResource(id = R.drawable.ic_search),
+        contentDescription = "search",
+        contentScale = ContentScale.Crop
+    )
+}
+
+@Composable
+fun BannerImage(modifier: Modifier) {
+    Image(
+        modifier = modifier
+            .fillMaxSize()
+            .height(200.dp),
+        painter = painterResource(id = R.drawable.hero_item),
+        contentDescription = "Hero item background",
+        contentScale = ContentScale.Crop
+    )
+}
+
+@Composable
+fun ButtonSection() {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(60.dp)
+            .background(color = AppTheme.surface.copy(alpha = 0.5f)),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.Start
+    ) {
+        Spacer(modifier = Modifier.width(280.dp))
+
+        Button(
+            text = "Play",
+            modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp)
+        ) {
+        }
+        Spacer(modifier = Modifier.size(16.dp))
+        Text(
+            color = LocalContentColor.current,
+            textAlign = TextAlign.Center,
+            style = MaterialTheme.typography.titleMedium,
+            text = stringResource(R.string.watch_trailer)
+        )
+    }
+}
+
+@Composable
+fun DetailsSection() {
+    Row(
+        modifier = Modifier
+            .fillMaxSize(),
+        verticalAlignment = Alignment.Top,
+        horizontalArrangement = Arrangement.Center
+    ) {
+        Spacer(modifier = Modifier.size(220.dp))
+        Column(
+            Modifier
+                .fillMaxWidth()
+                //.weight(.7f)
+                .padding(24.dp),
+            horizontalAlignment = Alignment.Start
+        ) {
+            Spacer(modifier = Modifier.height(16.dp))
+            Text(
+                modifier = Modifier,
+                color = LocalContentColor.current,
+                textAlign = TextAlign.Start,
+                style = MaterialTheme.typography.headlineLarge,
+                text = stringResource(R.string.movie_name)
+            )
+
+            Spacer(modifier = Modifier.size(10.dp))
+
+            MovieInfoSection()
+
+            Spacer(modifier = Modifier.size(10.dp))
+            Text(
+                modifier = Modifier,
+                color = LocalContentColor.current,
+                textAlign = TextAlign.Start,
+                style = MaterialTheme.typography.bodyLarge,
+                text = stringResource(R.string.movie_desciption)
+            )
+        }
+    }
+}
+
+@Composable
+fun MovieInfoSection() {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.Center
+    ) {
+        Text(
+            modifier = Modifier,
+            color = LocalContentColor.current,
+            textAlign = TextAlign.Start,
+            style = MaterialTheme.typography.bodyLarge,
+            text = stringResource(R.string.release_year)
+        )
+        Spacer(modifier = Modifier.size(12.dp))
+        Text(
+            modifier = Modifier,
+            color = LocalContentColor.current,
+            textAlign = TextAlign.Start,
+            style = MaterialTheme.typography.bodyLarge,
+            text = stringResource(R.string.movie_duration_text)
+        )
+        Spacer(modifier = Modifier.size(12.dp))
+        Rating(rating = "8.3")
+    }
+}
+
+@Composable
+fun Rating(rating: String) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.Center
+    ) {
+        Image(
+            modifier = Modifier.size(18.dp),
+            painter = painterResource(id = R.drawable.ic_star),
+            contentDescription = "search",
+        )
+        Spacer(modifier = Modifier.size(8.dp))
+        Text(
+            modifier = Modifier,
+            color = LocalContentColor.current,
+            textAlign = TextAlign.Start,
+            style = MaterialTheme.typography.bodyLarge,
+            text = rating
+        )
+    }
+}
+
+@Composable
+fun ThumbnailImageCard(modifier: Modifier, parent: Int, child: Int) {
+    BorderedFocusableItem(
+        onClick = { },
+        modifier = modifier
+            .padding(8.dp)
+            .size(width = 150.dp, height = 200.dp)
+    ) {
+        Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
+            Text(text = "Item $parent x $child", textAlign = TextAlign.Center)
+        }
+    }
+}
+
+@Preview
+@Composable
+fun DetailsScreenPrev() {
+    Material3Theme {
+        ProductDetailsScreen()
+    }
+
+}

app/src/main/res/drawable/ic_search.xml

@@ -0,0 +1,20 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="100dp"
+    android:height="100dp"
+    android:viewportWidth="100"
+    android:viewportHeight="100">
+  <group>
+    <clip-path
+        android:pathData="M0,0h100v100h-100z"/>
+    <path
+        android:pathData="M50,50m-50,0a50,50 0,1 1,100 0a50,50 0,1 1,-100 0"
+        android:fillColor="#2748BA"/>
+    <group>
+      <clip-path
+          android:pathData="M18,18h64v64h-64z"/>
+      <path
+          android:pathData="M59.33,55.33H57.23L56.48,54.61C59.09,51.57 60.67,47.63 60.67,43.33C60.67,33.76 52.91,26 43.33,26C33.76,26 26,33.76 26,43.33C26,52.91 33.76,60.67 43.33,60.67C47.63,60.67 51.57,59.09 54.61,56.48L55.33,57.23V59.33L68.67,72.64L72.64,68.67L59.33,55.33ZM43.33,55.33C36.69,55.33 31.33,49.97 31.33,43.33C31.33,36.69 36.69,31.33 43.33,31.33C49.97,31.33 55.33,36.69 55.33,43.33C55.33,49.97 49.97,55.33 43.33,55.33Z"
+          android:fillColor="#F7F7F9"/>
+    </group>
+  </group>
+</vector>

app/src/main/res/drawable/ic_star.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="46dp"
+    android:height="44dp"
+    android:viewportWidth="46"
+    android:viewportHeight="44">
+  <path
+      android:pathData="M23,0L28.388,16.584H45.825L31.719,26.833L37.107,43.416L23,33.167L8.893,43.416L14.281,26.833L0.175,16.584H17.612L23,0Z"
+      android:fillColor="#E68022"/>
+</vector>

app/src/main/res/values/strings.xml

@@ -1,3 +1,8 @@
 <resources>
     <string name="app_name">Compose TV</string>
+    <string name="watch_trailer">Watch Trailer</string>
+    <string name="movie_desciption">\"Batman ventures into Gotham City\'s underworld when a sadistic killer leaves behind a trail of cryptic clues. \"</string>
+    <string name="movie_name">Batman</string>
+    <string name="release_year">2022</string>
+    <string name="movie_duration_text">2h 56mm</string>
 </resources>