Merge pull request #135 from vighnesh153/jet-catalog

feat: initialize TvMaterialCatalog app

README.md

@@ -5,6 +5,7 @@ This repository contains a set of individual Android TV projects to help you get
 
 - AccessibilityDemo: A Java sample showing how to support accessibility on TVs
 - ClassicsKotlin: A modern Android TV app using Kotlin to show classic videos
+- TvMaterialCatalog: A jetpack-compose app built using Kotlin that demonstrates the usages of components from [Compose for TV libraries](https://developer.android.com/jetpack/androidx/releases/tv) in isolation.
 - JetStreamCompose: A jetpack-compose app using Kotlin that demonstrates the usage of components from the [Compose for TV libraries](https://developer.android.com/jetpack/androidx/releases/tv)
 - Leanback: A Java app that demonstrates a basic Android TV app
 - Leanback Showcase: A Java app that demonstrates many different parts of the Leanback SDK and how to customize them

TvMaterialCatalog/.gitignore

@@ -0,0 +1,15 @@
+*.iml
+.gradle
+/local.properties
+/.idea/caches
+/.idea/libraries
+/.idea/modules.xml
+/.idea/workspace.xml
+/.idea/navEditor.xml
+/.idea/assetWizardSettings.xml
+.DS_Store
+/build
+/captures
+.externalNativeBuild
+.cxx
+local.properties

TvMaterialCatalog/app/.gitignore

@@ -0,0 +1 @@
+/build

TvMaterialCatalog/app/build.gradle.kts

@@ -0,0 +1,59 @@
+@Suppress("DSL_SCOPE_VIOLATION") // TODO: Remove once KTIJ-19369 is fixed
+plugins {
+    alias(libs.plugins.androidApplication)
+    alias(libs.plugins.kotlinAndroid)
+}
+
+kotlin {
+    jvmToolchain(17)
+}
+
+android {
+    namespace = "com.google.tv.material.catalog"
+    compileSdk = 34
+
+    defaultConfig {
+        applicationId = "com.google.tv.material.catalog"
+        minSdk = 21
+        targetSdk = 34
+        versionCode = 1
+        versionName = "1.0"
+        vectorDrawables {
+            useSupportLibrary = true
+        }
+
+    }
+
+    buildTypes {
+        release {
+            isMinifyEnabled = false
+            proguardFiles(
+                getDefaultProguardFile("proguard-android-optimize.txt"),
+                "proguard-rules.pro"
+            )
+        }
+    }
+    buildFeatures {
+        compose = true
+    }
+    composeOptions {
+        kotlinCompilerExtensionVersion = "1.5.1"
+    }
+    packaging {
+        resources {
+            excludes += "/META-INF/{AL2.0,LGPL2.1}"
+        }
+    }
+}
+
+dependencies {
+    implementation(libs.core.ktx)
+    implementation(libs.appcompat)
+    implementation(platform(libs.compose.bom))
+    implementation(libs.lifecycle.runtime.ktx)
+    implementation(libs.activity.compose)
+    implementation(libs.tv.foundation)
+    implementation(libs.tv.material)
+    implementation(libs.coil.compose)
+    implementation(libs.navigation.compose)
+}

TvMaterialCatalog/app/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

TvMaterialCatalog/app/src/main/AndroidManifest.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <uses-feature
+        android:name="android.hardware.touchscreen"
+        android:required="false" />
+    <uses-feature
+        android:name="android.software.leanback"
+        android:required="false" />
+
+    <application
+        android:allowBackup="true"
+        android:banner="@mipmap/app_banner"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:supportsRtl="true"
+        android:theme="@style/Theme.TvMaterialCatalog">
+        <activity
+            android:name=".MainActivity"
+            android:exported="true">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+
+                <category android:name="android.intent.category.LAUNCHER" />
+                <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
+            </intent-filter>
+        </activity>
+    </application>
+
+</manifest>

TvMaterialCatalog/app/src/main/java/com/google/tv/material/catalog/App.kt

@@ -0,0 +1,74 @@
+package com.google.tv.material.catalog
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.unit.LayoutDirection
+import androidx.tv.material3.ExperimentalTvMaterial3Api
+import androidx.tv.material3.MaterialTheme
+import androidx.tv.material3.Surface
+import com.google.tv.material.catalog.colorutils.Scheme.Companion.dark
+import com.google.tv.material.catalog.colorutils.Scheme.Companion.light
+import com.google.tv.material.catalog.colorutils.toColorScheme
+
+@OptIn(ExperimentalTvMaterial3Api::class)
+@Composable
+fun App() {
+    var themeMode by remember { mutableStateOf(Mode.Dark) }
+    var seedColor by remember { mutableStateOf(PurpleSeedColor) }
+    var layoutDirection by remember { mutableStateOf(LayoutDirection.Ltr) }
+    var fontScale by remember { mutableFloatStateOf(1.0f) }
+
+    var isThemeSelectorExpanded by remember { mutableStateOf(false) }
+    var isFontScaleSelectorExpanded by remember { mutableStateOf(false) }
+
+    val argbColor = seedColor.color.toArgb()
+    val colorScheme = if (themeMode == Mode.Dark) dark(argbColor) else light(argbColor)
+
+    AppProviders(
+        seedColor = seedColor,
+        themeMode = themeMode,
+        layoutDirection = layoutDirection,
+        fontScale = fontScale,
+    ) {
+        MaterialTheme(colorScheme = colorScheme.toColorScheme()) {
+            ThemeAndColorModeSelector(
+                isExpanded = isThemeSelectorExpanded,
+                onClose = { isThemeSelectorExpanded = false },
+                onSeedColorChange = { seedColor = it },
+                onThemeModeChange = { themeMode = it },
+            ) {
+                FontScaleAndLayoutDirectionSelector(
+                    isExpanded = isFontScaleSelectorExpanded,
+                    onClose = { isFontScaleSelectorExpanded = false },
+                    onLayoutDirectionChange = { layoutDirection = it },
+                    onFontScaleChange = { fontScale = it }
+                ) {
+                    Surface(
+                        Modifier.fillMaxSize(),
+                        shape = RectangleShape
+                    ) {
+                        Column(Modifier.fillMaxSize()) {
+                            NavigationGraph(
+                                onThemeColorModeClick = {
+                                    isThemeSelectorExpanded = true
+                                },
+                                onFontScaleClick = {
+                                    isFontScaleSelectorExpanded = true
+                                }
+                            )
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

TvMaterialCatalog/app/src/main/java/com/google/tv/material/catalog/AppBar.kt

@@ -0,0 +1,154 @@
+package com.google.tv.material.catalog
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextMotion
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import androidx.navigation.compose.currentBackStackEntryAsState
+import androidx.tv.material3.Button
+import androidx.tv.material3.ExperimentalTvMaterial3Api
+import androidx.tv.material3.Icon
+import androidx.tv.material3.MaterialTheme
+import androidx.tv.material3.Text
+
+@Composable
+fun AppBar(
+    onThemeColorModeClick: () -> Unit,
+    onFontScaleClick: () -> Unit
+) {
+    val navHostController = LocalNavController.current
+    val entry by navHostController.currentBackStackEntryAsState()
+    val routeValue = entry?.destination?.route
+
+    val title = if (routeValue == NavGraph.Home.routeName)
+        stringResource(R.string.tv_compose)
+    else
+        components.find { it.routeValue == routeValue }?.title
+            ?: foundations.find { it.routeValue == routeValue }?.title ?: ""
+    val description =
+        if (title == stringResource(id = R.string.tv_compose)) "Component Catalog" else null
+    val isMainIconMagnified = description != null
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(start = 54.dp, top = 40.dp, end = 38.dp, bottom = 16.dp),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        HeadlineContent(
+            title = title,
+            description = description,
+            isMainIconMagnified = isMainIconMagnified
+        )
+        Actions(
+            onThemeColorModeClick = onThemeColorModeClick,
+            onFontScaleClick = onFontScaleClick,
+        )
+    }
+}
+
+@OptIn(ExperimentalTvMaterial3Api::class)
+@Composable
+private fun HeadlineContent(
+    title: String,
+    description: String? = null,
+    isMainIconMagnified: Boolean,
+) {
+    Row(
+        horizontalArrangement = Arrangement.spacedBy(16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Box(
+            modifier = Modifier
+                .size(if (isMainIconMagnified) 64.dp else 40.dp)
+                .background(
+                    MaterialTheme.colorScheme.secondaryContainer.copy(0.4f),
+                    shape = CircleShape
+                ), contentAlignment = Alignment.Center
+        ) {
+            Icon(
+                modifier = Modifier
+                    .padding(if (isMainIconMagnified) 12.dp else 8.dp)
+                    .size(if (isMainIconMagnified) 38.dp else 22.dp),
+                painter = painterResource(id = R.drawable.ic_tv),
+                contentDescription = null
+            )
+        }
+
+        Column(modifier = Modifier.padding(start = 16.dp)) {
+            Text(
+                text = title,
+                maxLines = 1,
+                style = MaterialTheme.typography.headlineMedium,
+                overflow = TextOverflow.Ellipsis,
+            )
+            if (description != null) {
+                Text(
+                    text = description,
+                    style = MaterialTheme.typography.titleMedium,
+                    color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f)
+                )
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalTvMaterial3Api::class)
+@Composable
+private fun Actions(
+    onThemeColorModeClick: () -> Unit,
+    onFontScaleClick: () -> Unit,
+) {
+    val actions = listOf(
+        Action(
+            iconPainter = painterResource(id = R.drawable.ic_palette),
+            text = "Theme & color mode",
+            onClick = onThemeColorModeClick
+        ),
+        Action(
+            iconPainter = painterResource(id = R.drawable.ic_font),
+            text = "Font scale",
+            onClick = onFontScaleClick
+        )
+    )
+
+    Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
+        actions.forEach {
+            Button(onClick = it.onClick) {
+                Icon(
+                    modifier = Modifier.size(16.dp),
+                    painter = it.iconPainter,
+                    contentDescription = null
+                )
+                Spacer(modifier = Modifier.size(8.dp))
+                Text(
+                    text = it.text,
+                    style = MaterialTheme.typography.labelLarge.copy(textMotion = TextMotion.Animated)
+                )
+            }
+        }
+    }
+}
+
+private data class Action(
+    val iconPainter: Painter,
+    val text: String,
+    val onClick: () -> Unit,
+)