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,
+)