From e499404328d829ffbd5931f3c94f9df157975150 Mon Sep 17 00:00:00 2001 From: Umair Date: Sat, 27 May 2023 00:00:21 +0200 Subject: [PATCH 01/20] Product detail animation added for portrait size --- .../features/details/ProductDetailsScreen.kt | 15 ++++++++++++++- .../java/com/techlads/composetv/widgets/Button.kt | 11 +++++++++-- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt b/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt index 232fa2e..3b25b6d 100644 --- a/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt +++ b/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt @@ -11,6 +11,8 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.focus.FocusRequester +import androidx.compose.ui.focus.focusRequester import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource @@ -113,6 +115,14 @@ fun BannerImage(modifier: Modifier) { @Composable fun ButtonSection() { + + val focusRequester = remember { FocusRequester() } + + LaunchedEffect(key1 = Unit){ + delay(1000) + focusRequester.requestFocus() + } + Row( modifier = Modifier .fillMaxWidth() @@ -124,8 +134,11 @@ fun ButtonSection() { Spacer(modifier = Modifier.width(280.dp)) Button( + text = "Play", - modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp) + modifier = Modifier + .padding(horizontal = 16.dp, vertical = 4.dp) + .focusRequester(focusRequester) ) { } Spacer(modifier = Modifier.size(16.dp)) diff --git a/app/src/main/java/com/techlads/composetv/widgets/Button.kt b/app/src/main/java/com/techlads/composetv/widgets/Button.kt index 8bcd594..393fa67 100644 --- a/app/src/main/java/com/techlads/composetv/widgets/Button.kt +++ b/app/src/main/java/com/techlads/composetv/widgets/Button.kt @@ -1,18 +1,25 @@ package com.techlads.composetv.widgets +import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.padding import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember import androidx.compose.ui.Modifier +import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.unit.dp import androidx.tv.material3.* @OptIn(ExperimentalTvMaterial3Api::class) @Composable -fun Button(modifier: Modifier = Modifier, text: String, onClick: () -> Unit) { +fun Button( + modifier: Modifier = Modifier, + text: String, + onClick: () -> Unit +) { Surface( onClick = onClick, modifier = modifier, - tonalElevation = 1.dp + tonalElevation = 1.dp, ) { Text(text = text, Modifier.padding(horizontal = 12.dp, vertical = 4.dp)) } From f811674a273c4c2a6e43b5d5847e1958316b575c Mon Sep 17 00:00:00 2001 From: Umair Date: Sat, 27 May 2023 00:29:05 +0200 Subject: [PATCH 02/20] Basic player integrated from detail screen --- .../features/details/ProductDetailsScreen.kt | 22 +++++++++---------- .../composetv/navigation/AppNavigation.kt | 6 ++++- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt b/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt index 3b25b6d..c7810f3 100644 --- a/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt +++ b/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt @@ -34,12 +34,12 @@ import kotlinx.coroutines.delay const val ANIMATION_DELAY = 600L @Composable -fun ProductDetailsScreen(onBackPressed: () -> Unit) { - ProductDetailsContent(onBackPressed) +fun ProductDetailsScreen(onBackPressed: () -> Unit, onPlayClick: () -> Unit) { + ProductDetailsContent(onBackPressed, onPlayClick = onPlayClick) } @Composable -private fun ProductDetailsContent(onBackPressed: () -> Unit) { +private fun ProductDetailsContent(onBackPressed: () -> Unit, onPlayClick: () -> Unit) { BackHandler(onBack = onBackPressed) @@ -74,7 +74,7 @@ private fun ProductDetailsContent(onBackPressed: () -> Unit) { .weight(.4f) ) Column(modifier = Modifier.weight(.6f)) { - ButtonSection() + ButtonSection(onPlayClick) DetailsSection() } } @@ -114,12 +114,12 @@ fun BannerImage(modifier: Modifier) { } @Composable -fun ButtonSection() { +fun ButtonSection(onPlayClick: () -> Unit) { val focusRequester = remember { FocusRequester() } - LaunchedEffect(key1 = Unit){ - delay(1000) + LaunchedEffect(key1 = Unit) { + delay(ANIMATION_DELAY) focusRequester.requestFocus() } @@ -134,13 +134,11 @@ fun ButtonSection() { Spacer(modifier = Modifier.width(280.dp)) Button( - text = "Play", modifier = Modifier .padding(horizontal = 16.dp, vertical = 4.dp) - .focusRequester(focusRequester) - ) { - } + .focusRequester(focusRequester), onClick = onPlayClick + ) Spacer(modifier = Modifier.size(16.dp)) Text( color = LocalContentColor.current, @@ -244,6 +242,6 @@ fun Rating(rating: String) { @Composable fun DetailsScreenPrev() { Material3Theme { - ProductDetailsScreen {} + ProductDetailsScreen(onPlayClick = {}, onBackPressed = {}) } } diff --git a/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt b/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt index a860c3e..4c6ea1e 100644 --- a/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt +++ b/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt @@ -67,7 +67,11 @@ fun AppNavigation(navController: NavHostController, viewModel: HomeViewModel) { ProductDetailsScreen( onBackPressed = { navController.navigateUp() - }) + }, + onPlayClick = { + navController.navigate(Screens.Player.title) + } + ) } } } From 44b43f884514cc254d902780c0a3e24994bc122e Mon Sep 17 00:00:00 2001 From: Umair Date: Sat, 27 May 2023 00:32:57 +0200 Subject: [PATCH 03/20] Controls preview added --- .../features/player/controls/PlayerControls.kt | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/app/src/main/java/com/techlads/composetv/features/player/controls/PlayerControls.kt b/app/src/main/java/com/techlads/composetv/features/player/controls/PlayerControls.kt index 0f888fe..248352f 100644 --- a/app/src/main/java/com/techlads/composetv/features/player/controls/PlayerControls.kt +++ b/app/src/main/java/com/techlads/composetv/features/player/controls/PlayerControls.kt @@ -19,6 +19,7 @@ import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.focus.focusRequester import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color +import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.techlads.composetv.R @@ -166,4 +167,16 @@ fun PlayerControls( } } -private fun Long.padStartWith0() = this.toString().padStart(2, '0') \ No newline at end of file +private fun Long.padStartWith0() = this.toString().padStart(2, '0') + +@Preview +@Composable +private fun PlayerControlsPrev() { + PlayerControls( + isPlaying = false, + onPlayPauseToggle = {}, + onSeek = {}, + contentProgressInMillis = 0, + contentDurationInMillis = 0 + ) +} \ No newline at end of file From ef40bf37884e465433d1d3eccbef4b61b3ba485b Mon Sep 17 00:00:00 2001 From: Umair Date: Sat, 27 May 2023 01:30:19 +0200 Subject: [PATCH 04/20] Video title and Description added --- .../player/controls/PlayerControls.kt | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/app/src/main/java/com/techlads/composetv/features/player/controls/PlayerControls.kt b/app/src/main/java/com/techlads/composetv/features/player/controls/PlayerControls.kt index 248352f..fd914f0 100644 --- a/app/src/main/java/com/techlads/composetv/features/player/controls/PlayerControls.kt +++ b/app/src/main/java/com/techlads/composetv/features/player/controls/PlayerControls.kt @@ -1,3 +1,5 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.features.player.controls import androidx.compose.animation.AnimatedVisibility @@ -6,7 +8,12 @@ import androidx.compose.animation.slideOutVertically import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +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.runtime.LaunchedEffect import androidx.compose.runtime.derivedStateOf @@ -21,6 +28,8 @@ import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import androidx.tv.material3.ExperimentalTvMaterial3Api +import androidx.tv.material3.MaterialTheme import com.techlads.composetv.R @@ -119,6 +128,9 @@ fun PlayerControls( vertical = 32.dp ) ) { + + VideoHeaders() + Spacer(modifier = Modifier.height(32.dp)) Row( modifier = Modifier.padding(bottom = 16.dp), verticalAlignment = Alignment.CenterVertically @@ -167,16 +179,38 @@ fun PlayerControls( } } +@Composable +fun VideoHeaders() { + Column(Modifier.fillMaxWidth()) { + Text(text = "This is Dummy video title", + color = MaterialTheme.colorScheme.onSurface, + style = MaterialTheme.typography.headlineLarge) + Spacer(modifier = Modifier.height(8.dp)) + Text( + text = "This is Dummy video description | acting as placeholder for details", + color = MaterialTheme.colorScheme.onSurface, + style = MaterialTheme.typography.bodySmall + ) + } +} + private fun Long.padStartWith0() = this.toString().padStart(2, '0') @Preview @Composable private fun PlayerControlsPrev() { PlayerControls( + modifier = Modifier.fillMaxSize(), isPlaying = false, onPlayPauseToggle = {}, onSeek = {}, contentProgressInMillis = 0, contentDurationInMillis = 0 ) +} + +@Preview +@Composable +fun VideoHeadersPrev() { + VideoHeaders() } \ No newline at end of file From cf13dc8cbff1bbf4da50ab2e67d52a121ab52908 Mon Sep 17 00:00:00 2001 From: Umair Date: Sat, 27 May 2023 01:39:29 +0200 Subject: [PATCH 05/20] Controls animation updated expand Title and description placed at top of player --- .../features/player/controls/PlayerControls.kt | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/app/src/main/java/com/techlads/composetv/features/player/controls/PlayerControls.kt b/app/src/main/java/com/techlads/composetv/features/player/controls/PlayerControls.kt index fd914f0..f9d015c 100644 --- a/app/src/main/java/com/techlads/composetv/features/player/controls/PlayerControls.kt +++ b/app/src/main/java/com/techlads/composetv/features/player/controls/PlayerControls.kt @@ -3,8 +3,8 @@ package com.techlads.composetv.features.player.controls import androidx.compose.animation.AnimatedVisibility -import androidx.compose.animation.slideInVertically -import androidx.compose.animation.slideOutVertically +import androidx.compose.animation.expandVertically +import androidx.compose.animation.shrinkVertically import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row @@ -110,14 +110,15 @@ fun PlayerControls( AnimatedVisibility( modifier = modifier, visible = state.isDisplayed, - enter = slideInVertically { it }, - exit = slideOutVertically { it } + enter = expandVertically { it }, + exit = shrinkVertically { it } ) { Column( modifier = Modifier .background( brush = Brush.verticalGradient( colors = listOf( + Color.Black, Color.Transparent, Color.Black ) @@ -130,7 +131,7 @@ fun PlayerControls( ) { VideoHeaders() - Spacer(modifier = Modifier.height(32.dp)) + Spacer(modifier = Modifier.weight(1.0f)) Row( modifier = Modifier.padding(bottom = 16.dp), verticalAlignment = Alignment.CenterVertically From 689f494630e1cf936ec51c69f51576bc2809bc5f Mon Sep 17 00:00:00 2001 From: Umair Date: Wed, 14 Jun 2023 23:54:28 +0200 Subject: [PATCH 06/20] Login button migrated to tv material api --- .../login/withEmailPassword/LoginButton.kt | 73 +++++++------------ .../withEmailPassword/LoginScreenContent.kt | 7 +- .../composetv/navigation/AppNavigation.kt | 2 +- 3 files changed, 32 insertions(+), 50 deletions(-) diff --git a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginButton.kt b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginButton.kt index 2278060..6b30250 100644 --- a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginButton.kt +++ b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginButton.kt @@ -1,62 +1,43 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.features.login.withEmailPassword -import androidx.compose.foundation.focusable import androidx.compose.foundation.layout.* -import androidx.compose.material3.Button -import androidx.compose.material3.ButtonDefaults import androidx.tv.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.remember import androidx.compose.ui.Modifier -import androidx.compose.ui.focus.onFocusChanged -import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp -import com.techlads.composetv.theme.AppTheme -import com.techlads.composetv.theme.LightBlue +import androidx.tv.material3.Button +import androidx.tv.material3.ExperimentalTvMaterial3Api @Composable -fun LoginButton(onClick: () -> Unit) { - - val defaultColor = remember { - Color.White.copy(0.6F) - } - val selectedColor = remember { - LightBlue - } - val selectionColor = remember { mutableStateOf(defaultColor) } - - Box( - modifier = Modifier - .width(300.dp) - .padding(40.dp, 0.dp, 40.dp, 0.dp) +fun LoginButton(modifier: Modifier = Modifier, onClick: () -> Unit) { + Button( + onClick = onClick, + contentPadding = PaddingValues(16.dp), + modifier = modifier ) { - Button( - onClick = onClick, - shape = AppTheme.midShape, - colors = ButtonDefaults.buttonColors(selectionColor.value), - modifier = Modifier - .fillMaxWidth() - .height(50.dp) - .onFocusChanged { state -> - selectionColor.value = if (state.isFocused) { - selectedColor - } else { - defaultColor - } - } - .focusable(true) - ) { - Text( - text = "LOGIN", style = TextStyle( - color = Color.Black, - fontFamily = FontFamily.SansSerif, - fontWeight = FontWeight.Light - ) + Text( + modifier = Modifier.fillMaxWidth(), + text = "LOGIN", style = TextStyle( + fontFamily = FontFamily.SansSerif, + fontWeight = FontWeight.Light, + textAlign = TextAlign.Center, ) - } + ) + } +} + + +@Preview +@Composable +fun LoginButtonPrev() { + LoginButton(Modifier.wrapContentSize()) { + } } \ No newline at end of file diff --git a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreenContent.kt b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreenContent.kt index b2a37f6..054f109 100644 --- a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreenContent.kt +++ b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreenContent.kt @@ -8,6 +8,7 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.text.input.PasswordVisualTransformation +import androidx.compose.ui.tooling.preview.Devices import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp @Composable @@ -15,7 +16,7 @@ fun LoginPage( onLoginClick: (user: String, psw: String) -> Unit ) { Column( - modifier = Modifier.padding(20.dp), + modifier = Modifier.padding(20.dp).width(320.dp), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { @@ -37,13 +38,13 @@ fun LoginPage( ) { password.value = it } Spacer(modifier = Modifier.height(40.dp)) - LoginButton { + LoginButton(modifier = Modifier.padding(start = 20.dp, end = 20.dp)) { onLoginClick(username.value, password.value) } } } -@Preview +@Preview(device = Devices.TV_1080p) @Composable fun LoginPagePrev() { LoginPage { u, p -> diff --git a/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt b/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt index 4c6ea1e..8898487 100644 --- a/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt +++ b/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt @@ -20,7 +20,7 @@ import com.techlads.composetv.features.player.PlayerScreen @OptIn(ExperimentalAnimationApi::class) @Composable fun AppNavigation(navController: NavHostController, viewModel: HomeViewModel) { - AnimatedNavHost(navController = navController, startDestination = Screens.Home.title) { + AnimatedNavHost(navController = navController, startDestination = Screens.Login.title) { // e.g will add auth routes here if when we will extend project composable( Screens.Login.title, From a664fbd3ee79c90d385125876a07d976eb6858e8 Mon Sep 17 00:00:00 2001 From: Umair Date: Fri, 16 Jun 2023 11:19:10 +0200 Subject: [PATCH 07/20] Theme redo colors introduced --- .../com/techlads/composetv/theme/Color.kt | 65 +++++++++++++ .../com/techlads/composetv/theme/Theme.kt | 91 ++++++++++++++----- 2 files changed, 134 insertions(+), 22 deletions(-) diff --git a/app/src/main/java/com/techlads/composetv/theme/Color.kt b/app/src/main/java/com/techlads/composetv/theme/Color.kt index 050fcda..cffac4d 100644 --- a/app/src/main/java/com/techlads/composetv/theme/Color.kt +++ b/app/src/main/java/com/techlads/composetv/theme/Color.kt @@ -24,3 +24,68 @@ val Neutral10 = Color(0xFF000000) val LightBlue = Color(0xFF8FD3FE) val Gray20 = Color(0xFF222222) val Gray700 = Color(0xFF616161) + +val md_theme_light_primary = Color(0xFF825500) +val md_theme_light_onPrimary = Color(0xFFFFFFFF) +val md_theme_light_primaryContainer = Color(0xFFFFDDB3) +val md_theme_light_onPrimaryContainer = Color(0xFF291800) +val md_theme_light_secondary = Color(0xFF6F5B40) +val md_theme_light_onSecondary = Color(0xFFFFFFFF) +val md_theme_light_secondaryContainer = Color(0xFFFBDEBC) +val md_theme_light_onSecondaryContainer = Color(0xFF271904) +val md_theme_light_tertiary = Color(0xFF51643F) +val md_theme_light_onTertiary = Color(0xFFFFFFFF) +val md_theme_light_tertiaryContainer = Color(0xFFD4EABB) +val md_theme_light_onTertiaryContainer = Color(0xFF102004) +val md_theme_light_error = Color(0xFFBA1A1A) +val md_theme_light_errorContainer = Color(0xFFFFDAD6) +val md_theme_light_onError = Color(0xFFFFFFFF) +val md_theme_light_onErrorContainer = Color(0xFF410002) +val md_theme_light_background = Color(0xFFFFFBFF) +val md_theme_light_onBackground = Color(0xFF1F1B16) +val md_theme_light_surface = Color(0xFFFFFBFF) +val md_theme_light_onSurface = Color(0xFF1F1B16) +val md_theme_light_surfaceVariant = Color(0xFFF0E0CF) +val md_theme_light_onSurfaceVariant = Color(0xFF4F4539) +val md_theme_light_outline = Color(0xFF817567) +val md_theme_light_inverseOnSurface = Color(0xFFF9EFE7) +val md_theme_light_inverseSurface = Color(0xFF34302A) +val md_theme_light_inversePrimary = Color(0xFFFFB951) +val md_theme_light_shadow = Color(0xFF000000) +val md_theme_light_surfaceTint = Color(0xFF825500) +val md_theme_light_outlineVariant = Color(0xFFD3C4B4) +val md_theme_light_scrim = Color(0xFF000000) + +val md_theme_dark_primary = Color(0xFFFFB951) +val md_theme_dark_onPrimary = Color(0xFF452B00) +val md_theme_dark_primaryContainer = Color(0xFF633F00) +val md_theme_dark_onPrimaryContainer = Color(0xFFFFDDB3) +val md_theme_dark_secondary = Color(0xFFDDC2A1) +val md_theme_dark_onSecondary = Color(0xFF3E2D16) +val md_theme_dark_secondaryContainer = Color(0xFF56442A) +val md_theme_dark_onSecondaryContainer = Color(0xFFFBDEBC) +val md_theme_dark_tertiary = Color(0xFFB8CEA1) +val md_theme_dark_onTertiary = Color(0xFF243515) +val md_theme_dark_tertiaryContainer = Color(0xFF3A4C2A) +val md_theme_dark_onTertiaryContainer = Color(0xFFD4EABB) +val md_theme_dark_error = Color(0xFFFFB4AB) +val md_theme_dark_errorContainer = Color(0xFF93000A) +val md_theme_dark_onError = Color(0xFF690005) +val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6) +val md_theme_dark_background = Color(0xFF1F1B16) +val md_theme_dark_onBackground = Color(0xFFEAE1D9) +val md_theme_dark_surface = Color(0xFF1F1B16) +val md_theme_dark_onSurface = Color(0xFFEAE1D9) +val md_theme_dark_surfaceVariant = Color(0xFF4F4539) +val md_theme_dark_onSurfaceVariant = Color(0xFFD3C4B4) +val md_theme_dark_outline = Color(0xFF9C8F80) +val md_theme_dark_inverseOnSurface = Color(0xFF1F1B16) +val md_theme_dark_inverseSurface = Color(0xFFEAE1D9) +val md_theme_dark_inversePrimary = Color(0xFF825500) +val md_theme_dark_shadow = Color(0xFF000000) +val md_theme_dark_surfaceTint = Color(0xFFFFB951) +val md_theme_dark_outlineVariant = Color(0xFF4F4539) +val md_theme_dark_scrim = Color(0xFF000000) + + +val seed = Color(0xFF825500) diff --git a/app/src/main/java/com/techlads/composetv/theme/Theme.kt b/app/src/main/java/com/techlads/composetv/theme/Theme.kt index 702dce5..e3e0b1d 100644 --- a/app/src/main/java/com/techlads/composetv/theme/Theme.kt +++ b/app/src/main/java/com/techlads/composetv/theme/Theme.kt @@ -8,19 +8,75 @@ import androidx.compose.ui.unit.dp import androidx.tv.material3.* @OptIn(ExperimentalTvMaterial3Api::class) -private val DarkColorScheme = darkColorScheme( - primary = Purple80, - secondary = PurpleGrey80, - tertiary = Pink80, - background = Neutral10 +private val LightColors = lightColorScheme( + primary = md_theme_light_primary, + onPrimary = md_theme_light_onPrimary, + primaryContainer = md_theme_light_primaryContainer, + onPrimaryContainer = md_theme_light_onPrimaryContainer, + secondary = md_theme_light_secondary, + onSecondary = md_theme_light_onSecondary, + secondaryContainer = md_theme_light_secondaryContainer, + onSecondaryContainer = md_theme_light_onSecondaryContainer, + tertiary = md_theme_light_tertiary, + onTertiary = md_theme_light_onTertiary, + tertiaryContainer = md_theme_light_tertiaryContainer, + onTertiaryContainer = md_theme_light_onTertiaryContainer, + error = md_theme_light_error, + errorContainer = md_theme_light_errorContainer, + onError = md_theme_light_onError, + onErrorContainer = md_theme_light_onErrorContainer, + background = md_theme_light_background, + onBackground = md_theme_light_onBackground, + surface = md_theme_light_surface, + onSurface = md_theme_light_onSurface, + surfaceVariant = md_theme_light_surfaceVariant, + onSurfaceVariant = md_theme_light_onSurfaceVariant, + inverseOnSurface = md_theme_light_inverseOnSurface, + inverseSurface = md_theme_light_inverseSurface, + inversePrimary = md_theme_light_inversePrimary, + surfaceTint = md_theme_light_surfaceTint, + scrim = md_theme_light_scrim, ) + @OptIn(ExperimentalTvMaterial3Api::class) -private val LightColorScheme = lightColorScheme( - primary = Purple80, - secondary = PurpleGrey80, - tertiary = Pink80, - background = Neutral10 +private val DarkColors = darkColorScheme( + primary = md_theme_dark_primary, + onPrimary = md_theme_dark_onPrimary, + primaryContainer = md_theme_dark_primaryContainer, + onPrimaryContainer = md_theme_dark_onPrimaryContainer, + secondary = md_theme_dark_secondary, + onSecondary = md_theme_dark_onSecondary, + secondaryContainer = md_theme_dark_secondaryContainer, + onSecondaryContainer = md_theme_dark_onSecondaryContainer, + tertiary = md_theme_dark_tertiary, + onTertiary = md_theme_dark_onTertiary, + tertiaryContainer = md_theme_dark_tertiaryContainer, + onTertiaryContainer = md_theme_dark_onTertiaryContainer, + error = md_theme_dark_error, + errorContainer = md_theme_dark_errorContainer, + onError = md_theme_dark_onError, + onErrorContainer = md_theme_dark_onErrorContainer, + background = md_theme_dark_background, + onBackground = md_theme_dark_onBackground, + surface = md_theme_dark_surface, + onSurface = md_theme_dark_onSurface, + surfaceVariant = md_theme_dark_surfaceVariant, + onSurfaceVariant = md_theme_dark_onSurfaceVariant, + inverseOnSurface = md_theme_dark_inverseOnSurface, + inverseSurface = md_theme_dark_inverseSurface, + inversePrimary = md_theme_dark_inversePrimary, + surfaceTint = md_theme_dark_surfaceTint, + scrim = md_theme_dark_scrim, +) + + +val shapes = Shapes( + extraSmall = RoundedCornerShape(4.dp), + small = RoundedCornerShape(8.dp), + medium = RoundedCornerShape(16.dp), + large = RoundedCornerShape(24.dp), + extraLarge = RoundedCornerShape(32.dp) ) val MidShape = staticCompositionLocalOf { RoundedCornerShape(8.dp) } @@ -31,12 +87,6 @@ object AppTheme { @ReadOnlyComposable get() = MidShape.current - @OptIn(ExperimentalTvMaterial3Api::class) - val MainColor: Color - @Composable - @ReadOnlyComposable - get() = DarkColorScheme.primary - @OptIn(ExperimentalTvMaterial3Api::class) val surface: Color @Composable @@ -56,14 +106,11 @@ fun Material3Theme( content: @Composable () -> Unit ) { MaterialTheme( - colorScheme = DarkColorScheme, + colorScheme = DarkColors, typography = Typography, + shapes = shapes, content = { - CompositionLocalProvider( - LocalContentColor provides AppTheme.onSurface - ){ - content() - } + content() } ) } \ No newline at end of file From c9b59d75a60a47b2502e18aef1c0880e6db1c6cf Mon Sep 17 00:00:00 2001 From: Umair Date: Fri, 16 Jun 2023 11:31:04 +0200 Subject: [PATCH 08/20] Theme renamed to correct TV theme --- app/src/main/java/com/techlads/composetv/MainActivity.kt | 4 ++-- .../composetv/features/details/ProductDetailsScreen.kt | 4 ++-- app/src/main/java/com/techlads/composetv/theme/Theme.kt | 2 +- .../java/com/techlads/composetv/widgets/ThumbnailImageCard.kt | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/src/main/java/com/techlads/composetv/MainActivity.kt b/app/src/main/java/com/techlads/composetv/MainActivity.kt index c6f62ca..2e9008c 100644 --- a/app/src/main/java/com/techlads/composetv/MainActivity.kt +++ b/app/src/main/java/com/techlads/composetv/MainActivity.kt @@ -12,7 +12,7 @@ import androidx.navigation.NavHostController import com.google.accompanist.navigation.animation.rememberAnimatedNavController import com.techlads.composetv.features.home.HomeViewModel import com.techlads.composetv.navigation.AppNavigation -import com.techlads.composetv.theme.Material3Theme +import com.techlads.composetv.theme.ComposeTvTheme import dagger.hilt.android.AndroidEntryPoint @AndroidEntryPoint @@ -44,7 +44,7 @@ class MainActivity : ComponentActivity() { @Composable fun App(navController: NavHostController, viewModel: HomeViewModel) { - Material3Theme { + ComposeTvTheme { AppNavigation(navController, viewModel) } } diff --git a/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt b/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt index c7810f3..467f5a1 100644 --- a/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt +++ b/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt @@ -26,7 +26,7 @@ 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.theme.ComposeTvTheme import com.techlads.composetv.widgets.Button import com.techlads.composetv.widgets.ThumbnailImageCard import kotlinx.coroutines.delay @@ -241,7 +241,7 @@ fun Rating(rating: String) { @Preview(device = Devices.TV_1080p) @Composable fun DetailsScreenPrev() { - Material3Theme { + ComposeTvTheme { ProductDetailsScreen(onPlayClick = {}, onBackPressed = {}) } } diff --git a/app/src/main/java/com/techlads/composetv/theme/Theme.kt b/app/src/main/java/com/techlads/composetv/theme/Theme.kt index e3e0b1d..f467e07 100644 --- a/app/src/main/java/com/techlads/composetv/theme/Theme.kt +++ b/app/src/main/java/com/techlads/composetv/theme/Theme.kt @@ -102,7 +102,7 @@ object AppTheme { @OptIn(ExperimentalTvMaterial3Api::class) @Composable -fun Material3Theme( +fun ComposeTvTheme( content: @Composable () -> Unit ) { MaterialTheme( diff --git a/app/src/main/java/com/techlads/composetv/widgets/ThumbnailImageCard.kt b/app/src/main/java/com/techlads/composetv/widgets/ThumbnailImageCard.kt index 8e7085d..ad52446 100644 --- a/app/src/main/java/com/techlads/composetv/widgets/ThumbnailImageCard.kt +++ b/app/src/main/java/com/techlads/composetv/widgets/ThumbnailImageCard.kt @@ -15,7 +15,7 @@ import androidx.compose.ui.unit.dp import androidx.tv.material3.ExperimentalTvMaterial3Api import androidx.tv.material3.MaterialTheme import androidx.tv.material3.Text -import com.techlads.composetv.theme.Material3Theme +import com.techlads.composetv.theme.ComposeTvTheme @Composable fun ThumbnailImageCard( @@ -34,7 +34,7 @@ fun ThumbnailImageCard( @Preview @Composable fun ThumbnailImageCardPreview() { - Material3Theme { + ComposeTvTheme { ThumbnailImageCard( Modifier .width(150.dp) From 62003057d36d3c3a173a1d554dd45d15aa532bd9 Mon Sep 17 00:00:00 2001 From: Umair Date: Fri, 16 Jun 2023 11:32:02 +0200 Subject: [PATCH 09/20] Removed all light colors --- .../com/techlads/composetv/theme/Color.kt | 31 ------------------ .../com/techlads/composetv/theme/Theme.kt | 32 ------------------- 2 files changed, 63 deletions(-) diff --git a/app/src/main/java/com/techlads/composetv/theme/Color.kt b/app/src/main/java/com/techlads/composetv/theme/Color.kt index cffac4d..6f7ebef 100644 --- a/app/src/main/java/com/techlads/composetv/theme/Color.kt +++ b/app/src/main/java/com/techlads/composetv/theme/Color.kt @@ -25,37 +25,6 @@ val LightBlue = Color(0xFF8FD3FE) val Gray20 = Color(0xFF222222) val Gray700 = Color(0xFF616161) -val md_theme_light_primary = Color(0xFF825500) -val md_theme_light_onPrimary = Color(0xFFFFFFFF) -val md_theme_light_primaryContainer = Color(0xFFFFDDB3) -val md_theme_light_onPrimaryContainer = Color(0xFF291800) -val md_theme_light_secondary = Color(0xFF6F5B40) -val md_theme_light_onSecondary = Color(0xFFFFFFFF) -val md_theme_light_secondaryContainer = Color(0xFFFBDEBC) -val md_theme_light_onSecondaryContainer = Color(0xFF271904) -val md_theme_light_tertiary = Color(0xFF51643F) -val md_theme_light_onTertiary = Color(0xFFFFFFFF) -val md_theme_light_tertiaryContainer = Color(0xFFD4EABB) -val md_theme_light_onTertiaryContainer = Color(0xFF102004) -val md_theme_light_error = Color(0xFFBA1A1A) -val md_theme_light_errorContainer = Color(0xFFFFDAD6) -val md_theme_light_onError = Color(0xFFFFFFFF) -val md_theme_light_onErrorContainer = Color(0xFF410002) -val md_theme_light_background = Color(0xFFFFFBFF) -val md_theme_light_onBackground = Color(0xFF1F1B16) -val md_theme_light_surface = Color(0xFFFFFBFF) -val md_theme_light_onSurface = Color(0xFF1F1B16) -val md_theme_light_surfaceVariant = Color(0xFFF0E0CF) -val md_theme_light_onSurfaceVariant = Color(0xFF4F4539) -val md_theme_light_outline = Color(0xFF817567) -val md_theme_light_inverseOnSurface = Color(0xFFF9EFE7) -val md_theme_light_inverseSurface = Color(0xFF34302A) -val md_theme_light_inversePrimary = Color(0xFFFFB951) -val md_theme_light_shadow = Color(0xFF000000) -val md_theme_light_surfaceTint = Color(0xFF825500) -val md_theme_light_outlineVariant = Color(0xFFD3C4B4) -val md_theme_light_scrim = Color(0xFF000000) - val md_theme_dark_primary = Color(0xFFFFB951) val md_theme_dark_onPrimary = Color(0xFF452B00) val md_theme_dark_primaryContainer = Color(0xFF633F00) diff --git a/app/src/main/java/com/techlads/composetv/theme/Theme.kt b/app/src/main/java/com/techlads/composetv/theme/Theme.kt index f467e07..edb9adc 100644 --- a/app/src/main/java/com/techlads/composetv/theme/Theme.kt +++ b/app/src/main/java/com/techlads/composetv/theme/Theme.kt @@ -7,38 +7,6 @@ import androidx.compose.ui.graphics.Shape import androidx.compose.ui.unit.dp import androidx.tv.material3.* -@OptIn(ExperimentalTvMaterial3Api::class) -private val LightColors = lightColorScheme( - primary = md_theme_light_primary, - onPrimary = md_theme_light_onPrimary, - primaryContainer = md_theme_light_primaryContainer, - onPrimaryContainer = md_theme_light_onPrimaryContainer, - secondary = md_theme_light_secondary, - onSecondary = md_theme_light_onSecondary, - secondaryContainer = md_theme_light_secondaryContainer, - onSecondaryContainer = md_theme_light_onSecondaryContainer, - tertiary = md_theme_light_tertiary, - onTertiary = md_theme_light_onTertiary, - tertiaryContainer = md_theme_light_tertiaryContainer, - onTertiaryContainer = md_theme_light_onTertiaryContainer, - error = md_theme_light_error, - errorContainer = md_theme_light_errorContainer, - onError = md_theme_light_onError, - onErrorContainer = md_theme_light_onErrorContainer, - background = md_theme_light_background, - onBackground = md_theme_light_onBackground, - surface = md_theme_light_surface, - onSurface = md_theme_light_onSurface, - surfaceVariant = md_theme_light_surfaceVariant, - onSurfaceVariant = md_theme_light_onSurfaceVariant, - inverseOnSurface = md_theme_light_inverseOnSurface, - inverseSurface = md_theme_light_inverseSurface, - inversePrimary = md_theme_light_inversePrimary, - surfaceTint = md_theme_light_surfaceTint, - scrim = md_theme_light_scrim, -) - - @OptIn(ExperimentalTvMaterial3Api::class) private val DarkColors = darkColorScheme( primary = md_theme_dark_primary, From e21e325e81b1eb880d570adf470c71e8b15f2aec Mon Sep 17 00:00:00 2001 From: Umair Date: Fri, 16 Jun 2023 11:32:29 +0200 Subject: [PATCH 10/20] Removed all unused colors --- app/src/main/java/com/techlads/composetv/theme/Color.kt | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/src/main/java/com/techlads/composetv/theme/Color.kt b/app/src/main/java/com/techlads/composetv/theme/Color.kt index 6f7ebef..33ef7e8 100644 --- a/app/src/main/java/com/techlads/composetv/theme/Color.kt +++ b/app/src/main/java/com/techlads/composetv/theme/Color.kt @@ -17,10 +17,6 @@ package com.techlads.composetv.theme import androidx.compose.ui.graphics.Color -val Purple80 = Color(0xFFD0BCFF) -val PurpleGrey80 = Color(0xFFCCC2DC) -val Pink80 = Color(0xFFEFB8C8) -val Neutral10 = Color(0xFF000000) val LightBlue = Color(0xFF8FD3FE) val Gray20 = Color(0xFF222222) val Gray700 = Color(0xFF616161) From e3a41e5ab5ec87985348bb1c76b98e79e6650e5d Mon Sep 17 00:00:00 2001 From: Umair Date: Fri, 16 Jun 2023 12:10:37 +0200 Subject: [PATCH 11/20] Themes updated using material three guidelines --- .../com/techlads/composetv/CustomDialogUI.kt | 10 +- .../features/details/ProductDetailsScreen.kt | 6 +- .../features/home/leftmenu/LeftMenu.kt | 7 +- .../login/withEmailPassword/TvTextField.kt | 3 +- .../DeviceTokenAuthenticationContent.kt | 3 +- .../features/settings/SettingsScreen.kt | 7 +- .../com/techlads/composetv/theme/Color.kt | 100 ++++++------ .../com/techlads/composetv/theme/Theme.kt | 147 ++++++++++++------ 8 files changed, 177 insertions(+), 106 deletions(-) diff --git a/app/src/main/java/com/techlads/composetv/CustomDialogUI.kt b/app/src/main/java/com/techlads/composetv/CustomDialogUI.kt index 77b08f0..18d588b 100644 --- a/app/src/main/java/com/techlads/composetv/CustomDialogUI.kt +++ b/app/src/main/java/com/techlads/composetv/CustomDialogUI.kt @@ -18,9 +18,6 @@ import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.window.Dialog -import com.techlads.composetv.theme.Gray20 -import com.techlads.composetv.theme.Gray700 -import com.techlads.composetv.theme.LightBlue @Composable fun CustomDialog(openDialogCustom: MutableState, onExitClick: () -> Unit) { @@ -50,7 +47,7 @@ fun CustomDialogUI( contentDescription = null, // decorative contentScale = ContentScale.Fit, colorFilter = ColorFilter.tint( - color = LightBlue + color = MaterialTheme.colorScheme.onSurface ), modifier = Modifier .padding(top = 35.dp) @@ -84,7 +81,8 @@ fun CustomDialogUI( Modifier .fillMaxWidth() .padding(top = 10.dp) - .background(Gray20.copy(0.2F)), +// .background(Gray20.copy(0.2F)) + , ) { TextButton(onClick = { openDialogCustom.value = false @@ -92,7 +90,7 @@ fun CustomDialogUI( Text( "No", fontWeight = FontWeight.Bold, - color = Gray700, +// color = Gray700, modifier = Modifier.padding(top = 5.dp, bottom = 5.dp) ) } diff --git a/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt b/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt index 467f5a1..f8f1415 100644 --- a/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt +++ b/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt @@ -1,3 +1,5 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.features.details import androidx.activity.compose.BackHandler @@ -21,11 +23,11 @@ import androidx.compose.ui.tooling.preview.Devices import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.zIndex +import androidx.tv.material3.ExperimentalTvMaterial3Api 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.ComposeTvTheme import com.techlads.composetv.widgets.Button import com.techlads.composetv.widgets.ThumbnailImageCard @@ -127,7 +129,7 @@ fun ButtonSection(onPlayClick: () -> Unit) { modifier = Modifier .fillMaxWidth() .height(60.dp) - .background(color = AppTheme.surface.copy(alpha = 0.5f)), + .background(color = MaterialTheme.colorScheme.surface.copy(alpha = 0.5f)), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Start ) { diff --git a/app/src/main/java/com/techlads/composetv/features/home/leftmenu/LeftMenu.kt b/app/src/main/java/com/techlads/composetv/features/home/leftmenu/LeftMenu.kt index e02354b..4ee4273 100644 --- a/app/src/main/java/com/techlads/composetv/features/home/leftmenu/LeftMenu.kt +++ b/app/src/main/java/com/techlads/composetv/features/home/leftmenu/LeftMenu.kt @@ -1,3 +1,5 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.features.home.leftmenu import androidx.compose.animation.core.animateDpAsState @@ -10,9 +12,10 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import androidx.tv.material3.ExperimentalTvMaterial3Api +import androidx.tv.material3.MaterialTheme import com.techlads.composetv.features.home.navigation.NestedScreens import com.techlads.composetv.features.home.leftmenu.model.MenuItem -import com.techlads.composetv.theme.AppTheme import compose.icons.LineAwesomeIcons import compose.icons.lineawesomeicons.CogSolid import compose.icons.lineawesomeicons.Comment @@ -43,7 +46,7 @@ fun LeftMenu( Box( modifier = modifier - .background(AppTheme.surface.copy(alpha = 0.5f)) + .background(MaterialTheme.colorScheme.surface.copy(alpha = 0.5f)) .wrapContentWidth() ) { Column( diff --git a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/TvTextField.kt b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/TvTextField.kt index a38071d..3035134 100644 --- a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/TvTextField.kt +++ b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/TvTextField.kt @@ -18,7 +18,6 @@ import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.tooling.preview.Preview -import com.techlads.composetv.theme.LightBlue @OptIn(ExperimentalMaterial3Api::class) @Composable @@ -33,7 +32,7 @@ fun TvTextField( Color.White.copy(0.6F) } val selectedColor = remember { - LightBlue + Color.Blue } val selectionColor = remember { mutableStateOf(defaultColor) } diff --git a/app/src/main/java/com/techlads/composetv/features/login/withToken/DeviceTokenAuthenticationContent.kt b/app/src/main/java/com/techlads/composetv/features/login/withToken/DeviceTokenAuthenticationContent.kt index 240351d..0354f7f 100644 --- a/app/src/main/java/com/techlads/composetv/features/login/withToken/DeviceTokenAuthenticationContent.kt +++ b/app/src/main/java/com/techlads/composetv/features/login/withToken/DeviceTokenAuthenticationContent.kt @@ -28,7 +28,6 @@ import com.github.alexzhirkevich.customqrgenerator.QrData import com.github.alexzhirkevich.customqrgenerator.vector.QrCodeDrawable import com.github.alexzhirkevich.customqrgenerator.vector.QrVectorOptions import com.github.alexzhirkevich.customqrgenerator.vector.style.* -import com.techlads.composetv.theme.AppTheme @Composable fun DeviceTokenAuthenticationContent( @@ -144,7 +143,7 @@ fun DeviceTokenAuthenticationContent( ) { Button( onClick = { onLoginClick(token) }, - shape = AppTheme.midShape, + shape = MaterialTheme.shapes.medium, colors = ButtonDefaults.buttonColors(Color.White), modifier = Modifier .fillMaxWidth() diff --git a/app/src/main/java/com/techlads/composetv/features/settings/SettingsScreen.kt b/app/src/main/java/com/techlads/composetv/features/settings/SettingsScreen.kt index 68de95c..e29b2d4 100644 --- a/app/src/main/java/com/techlads/composetv/features/settings/SettingsScreen.kt +++ b/app/src/main/java/com/techlads/composetv/features/settings/SettingsScreen.kt @@ -1,3 +1,5 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.features.settings import androidx.compose.animation.ExperimentalAnimationApi @@ -8,9 +10,10 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.navigation.NavHostController +import androidx.tv.material3.ExperimentalTvMaterial3Api +import androidx.tv.material3.MaterialTheme import com.google.accompanist.navigation.animation.rememberAnimatedNavController import com.techlads.composetv.features.settings.navigation.NestedSettingsScreenNavigation -import com.techlads.composetv.theme.AppTheme @OptIn(ExperimentalAnimationApi::class) @Composable @@ -23,7 +26,7 @@ fun SettingsScreen() { SettingsMenu( Modifier .fillMaxHeight() - .background(AppTheme.surface.copy(alpha = 0.2f)) + .background(MaterialTheme.colorScheme.surface.copy(alpha = 0.2f)) .padding(vertical = 32.dp, horizontal = 16.dp) ) { navController.navigate(it.navigation) diff --git a/app/src/main/java/com/techlads/composetv/theme/Color.kt b/app/src/main/java/com/techlads/composetv/theme/Color.kt index 33ef7e8..6d85b2f 100644 --- a/app/src/main/java/com/techlads/composetv/theme/Color.kt +++ b/app/src/main/java/com/techlads/composetv/theme/Color.kt @@ -1,56 +1,66 @@ -/* - * Copyright 2022 The Android Open Source Project - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * https://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -package com.techlads.composetv.theme - import androidx.compose.ui.graphics.Color -val LightBlue = Color(0xFF8FD3FE) -val Gray20 = Color(0xFF222222) -val Gray700 = Color(0xFF616161) +val md_theme_light_primary = Color(0xFF166D33) +val md_theme_light_onPrimary = Color(0xFFFFFFFF) +val md_theme_light_primaryContainer = Color(0xFFA1F6AC) +val md_theme_light_onPrimaryContainer = Color(0xFF002109) +val md_theme_light_secondary = Color(0xFF396A1E) +val md_theme_light_onSecondary = Color(0xFFFFFFFF) +val md_theme_light_secondaryContainer = Color(0xFFB9F295) +val md_theme_light_onSecondaryContainer = Color(0xFF082100) +val md_theme_light_tertiary = Color(0xFF39656D) +val md_theme_light_onTertiary = Color(0xFFFFFFFF) +val md_theme_light_tertiaryContainer = Color(0xFFBDEAF3) +val md_theme_light_onTertiaryContainer = Color(0xFF001F24) +val md_theme_light_error = Color(0xFFBA1A1A) +val md_theme_light_errorContainer = Color(0xFFFFDAD6) +val md_theme_light_onError = Color(0xFFFFFFFF) +val md_theme_light_onErrorContainer = Color(0xFF410002) +val md_theme_light_background = Color(0xFFFCFDF7) +val md_theme_light_onBackground = Color(0xFF1A1C19) +val md_theme_light_surface = Color(0xFFFCFDF7) +val md_theme_light_onSurface = Color(0xFF1A1C19) +val md_theme_light_surfaceVariant = Color(0xFFDDE5DA) +val md_theme_light_onSurfaceVariant = Color(0xFF414941) +val md_theme_light_outline = Color(0xFF727970) +val md_theme_light_inverseOnSurface = Color(0xFFF0F1EC) +val md_theme_light_inverseSurface = Color(0xFF2E312E) +val md_theme_light_inversePrimary = Color(0xFF86D992) +val md_theme_light_shadow = Color(0xFF000000) +val md_theme_light_surfaceTint = Color(0xFF166D33) +val md_theme_light_outlineVariant = Color(0xFFC1C9BE) +val md_theme_light_scrim = Color(0xFF000000) -val md_theme_dark_primary = Color(0xFFFFB951) -val md_theme_dark_onPrimary = Color(0xFF452B00) -val md_theme_dark_primaryContainer = Color(0xFF633F00) -val md_theme_dark_onPrimaryContainer = Color(0xFFFFDDB3) -val md_theme_dark_secondary = Color(0xFFDDC2A1) -val md_theme_dark_onSecondary = Color(0xFF3E2D16) -val md_theme_dark_secondaryContainer = Color(0xFF56442A) -val md_theme_dark_onSecondaryContainer = Color(0xFFFBDEBC) -val md_theme_dark_tertiary = Color(0xFFB8CEA1) -val md_theme_dark_onTertiary = Color(0xFF243515) -val md_theme_dark_tertiaryContainer = Color(0xFF3A4C2A) -val md_theme_dark_onTertiaryContainer = Color(0xFFD4EABB) +val md_theme_dark_primary = Color(0xFF86D992) +val md_theme_dark_onPrimary = Color(0xFF003915) +val md_theme_dark_primaryContainer = Color(0xFF005321) +val md_theme_dark_onPrimaryContainer = Color(0xFFA1F6AC) +val md_theme_dark_secondary = Color(0xFF9ED67C) +val md_theme_dark_onSecondary = Color(0xFF133800) +val md_theme_dark_secondaryContainer = Color(0xFF225105) +val md_theme_dark_onSecondaryContainer = Color(0xFFB9F295) +val md_theme_dark_tertiary = Color(0xFFA1CED7) +val md_theme_dark_onTertiary = Color(0xFF00363D) +val md_theme_dark_tertiaryContainer = Color(0xFF1F4D55) +val md_theme_dark_onTertiaryContainer = Color(0xFFBDEAF3) val md_theme_dark_error = Color(0xFFFFB4AB) val md_theme_dark_errorContainer = Color(0xFF93000A) val md_theme_dark_onError = Color(0xFF690005) val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6) -val md_theme_dark_background = Color(0xFF1F1B16) -val md_theme_dark_onBackground = Color(0xFFEAE1D9) -val md_theme_dark_surface = Color(0xFF1F1B16) -val md_theme_dark_onSurface = Color(0xFFEAE1D9) -val md_theme_dark_surfaceVariant = Color(0xFF4F4539) -val md_theme_dark_onSurfaceVariant = Color(0xFFD3C4B4) -val md_theme_dark_outline = Color(0xFF9C8F80) -val md_theme_dark_inverseOnSurface = Color(0xFF1F1B16) -val md_theme_dark_inverseSurface = Color(0xFFEAE1D9) -val md_theme_dark_inversePrimary = Color(0xFF825500) +val md_theme_dark_background = Color(0xFF1A1C19) +val md_theme_dark_onBackground = Color(0xFFE2E3DD) +val md_theme_dark_surface = Color(0xFF1A1C19) +val md_theme_dark_onSurface = Color(0xFFE2E3DD) +val md_theme_dark_surfaceVariant = Color(0xFF414941) +val md_theme_dark_onSurfaceVariant = Color(0xFFC1C9BE) +val md_theme_dark_outline = Color(0xFF8B9389) +val md_theme_dark_inverseOnSurface = Color(0xFF1A1C19) +val md_theme_dark_inverseSurface = Color(0xFFE2E3DD) +val md_theme_dark_inversePrimary = Color(0xFF166D33) val md_theme_dark_shadow = Color(0xFF000000) -val md_theme_dark_surfaceTint = Color(0xFFFFB951) -val md_theme_dark_outlineVariant = Color(0xFF4F4539) +val md_theme_dark_surfaceTint = Color(0xFF86D992) +val md_theme_dark_outlineVariant = Color(0xFF414941) val md_theme_dark_scrim = Color(0xFF000000) -val seed = Color(0xFF825500) +val seed = Color(0xFF006028) diff --git a/app/src/main/java/com/techlads/composetv/theme/Theme.kt b/app/src/main/java/com/techlads/composetv/theme/Theme.kt index edb9adc..bbd1260 100644 --- a/app/src/main/java/com/techlads/composetv/theme/Theme.kt +++ b/app/src/main/java/com/techlads/composetv/theme/Theme.kt @@ -1,13 +1,98 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.theme -import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.runtime.* -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.Shape -import androidx.compose.ui.unit.dp -import androidx.tv.material3.* +import androidx.compose.runtime.Composable +import androidx.tv.material3.ExperimentalTvMaterial3Api +import androidx.tv.material3.MaterialTheme +import androidx.tv.material3.lightColorScheme +import androidx.tv.material3.darkColorScheme +import md_theme_dark_background +import md_theme_dark_error +import md_theme_dark_errorContainer +import md_theme_dark_inverseOnSurface +import md_theme_dark_inversePrimary +import md_theme_dark_inverseSurface +import md_theme_dark_onBackground +import md_theme_dark_onError +import md_theme_dark_onErrorContainer +import md_theme_dark_onPrimary +import md_theme_dark_onPrimaryContainer +import md_theme_dark_onSecondary +import md_theme_dark_onSecondaryContainer +import md_theme_dark_onSurface +import md_theme_dark_onSurfaceVariant +import md_theme_dark_onTertiary +import md_theme_dark_onTertiaryContainer +import md_theme_dark_primary +import md_theme_dark_primaryContainer +import md_theme_dark_scrim +import md_theme_dark_secondary +import md_theme_dark_secondaryContainer +import md_theme_dark_surface +import md_theme_dark_surfaceTint +import md_theme_dark_surfaceVariant +import md_theme_dark_tertiary +import md_theme_dark_tertiaryContainer +import md_theme_light_background +import md_theme_light_error +import md_theme_light_errorContainer +import md_theme_light_inverseOnSurface +import md_theme_light_inversePrimary +import md_theme_light_inverseSurface +import md_theme_light_onBackground +import md_theme_light_onError +import md_theme_light_onErrorContainer +import md_theme_light_onPrimary +import md_theme_light_onPrimaryContainer +import md_theme_light_onSecondary +import md_theme_light_onSecondaryContainer +import md_theme_light_onSurface +import md_theme_light_onSurfaceVariant +import md_theme_light_onTertiary +import md_theme_light_onTertiaryContainer +import md_theme_light_primary +import md_theme_light_primaryContainer +import md_theme_light_scrim +import md_theme_light_secondary +import md_theme_light_secondaryContainer +import md_theme_light_surface +import md_theme_light_surfaceTint +import md_theme_light_surfaceVariant +import md_theme_light_tertiary +import md_theme_light_tertiaryContainer + +private val LightColors = lightColorScheme( + primary = md_theme_light_primary, + onPrimary = md_theme_light_onPrimary, + primaryContainer = md_theme_light_primaryContainer, + onPrimaryContainer = md_theme_light_onPrimaryContainer, + secondary = md_theme_light_secondary, + onSecondary = md_theme_light_onSecondary, + secondaryContainer = md_theme_light_secondaryContainer, + onSecondaryContainer = md_theme_light_onSecondaryContainer, + tertiary = md_theme_light_tertiary, + onTertiary = md_theme_light_onTertiary, + tertiaryContainer = md_theme_light_tertiaryContainer, + onTertiaryContainer = md_theme_light_onTertiaryContainer, + error = md_theme_light_error, + errorContainer = md_theme_light_errorContainer, + onError = md_theme_light_onError, + onErrorContainer = md_theme_light_onErrorContainer, + background = md_theme_light_background, + onBackground = md_theme_light_onBackground, + surface = md_theme_light_surface, + onSurface = md_theme_light_onSurface, + surfaceVariant = md_theme_light_surfaceVariant, + onSurfaceVariant = md_theme_light_onSurfaceVariant, + inverseOnSurface = md_theme_light_inverseOnSurface, + inverseSurface = md_theme_light_inverseSurface, + inversePrimary = md_theme_light_inversePrimary, + surfaceTint = md_theme_light_surfaceTint, + scrim = md_theme_light_scrim, +) + -@OptIn(ExperimentalTvMaterial3Api::class) private val DarkColors = darkColorScheme( primary = md_theme_dark_primary, onPrimary = md_theme_dark_onPrimary, @@ -38,47 +123,19 @@ private val DarkColors = darkColorScheme( scrim = md_theme_dark_scrim, ) - -val shapes = Shapes( - extraSmall = RoundedCornerShape(4.dp), - small = RoundedCornerShape(8.dp), - medium = RoundedCornerShape(16.dp), - large = RoundedCornerShape(24.dp), - extraLarge = RoundedCornerShape(32.dp) -) - -val MidShape = staticCompositionLocalOf { RoundedCornerShape(8.dp) } - -object AppTheme { - val midShape: Shape - @Composable - @ReadOnlyComposable - get() = MidShape.current - - @OptIn(ExperimentalTvMaterial3Api::class) - val surface: Color - @Composable - @ReadOnlyComposable - get() = MaterialTheme.colorScheme.surface - - @OptIn(ExperimentalTvMaterial3Api::class) - val onSurface: Color - @Composable - @ReadOnlyComposable - get() = MaterialTheme.colorScheme.onSurface -} - -@OptIn(ExperimentalTvMaterial3Api::class) @Composable fun ComposeTvTheme( - content: @Composable () -> Unit + useDarkTheme: Boolean = false, + content: @Composable() () -> Unit ) { + val colors = if (!useDarkTheme) { + LightColors + } else { + DarkColors + } + MaterialTheme( - colorScheme = DarkColors, - typography = Typography, - shapes = shapes, - content = { - content() - } + colorScheme = colors, + content = content ) } \ No newline at end of file From 793aef44d73dd6c3d8e12d6551e83e6af7530e94 Mon Sep 17 00:00:00 2001 From: Umair Date: Fri, 16 Jun 2023 12:21:20 +0200 Subject: [PATCH 12/20] Corrected theme colors for hero items --- .../composetv/features/home/hero/HeroItem.kt | 19 +++++++++++++++---- .../com/techlads/composetv/theme/Theme.kt | 6 +++--- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/app/src/main/java/com/techlads/composetv/features/home/hero/HeroItem.kt b/app/src/main/java/com/techlads/composetv/features/home/hero/HeroItem.kt index a2a280c..aa35661 100644 --- a/app/src/main/java/com/techlads/composetv/features/home/hero/HeroItem.kt +++ b/app/src/main/java/com/techlads/composetv/features/home/hero/HeroItem.kt @@ -1,3 +1,5 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.features.home.hero import androidx.compose.foundation.Image @@ -14,8 +16,10 @@ 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 androidx.tv.material3.ExperimentalTvMaterial3Api import androidx.tv.material3.MaterialTheme import com.techlads.composetv.R +import com.techlads.composetv.theme.ComposeTvTheme @Composable fun HeroItem(modifier: Modifier = Modifier) { @@ -36,14 +40,19 @@ fun HeroItem(modifier: Modifier = Modifier) { Column( Modifier .fillMaxSize() - .background(Color.Black.copy(alpha = 0.7f)) + .background(MaterialTheme.colorScheme.background.copy(alpha = 0.7f)) .padding(32.dp) ) { Spacer(modifier = Modifier.weight(1f)) - Text(text = "Heading", style = MaterialTheme.typography.titleLarge) + Text( + text = "Heading", + style = MaterialTheme.typography.titleLarge, + color = MaterialTheme.colorScheme.onSurface + ) Text( text = "Description", - style = MaterialTheme.typography.titleSmall.copy(fontWeight = FontWeight.ExtraLight) + style = MaterialTheme.typography.titleSmall.copy(fontWeight = FontWeight.ExtraLight), + color = MaterialTheme.colorScheme.onSurface ) } } @@ -53,5 +62,7 @@ fun HeroItem(modifier: Modifier = Modifier) { @Preview @Composable fun HeroItemPrev() { - HeroItem() + ComposeTvTheme(true) { + HeroItem() + } } \ No newline at end of file diff --git a/app/src/main/java/com/techlads/composetv/theme/Theme.kt b/app/src/main/java/com/techlads/composetv/theme/Theme.kt index bbd1260..e1de000 100644 --- a/app/src/main/java/com/techlads/composetv/theme/Theme.kt +++ b/app/src/main/java/com/techlads/composetv/theme/Theme.kt @@ -128,10 +128,10 @@ fun ComposeTvTheme( useDarkTheme: Boolean = false, content: @Composable() () -> Unit ) { - val colors = if (!useDarkTheme) { - LightColors - } else { + val colors = if (useDarkTheme) { DarkColors + } else { + LightColors } MaterialTheme( From a5fc3048597c5e7a83e2d50bdde2d382882e70d8 Mon Sep 17 00:00:00 2001 From: Umair Date: Fri, 16 Jun 2023 12:21:41 +0200 Subject: [PATCH 13/20] Unused imports removed --- .../java/com/techlads/composetv/features/home/hero/HeroItem.kt | 1 - 1 file changed, 1 deletion(-) diff --git a/app/src/main/java/com/techlads/composetv/features/home/hero/HeroItem.kt b/app/src/main/java/com/techlads/composetv/features/home/hero/HeroItem.kt index aa35661..a6f9ee8 100644 --- a/app/src/main/java/com/techlads/composetv/features/home/hero/HeroItem.kt +++ b/app/src/main/java/com/techlads/composetv/features/home/hero/HeroItem.kt @@ -10,7 +10,6 @@ import androidx.compose.material3.CardDefaults import androidx.tv.material3.Text 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 From f42b1cd12dbcbc687e1d56fd2e6f9f3a09c173b9 Mon Sep 17 00:00:00 2001 From: Umair Date: Fri, 16 Jun 2023 12:44:04 +0200 Subject: [PATCH 14/20] Shapes introduced in theme --- .../composetv/features/home/hero/HeroItem.kt | 2 +- .../main/java/com/techlads/composetv/theme/Shape.kt | 13 +++++++++++++ .../main/java/com/techlads/composetv/theme/Theme.kt | 11 +++++++++-- 3 files changed, 23 insertions(+), 3 deletions(-) create mode 100644 app/src/main/java/com/techlads/composetv/theme/Shape.kt diff --git a/app/src/main/java/com/techlads/composetv/features/home/hero/HeroItem.kt b/app/src/main/java/com/techlads/composetv/features/home/hero/HeroItem.kt index a6f9ee8..28370d3 100644 --- a/app/src/main/java/com/techlads/composetv/features/home/hero/HeroItem.kt +++ b/app/src/main/java/com/techlads/composetv/features/home/hero/HeroItem.kt @@ -61,7 +61,7 @@ fun HeroItem(modifier: Modifier = Modifier) { @Preview @Composable fun HeroItemPrev() { - ComposeTvTheme(true) { + ComposeTvTheme { HeroItem() } } \ No newline at end of file diff --git a/app/src/main/java/com/techlads/composetv/theme/Shape.kt b/app/src/main/java/com/techlads/composetv/theme/Shape.kt new file mode 100644 index 0000000..e01b820 --- /dev/null +++ b/app/src/main/java/com/techlads/composetv/theme/Shape.kt @@ -0,0 +1,13 @@ +package com.techlads.composetv.theme + +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.ui.unit.dp +import androidx.tv.material3.Shapes + +val Shapes = Shapes( + extraSmall = RoundedCornerShape(4.dp), + small = RoundedCornerShape(8.dp), + medium = RoundedCornerShape(12.dp), + large = RoundedCornerShape(16.dp), + extraLarge = RoundedCornerShape(24.dp) +) \ No newline at end of file diff --git a/app/src/main/java/com/techlads/composetv/theme/Theme.kt b/app/src/main/java/com/techlads/composetv/theme/Theme.kt index e1de000..a6a5bbb 100644 --- a/app/src/main/java/com/techlads/composetv/theme/Theme.kt +++ b/app/src/main/java/com/techlads/composetv/theme/Theme.kt @@ -3,6 +3,7 @@ package com.techlads.composetv.theme import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider import androidx.tv.material3.ExperimentalTvMaterial3Api import androidx.tv.material3.MaterialTheme import androidx.tv.material3.lightColorScheme @@ -125,7 +126,7 @@ private val DarkColors = darkColorScheme( @Composable fun ComposeTvTheme( - useDarkTheme: Boolean = false, + useDarkTheme: Boolean = true, content: @Composable() () -> Unit ) { val colors = if (useDarkTheme) { @@ -136,6 +137,12 @@ fun ComposeTvTheme( MaterialTheme( colorScheme = colors, - content = content + typography = Typography, + shapes = Shapes, + content = { + CompositionLocalProvider { + content() + } + } ) } \ No newline at end of file From 95132a6486f5b077ee062632300767065cd9a17d Mon Sep 17 00:00:00 2001 From: Umair Date: Fri, 16 Jun 2023 12:50:09 +0200 Subject: [PATCH 15/20] Composition local content provider added --- .../techlads/composetv/features/home/leftmenu/MenuHeader.kt | 5 ++++- app/src/main/java/com/techlads/composetv/theme/Theme.kt | 3 ++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/app/src/main/java/com/techlads/composetv/features/home/leftmenu/MenuHeader.kt b/app/src/main/java/com/techlads/composetv/features/home/leftmenu/MenuHeader.kt index 931041e..f5ec810 100644 --- a/app/src/main/java/com/techlads/composetv/features/home/leftmenu/MenuHeader.kt +++ b/app/src/main/java/com/techlads/composetv/features/home/leftmenu/MenuHeader.kt @@ -15,6 +15,7 @@ import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import com.techlads.composetv.theme.ComposeTvTheme import compose.icons.LineAwesomeIcons import compose.icons.lineawesomeicons.TvSolid @@ -51,5 +52,7 @@ fun MenuHeader(expanded: Boolean = true) { @Preview @Composable fun MenuHeaderPrev() { - MenuHeader(true) + ComposeTvTheme { + MenuHeader() + } } \ No newline at end of file diff --git a/app/src/main/java/com/techlads/composetv/theme/Theme.kt b/app/src/main/java/com/techlads/composetv/theme/Theme.kt index a6a5bbb..98ed761 100644 --- a/app/src/main/java/com/techlads/composetv/theme/Theme.kt +++ b/app/src/main/java/com/techlads/composetv/theme/Theme.kt @@ -5,6 +5,7 @@ package com.techlads.composetv.theme import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.tv.material3.ExperimentalTvMaterial3Api +import androidx.tv.material3.LocalContentColor import androidx.tv.material3.MaterialTheme import androidx.tv.material3.lightColorScheme import androidx.tv.material3.darkColorScheme @@ -140,7 +141,7 @@ fun ComposeTvTheme( typography = Typography, shapes = Shapes, content = { - CompositionLocalProvider { + CompositionLocalProvider(LocalContentColor provides colors.onSurface) { content() } } From 0ec8791488c48145931e1bcbd2d4c8af5219ebe8 Mon Sep 17 00:00:00 2001 From: Umair Date: Fri, 16 Jun 2023 14:18:01 +0200 Subject: [PATCH 16/20] Fixed some basic login problems --- app/src/main/AndroidManifest.xml | 1 + .../com/techlads/composetv/MainActivity.kt | 1 - .../login/withEmailPassword/LoginScreen.kt | 18 ++++++++- .../withEmailPassword/LoginScreenContent.kt | 9 ++++- .../login/withEmailPassword/ScreenHeading.kt | 11 +----- .../login/withEmailPassword/TvTextField.kt | 37 ++----------------- .../com/techlads/composetv/theme/Theme.kt | 2 +- 7 files changed, 32 insertions(+), 47 deletions(-) diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml index 87aa9fe..4c676bc 100644 --- a/app/src/main/AndroidManifest.xml +++ b/app/src/main/AndroidManifest.xml @@ -21,6 +21,7 @@ android:name=".MainActivity" android:banner="@drawable/ic_app" android:exported="true" + android:windowSoftInputMode="adjustResize" android:icon="@drawable/ic_app" android:logo="@drawable/ic_app" android:screenOrientation="landscape"> diff --git a/app/src/main/java/com/techlads/composetv/MainActivity.kt b/app/src/main/java/com/techlads/composetv/MainActivity.kt index 2e9008c..dbd8d70 100644 --- a/app/src/main/java/com/techlads/composetv/MainActivity.kt +++ b/app/src/main/java/com/techlads/composetv/MainActivity.kt @@ -20,7 +20,6 @@ class MainActivity : ComponentActivity() { @OptIn(ExperimentalAnimationApi::class) override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) - val viewModel: HomeViewModel by viewModels() setContent { diff --git a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreen.kt b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreen.kt index 5cc5919..e85d39c 100644 --- a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreen.kt +++ b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreen.kt @@ -1,16 +1,23 @@ package com.techlads.composetv.features.login.withEmailPassword import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Devices +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.techlads.composetv.theme.ComposeTvTheme @Composable fun LoginScreen( modifier: Modifier = Modifier, goToHomeScreen: () -> Unit ) { - Box(modifier = modifier.fillMaxSize(), contentAlignment = Alignment.Center) { + Box(modifier = modifier + .fillMaxSize() + .padding(bottom = 68.dp), contentAlignment = Alignment.Center) { LoginPage { _, _ -> goToHomeScreen() } @@ -18,3 +25,12 @@ fun LoginScreen( } +@Preview(device = Devices.TV_1080p) +@Composable +fun LoginScreenPrev() { + ComposeTvTheme { + LoginScreen(Modifier.fillMaxSize()) { + + } + } +} diff --git a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreenContent.kt b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreenContent.kt index 054f109..ed584ad 100644 --- a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreenContent.kt +++ b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreenContent.kt @@ -11,12 +11,15 @@ import androidx.compose.ui.text.input.PasswordVisualTransformation import androidx.compose.ui.tooling.preview.Devices import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import com.techlads.composetv.theme.ComposeTvTheme + @Composable fun LoginPage( onLoginClick: (user: String, psw: String) -> Unit ) { Column( - modifier = Modifier.padding(20.dp).width(320.dp), + modifier = Modifier + .width(320.dp), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { @@ -47,7 +50,9 @@ fun LoginPage( @Preview(device = Devices.TV_1080p) @Composable fun LoginPagePrev() { - LoginPage { u, p -> + ComposeTvTheme { + LoginPage { u, p -> + } } } diff --git a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/ScreenHeading.kt b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/ScreenHeading.kt index a019c0b..b35a776 100644 --- a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/ScreenHeading.kt +++ b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/ScreenHeading.kt @@ -1,21 +1,14 @@ package com.techlads.composetv.features.login.withEmailPassword +import androidx.compose.material3.MaterialTheme import androidx.tv.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.text.font.FontFamily -import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.sp @Composable fun ScreenHeading(heading: String) { Text( - text = heading, style = TextStyle( - fontSize = 55.sp, - fontFamily = FontFamily.SansSerif, - fontWeight = FontWeight.Thin - ) + text = heading, style = MaterialTheme.typography.headlineLarge ) } diff --git a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/TvTextField.kt b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/TvTextField.kt index 3035134..26c794a 100644 --- a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/TvTextField.kt +++ b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/TvTextField.kt @@ -1,20 +1,12 @@ package com.techlads.composetv.features.login.withEmailPassword -import androidx.compose.foundation.focusable +import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.OutlinedTextField -import androidx.compose.material3.TextFieldDefaults import androidx.tv.material3.* import androidx.compose.runtime.Composable -import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember -import androidx.compose.ui.Modifier -import androidx.compose.ui.focus.onFocusChanged -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.text.font.FontFamily -import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.tooling.preview.Preview @@ -24,41 +16,20 @@ import androidx.compose.ui.tooling.preview.Preview fun TvTextField( value: String, label: String, + mutableInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() }, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardType: KeyboardType = KeyboardType.Text, onValueChange: (String) -> Unit ) { - val defaultColor = remember { - Color.White.copy(0.6F) - } - val selectedColor = remember { - Color.Blue - } - val selectionColor = remember { mutableStateOf(defaultColor) } OutlinedTextField( - textStyle = TextStyle( - fontFamily = FontFamily.SansSerif, - fontWeight = FontWeight.Thin - ), - colors = TextFieldDefaults.outlinedTextFieldColors( - unfocusedBorderColor = selectionColor.value, - unfocusedLabelColor = selectionColor.value - ), + textStyle = MaterialTheme.typography.bodyLarge, + interactionSource = mutableInteractionSource, label = { Text(text = label) }, value = value, visualTransformation = visualTransformation, keyboardOptions = KeyboardOptions(keyboardType = keyboardType), onValueChange = onValueChange, - modifier = Modifier - .onFocusChanged { state -> - selectionColor.value = if (state.isFocused) { - selectedColor - } else { - defaultColor - } - } - .focusable(true) ) } diff --git a/app/src/main/java/com/techlads/composetv/theme/Theme.kt b/app/src/main/java/com/techlads/composetv/theme/Theme.kt index 98ed761..4c8f124 100644 --- a/app/src/main/java/com/techlads/composetv/theme/Theme.kt +++ b/app/src/main/java/com/techlads/composetv/theme/Theme.kt @@ -128,7 +128,7 @@ private val DarkColors = darkColorScheme( @Composable fun ComposeTvTheme( useDarkTheme: Boolean = true, - content: @Composable() () -> Unit + content: @Composable () -> Unit ) { val colors = if (useDarkTheme) { DarkColors From 5fa9a20d47e09211f444c3353c5d8c9fc5cb6bda Mon Sep 17 00:00:00 2001 From: Umair Date: Fri, 16 Jun 2023 14:23:11 +0200 Subject: [PATCH 17/20] Fixed text issues in login screen --- .../features/login/withEmailPassword/TvTextField.kt | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/TvTextField.kt b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/TvTextField.kt index 26c794a..679ef42 100644 --- a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/TvTextField.kt +++ b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/TvTextField.kt @@ -1,9 +1,12 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.features.login.withEmailPassword import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.OutlinedTextField +import androidx.compose.material3.TextFieldDefaults import androidx.tv.material3.* import androidx.compose.runtime.Composable import androidx.compose.runtime.remember @@ -24,6 +27,10 @@ fun TvTextField( OutlinedTextField( textStyle = MaterialTheme.typography.bodyLarge, + colors = TextFieldDefaults.outlinedTextFieldColors( + focusedBorderColor = MaterialTheme.colorScheme.onSurface, + cursorColor = MaterialTheme.colorScheme.onSurface, + ), interactionSource = mutableInteractionSource, label = { Text(text = label) }, value = value, From 82ba928cd76d8e02f02c2beaf99dbcd74e519185 Mon Sep 17 00:00:00 2001 From: Umair Date: Fri, 16 Jun 2023 15:39:58 +0200 Subject: [PATCH 18/20] Button refactor done in profile screen --- .../features/details/ProductDetailsScreen.kt | 9 +-- .../DeviceTokenAuthenticationContent.kt | 61 ++++++++++--------- .../settings/screens/profile/ProfileScreen.kt | 24 ++++++-- .../composetv/navigation/AppNavigation.kt | 2 +- .../com/techlads/composetv/widgets/Button.kt | 26 -------- .../techlads/composetv/widgets/TvButton.kt | 41 +++++++++++++ 6 files changed, 100 insertions(+), 63 deletions(-) delete mode 100644 app/src/main/java/com/techlads/composetv/widgets/Button.kt create mode 100644 app/src/main/java/com/techlads/composetv/widgets/TvButton.kt diff --git a/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt b/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt index f8f1415..1ed5a6a 100644 --- a/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt +++ b/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt @@ -29,7 +29,7 @@ import androidx.tv.material3.MaterialTheme import androidx.tv.material3.Text import com.techlads.composetv.R import com.techlads.composetv.theme.ComposeTvTheme -import com.techlads.composetv.widgets.Button +import com.techlads.composetv.widgets.TvButton import com.techlads.composetv.widgets.ThumbnailImageCard import kotlinx.coroutines.delay @@ -135,12 +135,13 @@ fun ButtonSection(onPlayClick: () -> Unit) { ) { Spacer(modifier = Modifier.width(280.dp)) - Button( - text = "Play", + TvButton( modifier = Modifier .padding(horizontal = 16.dp, vertical = 4.dp) .focusRequester(focusRequester), onClick = onPlayClick - ) + ) { + Text("Play") + } Spacer(modifier = Modifier.size(16.dp)) Text( color = LocalContentColor.current, diff --git a/app/src/main/java/com/techlads/composetv/features/login/withToken/DeviceTokenAuthenticationContent.kt b/app/src/main/java/com/techlads/composetv/features/login/withToken/DeviceTokenAuthenticationContent.kt index 0354f7f..81b1532 100644 --- a/app/src/main/java/com/techlads/composetv/features/login/withToken/DeviceTokenAuthenticationContent.kt +++ b/app/src/main/java/com/techlads/composetv/features/login/withToken/DeviceTokenAuthenticationContent.kt @@ -1,18 +1,16 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.features.login.withToken import androidx.compose.foundation.Image -import androidx.compose.foundation.focusable import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.* -import androidx.compose.material3.Button -import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.Divider import androidx.tv.material3.* import androidx.compose.runtime.Composable import androidx.compose.runtime.remember 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.asImageBitmap import androidx.compose.ui.platform.LocalContext @@ -21,6 +19,7 @@ import androidx.compose.ui.text.SpanStyle import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import androidx.core.graphics.drawable.toBitmap @@ -49,8 +48,10 @@ fun DeviceTokenAuthenticationContent( val start = globalText.indexOf(url) val spanStyles = listOf( AnnotatedString.Range( - SpanStyle(fontFamily = FontFamily.SansSerif, - fontWeight = FontWeight.Normal), + SpanStyle( + fontFamily = FontFamily.SansSerif, + fontWeight = FontWeight.Normal + ), start = start, end = start + url.length ) @@ -141,28 +142,32 @@ fun DeviceTokenAuthenticationContent( .width(300.dp) .padding(40.dp, 0.dp, 40.dp, 0.dp) ) { - Button( - onClick = { onLoginClick(token) }, - shape = MaterialTheme.shapes.medium, - colors = ButtonDefaults.buttonColors(Color.White), - modifier = Modifier - .fillMaxWidth() - .height(50.dp) - .onFocusChanged { state -> - if (state.isFocused) { - println("login") - } - } - .focusable(true, interactionSource) - ) { - Text( - text = "WITH KEYBOARD", style = TextStyle( - color = Color.Black, - fontFamily = FontFamily.SansSerif, - fontWeight = FontWeight.Light - ) - ) + LoginButton(interactionSource = interactionSource) { + onLoginClick(token) } } } -} \ No newline at end of file +} + +@Composable +fun LoginButton( + modifier: Modifier = Modifier, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, + onClick: () -> Unit +) { + Button( + onClick = onClick, + interactionSource = interactionSource, + contentPadding = PaddingValues(16.dp), + modifier = modifier + ) { + Text( + modifier = Modifier.fillMaxWidth(), + text = "WITH KEYBOARD", style = TextStyle( + fontFamily = FontFamily.SansSerif, + fontWeight = FontWeight.Light, + textAlign = TextAlign.Center, + ) + ) + } +} diff --git a/app/src/main/java/com/techlads/composetv/features/settings/screens/profile/ProfileScreen.kt b/app/src/main/java/com/techlads/composetv/features/settings/screens/profile/ProfileScreen.kt index 9f2daa5..1f33277 100644 --- a/app/src/main/java/com/techlads/composetv/features/settings/screens/profile/ProfileScreen.kt +++ b/app/src/main/java/com/techlads/composetv/features/settings/screens/profile/ProfileScreen.kt @@ -1,3 +1,5 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.features.settings.screens.profile import androidx.compose.foundation.Image @@ -10,14 +12,16 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.shadow import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp +import androidx.tv.material3.ExperimentalTvMaterial3Api import androidx.tv.material3.LocalContentColor import androidx.tv.material3.MaterialTheme import androidx.tv.material3.Text import com.techlads.composetv.R import com.techlads.composetv.features.settings.data.SettingsMenuModel import com.techlads.composetv.features.settings.screens.PreferencesContainer -import com.techlads.composetv.widgets.Button +import com.techlads.composetv.widgets.TvButton @Composable fun ProfileScreen() { @@ -37,9 +41,21 @@ fun ProfilesContent() { Spacer(modifier = Modifier.size(5.dp)) Row { Spacer(modifier = Modifier.size(120.dp)) - Button(text = "Save") {} - Spacer(modifier = Modifier.size(8.dp)) - Button(text = "Cancel") {} + TvButton(onClick = {}, modifier = Modifier.width(120.dp)) { + Text( + text = "Save", + modifier = Modifier.fillMaxWidth(), + textAlign = TextAlign.Center + ) + } + Spacer(modifier = Modifier.size(16.dp)) + TvButton(onClick = {}, modifier = Modifier.width(120.dp)) { + Text( + text = "Cancel", + modifier = Modifier.fillMaxWidth(), + textAlign = TextAlign.Center + ) + } } } } diff --git a/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt b/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt index 8898487..6153c1e 100644 --- a/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt +++ b/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt @@ -20,7 +20,7 @@ import com.techlads.composetv.features.player.PlayerScreen @OptIn(ExperimentalAnimationApi::class) @Composable fun AppNavigation(navController: NavHostController, viewModel: HomeViewModel) { - AnimatedNavHost(navController = navController, startDestination = Screens.Login.title) { + AnimatedNavHost(navController = navController, startDestination = Screens.LoginToken.title) { // e.g will add auth routes here if when we will extend project composable( Screens.Login.title, diff --git a/app/src/main/java/com/techlads/composetv/widgets/Button.kt b/app/src/main/java/com/techlads/composetv/widgets/Button.kt deleted file mode 100644 index 393fa67..0000000 --- a/app/src/main/java/com/techlads/composetv/widgets/Button.kt +++ /dev/null @@ -1,26 +0,0 @@ -package com.techlads.composetv.widgets - -import androidx.compose.foundation.interaction.MutableInteractionSource -import androidx.compose.foundation.layout.padding -import androidx.compose.runtime.Composable -import androidx.compose.runtime.remember -import androidx.compose.ui.Modifier -import androidx.compose.ui.focus.FocusRequester -import androidx.compose.ui.unit.dp -import androidx.tv.material3.* - -@OptIn(ExperimentalTvMaterial3Api::class) -@Composable -fun Button( - modifier: Modifier = Modifier, - text: String, - onClick: () -> Unit -) { - Surface( - onClick = onClick, - modifier = modifier, - tonalElevation = 1.dp, - ) { - Text(text = text, Modifier.padding(horizontal = 12.dp, vertical = 4.dp)) - } -} \ No newline at end of file diff --git a/app/src/main/java/com/techlads/composetv/widgets/TvButton.kt b/app/src/main/java/com/techlads/composetv/widgets/TvButton.kt new file mode 100644 index 0000000..c3a5c25 --- /dev/null +++ b/app/src/main/java/com/techlads/composetv/widgets/TvButton.kt @@ -0,0 +1,41 @@ +package com.techlads.composetv.widgets + +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.RowScope +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import androidx.tv.material3.* + +@OptIn(ExperimentalTvMaterial3Api::class) +@Composable +fun TvButton( + onClick: () -> Unit, + modifier: Modifier = Modifier, + enabled: Boolean = true, + scale: ButtonScale = ButtonDefaults.scale(), + glow: ButtonGlow = ButtonDefaults.glow(), + shape: ButtonShape = ButtonDefaults.shape(), + colors: ButtonColors = ButtonDefaults.colors(), + tonalElevation: Dp = 0.dp, + border: ButtonBorder = ButtonDefaults.border(), + contentPadding: PaddingValues = ButtonDefaults.ContentPadding, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, + content: @Composable RowScope.() -> Unit +) { + Button(onClick = onClick, + modifier = modifier, + enabled = enabled, + scale = scale, + glow = glow, + shape = shape, + colors = colors, + tonalElevation = tonalElevation, + border = border, + contentPadding = contentPadding, + interactionSource = interactionSource, + content = content) +} \ No newline at end of file From 220713fa8cef7db338da427fdc8faf1fce0e0b89 Mon Sep 17 00:00:00 2001 From: Umair Date: Fri, 16 Jun 2023 15:48:54 +0200 Subject: [PATCH 19/20] More buttons refactored to Tv Button --- .../login/withEmailPassword/LoginButton.kt | 43 ------------------- .../withEmailPassword/LoginScreenContent.kt | 20 ++++++++- .../DeviceTokenAuthenticationContent.kt | 38 ++++++---------- 3 files changed, 31 insertions(+), 70 deletions(-) delete mode 100644 app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginButton.kt diff --git a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginButton.kt b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginButton.kt deleted file mode 100644 index 6b30250..0000000 --- a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginButton.kt +++ /dev/null @@ -1,43 +0,0 @@ -@file:OptIn(ExperimentalTvMaterial3Api::class) - -package com.techlads.composetv.features.login.withEmailPassword - -import androidx.compose.foundation.layout.* -import androidx.tv.material3.Text -import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier -import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.text.font.FontFamily -import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.text.style.TextAlign -import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp -import androidx.tv.material3.Button -import androidx.tv.material3.ExperimentalTvMaterial3Api - -@Composable -fun LoginButton(modifier: Modifier = Modifier, onClick: () -> Unit) { - Button( - onClick = onClick, - contentPadding = PaddingValues(16.dp), - modifier = modifier - ) { - Text( - modifier = Modifier.fillMaxWidth(), - text = "LOGIN", style = TextStyle( - fontFamily = FontFamily.SansSerif, - fontWeight = FontWeight.Light, - textAlign = TextAlign.Center, - ) - ) - } -} - - -@Preview -@Composable -fun LoginButtonPrev() { - LoginButton(Modifier.wrapContentSize()) { - - } -} \ No newline at end of file diff --git a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreenContent.kt b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreenContent.kt index ed584ad..551830f 100644 --- a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreenContent.kt +++ b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreenContent.kt @@ -1,3 +1,5 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.features.login.withEmailPassword import androidx.compose.foundation.layout.* @@ -6,12 +8,19 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.FontFamily +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.text.input.PasswordVisualTransformation +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Devices import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import androidx.tv.material3.ExperimentalTvMaterial3Api +import androidx.tv.material3.Text import com.techlads.composetv.theme.ComposeTvTheme +import com.techlads.composetv.widgets.TvButton @Composable fun LoginPage( @@ -41,8 +50,15 @@ fun LoginPage( ) { password.value = it } Spacer(modifier = Modifier.height(40.dp)) - LoginButton(modifier = Modifier.padding(start = 20.dp, end = 20.dp)) { - onLoginClick(username.value, password.value) + TvButton(modifier = Modifier.padding(start = 20.dp, end = 20.dp), onClick = {onLoginClick(username.value, password.value)}) { + Text( + modifier = Modifier.fillMaxWidth(), + text = "LOGIN", style = TextStyle( + fontFamily = FontFamily.SansSerif, + fontWeight = FontWeight.Light, + textAlign = TextAlign.Center, + ) + ) } } } diff --git a/app/src/main/java/com/techlads/composetv/features/login/withToken/DeviceTokenAuthenticationContent.kt b/app/src/main/java/com/techlads/composetv/features/login/withToken/DeviceTokenAuthenticationContent.kt index 81b1532..db7503c 100644 --- a/app/src/main/java/com/techlads/composetv/features/login/withToken/DeviceTokenAuthenticationContent.kt +++ b/app/src/main/java/com/techlads/composetv/features/login/withToken/DeviceTokenAuthenticationContent.kt @@ -27,6 +27,7 @@ import com.github.alexzhirkevich.customqrgenerator.QrData import com.github.alexzhirkevich.customqrgenerator.vector.QrCodeDrawable import com.github.alexzhirkevich.customqrgenerator.vector.QrVectorOptions import com.github.alexzhirkevich.customqrgenerator.vector.style.* +import com.techlads.composetv.widgets.TvButton @Composable fun DeviceTokenAuthenticationContent( @@ -142,32 +143,19 @@ fun DeviceTokenAuthenticationContent( .width(300.dp) .padding(40.dp, 0.dp, 40.dp, 0.dp) ) { - LoginButton(interactionSource = interactionSource) { - onLoginClick(token) + TvButton( + modifier = Modifier.padding(start = 20.dp, end = 20.dp), + interactionSource = interactionSource, + onClick = { onLoginClick(token) }) { + Text( + modifier = Modifier.fillMaxWidth(), + text = "Login with Email", style = TextStyle( + fontFamily = FontFamily.SansSerif, + fontWeight = FontWeight.Light, + textAlign = TextAlign.Center, + ) + ) } } } } - -@Composable -fun LoginButton( - modifier: Modifier = Modifier, - interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, - onClick: () -> Unit -) { - Button( - onClick = onClick, - interactionSource = interactionSource, - contentPadding = PaddingValues(16.dp), - modifier = modifier - ) { - Text( - modifier = Modifier.fillMaxWidth(), - text = "WITH KEYBOARD", style = TextStyle( - fontFamily = FontFamily.SansSerif, - fontWeight = FontWeight.Light, - textAlign = TextAlign.Center, - ) - ) - } -} From 616be0d970a87f5803fcc4acb10341392733f550 Mon Sep 17 00:00:00 2001 From: Umair Date: Fri, 16 Jun 2023 17:07:54 +0200 Subject: [PATCH 20/20] Exit dialog improved --- .../java/com/techlads/composetv/CustomDialogUI.kt | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/app/src/main/java/com/techlads/composetv/CustomDialogUI.kt b/app/src/main/java/com/techlads/composetv/CustomDialogUI.kt index 18d588b..1f600e1 100644 --- a/app/src/main/java/com/techlads/composetv/CustomDialogUI.kt +++ b/app/src/main/java/com/techlads/composetv/CustomDialogUI.kt @@ -8,7 +8,6 @@ import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource @@ -39,7 +38,7 @@ fun CustomDialogUI( shape = RoundedCornerShape(10.dp), modifier = Modifier.padding(10.dp, 5.dp, 10.dp, 10.dp), ) { - Column(modifier.background(Color.White)) { + Column(modifier.background(MaterialTheme.colorScheme.surface)) { //....................................................................... Image( @@ -81,16 +80,14 @@ fun CustomDialogUI( Modifier .fillMaxWidth() .padding(top = 10.dp) -// .background(Gray20.copy(0.2F)) - , + .background(MaterialTheme.colorScheme.background.copy(0.2F)), ) { TextButton(onClick = { openDialogCustom.value = false - }, modifier = Modifier.weight(1F)) { + }, modifier = Modifier.weight(1F), shape = RoundedCornerShape(0.dp)) { Text( "No", fontWeight = FontWeight.Bold, -// color = Gray700, modifier = Modifier.padding(top = 5.dp, bottom = 5.dp) ) } @@ -104,11 +101,10 @@ fun CustomDialogUI( TextButton(onClick = { openDialogCustom.value = false onExitClick() - }, modifier = Modifier.weight(1F)) { + }, modifier = Modifier.weight(1F), shape = RoundedCornerShape(0.dp)) { Text( "Yes", fontWeight = FontWeight.ExtraBold, - color = Color.Black, modifier = Modifier.padding(top = 5.dp, bottom = 5.dp) ) }