From d2a2b3abe23f9d22d25854768eb1d8ff229b185c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Garci=CC=81a?= Date: Fri, 20 Dec 2024 12:21:02 +0100 Subject: [PATCH 1/2] replace material lib by material3 lib and enable edge to edge #ANDROID-15563 --- app/build.gradle | 2 +- .../telefonica/tweaks/demo/MainActivity.kt | 22 ++- .../com/telefonica/tweaks/demo/theme/Color.kt | 6 +- .../com/telefonica/tweaks/demo/theme/Theme.kt | 4 +- build.gradle | 1 + library/build.gradle | 2 +- .../telefonica/tweaks/ui/TweakComponents.kt | 128 ++++++++++-------- .../com/telefonica/tweaks/ui/theme/Type.kt | 60 ++++---- 8 files changed, 129 insertions(+), 96 deletions(-) diff --git a/app/build.gradle b/app/build.gradle index 546792b..a3f4007 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -61,7 +61,7 @@ dependencies { implementation 'com.google.android.material:material:1.11.0' implementation "androidx.compose.ui:ui:$compose_version" - implementation "androidx.compose.material:material:$compose_version" + implementation "androidx.compose.material3:material3:$compose_material3_version" implementation "androidx.compose.ui:ui-tooling-preview:$compose_version" implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.7.0' implementation 'androidx.activity:activity-compose:1.9.0' diff --git a/app/src/main/java/com/telefonica/tweaks/demo/MainActivity.kt b/app/src/main/java/com/telefonica/tweaks/demo/MainActivity.kt index f56197f..040fedb 100644 --- a/app/src/main/java/com/telefonica/tweaks/demo/MainActivity.kt +++ b/app/src/main/java/com/telefonica/tweaks/demo/MainActivity.kt @@ -2,15 +2,18 @@ package com.telefonica.tweaks.demo import android.os.Bundle import androidx.activity.ComponentActivity +import androidx.activity.SystemBarStyle import androidx.activity.compose.setContent +import androidx.activity.enableEdgeToEdge import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.consumeWindowInsets import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding -import androidx.compose.material.MaterialTheme -import androidx.compose.material.Scaffold -import androidx.compose.material.Surface -import androidx.compose.material.Text +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Scaffold +import androidx.compose.material3.Surface +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -19,24 +22,29 @@ import androidx.navigation.NavHostController import androidx.navigation.compose.NavHost import androidx.navigation.compose.composable import androidx.navigation.compose.rememberNavController -import com.telefonica.tweaks.demo.theme.DebugTweaksTheme import com.telefonica.tweaks.addTweakGraph +import com.telefonica.tweaks.demo.theme.DebugTweaksTheme import com.telefonica.tweaks.navigateToTweaksOnShake class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { + enableEdgeToEdge( + statusBarStyle = SystemBarStyle.dark(android.graphics.Color.TRANSPARENT), + navigationBarStyle = SystemBarStyle.dark(android.graphics.Color.TRANSPARENT) + ) + super.onCreate(savedInstanceState) setContent { DebugTweaksTheme { val navController = rememberNavController() navController.navigateToTweaksOnShake() - Surface(color = MaterialTheme.colors.background) { + Surface(color = MaterialTheme.colorScheme.background) { Scaffold { innerPadding -> DemoNavHost( navController = navController, - modifier = Modifier.padding(innerPadding), + modifier = Modifier.consumeWindowInsets(innerPadding), initialScreen = "tweaks", ) } diff --git a/app/src/main/java/com/telefonica/tweaks/demo/theme/Color.kt b/app/src/main/java/com/telefonica/tweaks/demo/theme/Color.kt index 8c7600e..4a67e83 100644 --- a/app/src/main/java/com/telefonica/tweaks/demo/theme/Color.kt +++ b/app/src/main/java/com/telefonica/tweaks/demo/theme/Color.kt @@ -1,11 +1,11 @@ package com.telefonica.tweaks.demo.theme -import androidx.compose.material.darkColors import androidx.compose.ui.graphics.Color +import androidx.compose.material3.darkColorScheme -val TweaksColorPalette = darkColors( +val TweaksColorPalette = darkColorScheme( primary = Color.Blue, - primaryVariant = Color.Blue, + inversePrimary = Color.Blue, surface = Color.Black, onSurface = Color.Black, background = Color.Black, diff --git a/app/src/main/java/com/telefonica/tweaks/demo/theme/Theme.kt b/app/src/main/java/com/telefonica/tweaks/demo/theme/Theme.kt index 560be11..c591fd1 100644 --- a/app/src/main/java/com/telefonica/tweaks/demo/theme/Theme.kt +++ b/app/src/main/java/com/telefonica/tweaks/demo/theme/Theme.kt @@ -1,6 +1,6 @@ package com.telefonica.tweaks.demo.theme -import androidx.compose.material.MaterialTheme +import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import com.telefonica.tweaks.ui.theme.TweaksTypography @@ -8,5 +8,5 @@ import com.telefonica.tweaks.ui.theme.TweaksTypography fun DebugTweaksTheme( content: @Composable () -> Unit ) { - MaterialTheme(colors = TweaksColorPalette, typography = TweaksTypography, content = content) + MaterialTheme(colorScheme = TweaksColorPalette, typography = TweaksTypography, content = content) } \ No newline at end of file diff --git a/build.gradle b/build.gradle index 532b45b..85bd8cb 100644 --- a/build.gradle +++ b/build.gradle @@ -3,6 +3,7 @@ buildscript { ext { compose_compiler_version = '1.5.12' compose_version = '1.6.6' + compose_material3_version = '1.3.1' kotlin_version = '1.9.23' dagger_version = "2.51.1" diff --git a/library/build.gradle b/library/build.gradle index b9d503b..6729450 100644 --- a/library/build.gradle +++ b/library/build.gradle @@ -57,7 +57,7 @@ dependencies { enabledImplementation 'androidx.appcompat:appcompat:1.6.1' enabledImplementation 'com.google.android.material:material:1.11.0' - enabledImplementation "androidx.compose.material:material:$compose_version" + enabledImplementation "androidx.compose.material3:material3:$compose_material3_version" enabledImplementation "androidx.compose.ui:ui-tooling-preview:$compose_version" enabledImplementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.7.0' enabledImplementation 'androidx.activity:activity-compose:1.9.0' diff --git a/library/src/enabled/java/com/telefonica/tweaks/ui/TweakComponents.kt b/library/src/enabled/java/com/telefonica/tweaks/ui/TweakComponents.kt index 6762015..972d110 100644 --- a/library/src/enabled/java/com/telefonica/tweaks/ui/TweakComponents.kt +++ b/library/src/enabled/java/com/telefonica/tweaks/ui/TweakComponents.kt @@ -9,38 +9,41 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ColumnScope import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.navigationBars import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.statusBars +import androidx.compose.foundation.layout.windowInsetsBottomHeight +import androidx.compose.foundation.layout.windowInsetsTopHeight import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.text.KeyboardActions import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.foundation.verticalScroll -import androidx.compose.material.Button -import androidx.compose.material.ButtonColors -import androidx.compose.material.ButtonDefaults.buttonColors -import androidx.compose.material.Card -import androidx.compose.material.Checkbox -import androidx.compose.material.CheckboxColors -import androidx.compose.material.CheckboxDefaults -import androidx.compose.material.ContentAlpha -import androidx.compose.material.Divider -import androidx.compose.material.DropdownMenu -import androidx.compose.material.DropdownMenuItem -import androidx.compose.material.ExperimentalMaterialApi -import androidx.compose.material.Icon -import androidx.compose.material.IconButton -import androidx.compose.material.LocalMinimumInteractiveComponentEnforcement -import androidx.compose.material.MaterialTheme -import androidx.compose.material.Text -import androidx.compose.material.TextField -import androidx.compose.material.TextFieldColors -import androidx.compose.material.TextFieldDefaults -import androidx.compose.material.contentColorFor import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Delete +import androidx.compose.material3.Button +import androidx.compose.material3.ButtonColors +import androidx.compose.material3.ButtonDefaults +import androidx.compose.material3.Card +import androidx.compose.material3.CardDefaults.cardElevation +import androidx.compose.material3.Checkbox +import androidx.compose.material3.CheckboxColors +import androidx.compose.material3.CheckboxDefaults +import androidx.compose.material3.DropdownMenu +import androidx.compose.material3.DropdownMenuItem +import androidx.compose.material3.HorizontalDivider +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text +import androidx.compose.material3.TextField +import androidx.compose.material3.TextFieldColors +import androidx.compose.material3.TextFieldDefaults +import androidx.compose.material3.contentColorFor import androidx.compose.runtime.Composable -import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue @@ -100,6 +103,8 @@ fun TweaksScreen( verticalArrangement = Arrangement.spacedBy(8.dp), horizontalAlignment = Alignment.CenterHorizontally, ) { + Spacer(modifier = Modifier.windowInsetsTopHeight(WindowInsets.statusBars)) + tweaksGraph.cover?.let { TweakGroupBody( tweakGroup = it, @@ -113,6 +118,8 @@ fun TweaksScreen( text = category.title, ) } + + Spacer(modifier = Modifier.windowInsetsBottomHeight(WindowInsets.navigationBars)) } } @@ -132,9 +139,12 @@ fun TweaksCategoryScreen( verticalArrangement = Arrangement.spacedBy(8.dp), horizontalAlignment = Alignment.CenterHorizontally, ) { + Spacer(modifier = Modifier.windowInsetsTopHeight(WindowInsets.statusBars)) + Text( - tweakCategory.title, - style = MaterialTheme.typography.h4, + modifier = Modifier.padding(top = 16.dp), + text = tweakCategory.title, + style = MaterialTheme.typography.headlineLarge, color = TweaksTheme.colors.tweaksOnBackground, ) @@ -145,6 +155,8 @@ fun TweaksCategoryScreen( onCustomNavigation = onCustomNavigation ) } + + Spacer(modifier = Modifier.windowInsetsBottomHeight(WindowInsets.navigationBars)) } } @@ -156,7 +168,8 @@ fun TweakGroupBody( onCustomNavigation: ((NavController) -> Unit) -> Unit, ) { Card( - elevation = 3.dp + modifier = Modifier.padding(vertical = 16.dp), + elevation = cardElevation(3.dp), ) { Column( modifier = Modifier @@ -166,10 +179,10 @@ fun TweakGroupBody( ) { Text( tweakGroup.title, - style = MaterialTheme.typography.h5, + style = MaterialTheme.typography.headlineMedium, color = TweaksTheme.colors.tweaksOnBackground, ) - Divider(thickness = 2.dp) + HorizontalDivider(thickness = 2.dp) tweakGroup.entries.iterator().forEach { entry -> when (entry) { is EditableStringTweakEntry -> EditableStringTweakEntryBody( @@ -208,7 +221,7 @@ fun TweakGroupBody( } if (tweakGroup.entries.any { it is Editable<*> } && tweakGroup.withClearButton) { - Divider(thickness = 2.dp) + HorizontalDivider(thickness = 2.dp) ResetButton(onResetClicked = { tweakGroupViewModel.reset(tweakGroup) }) } } @@ -304,7 +317,6 @@ fun EditableStringTweakEntryBody( ) } -@OptIn(ExperimentalMaterialApi::class) @Composable fun EditableBooleanTweakEntryBody( tweakRowViewModel: EditableTweakEntryViewModel, @@ -322,15 +334,15 @@ fun EditableBooleanTweakEntryBody( }, shouldShowOverriddenLabel = isOverridden ) { - CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) { - Checkbox( - checked = tweakRowViewModel.value ?: false, - onCheckedChange = { - tweakRowViewModel.updateValue(it) - }, - colors = tweaksCheckboxColors(), - ) - } + Checkbox( + modifier = Modifier.size(48.dp), + checked = tweakRowViewModel.value ?: false, + onCheckedChange = { + tweakRowViewModel.updateValue(it) + }, + colors = tweaksCheckboxColors(), + ) + } } @@ -412,16 +424,18 @@ fun DropDownMenuTweakEntryBody( ) { items.forEachIndexed { index, value -> DropdownMenuItem( + text = { + Text( + text = value, + color = TweaksTheme.colors.tweaksOnSurface + ) + }, onClick = { - selectedIndex = index - expanded = false - tweakRowViewModel.updateValue(items[selectedIndex]) - }) { - Text( - text = value, - color = TweaksTheme.colors.tweaksOnSurface - ) - } + selectedIndex = index + expanded = false + tweakRowViewModel.updateValue(items[selectedIndex]) + } + ) } } } @@ -530,7 +544,7 @@ private fun TweakNameText( ) { Text( text = entry.name, - style = MaterialTheme.typography.h6, + style = MaterialTheme.typography.headlineSmall, color = TweaksTheme.colors.tweaksOnBackground, fontWeight = FontWeight.Bold, modifier = Modifier.weight(1f, false) @@ -538,7 +552,7 @@ private fun TweakNameText( if (shouldShowOverriddenLabel) { Text( " (Modified)", - style = MaterialTheme.typography.caption, + style = MaterialTheme.typography.labelMedium, color = TweaksTheme.colors.tweaksColorModified, ) } @@ -546,13 +560,13 @@ private fun TweakNameText( } @Composable -private fun tweaksButtonColors(): ButtonColors = buttonColors( - backgroundColor = TweaksTheme.colors.tweaksPrimary, +private fun tweaksButtonColors(): ButtonColors = ButtonDefaults.buttonColors( + containerColor = TweaksTheme.colors.tweaksPrimary, contentColor = contentColorFor(backgroundColor = TweaksTheme.colors.tweaksBackground), - disabledBackgroundColor = TweaksTheme.colors.tweaksOnSurface.copy(alpha = 0.12f) + disabledContainerColor = TweaksTheme.colors.tweaksOnSurface.copy(alpha = 0.12f) + .compositeOver(TweaksTheme.colors.tweaksSurface), + disabledContentColor = TweaksTheme.colors.tweaksOnSurface.copy(alpha = 0.38f) .compositeOver(TweaksTheme.colors.tweaksSurface), - disabledContentColor = TweaksTheme.colors.tweaksOnSurface - .copy(alpha = ContentAlpha.disabled), ) @Composable @@ -564,15 +578,15 @@ private fun tweaksCheckboxColors(): CheckboxColors = CheckboxDefaults.colors( @Composable private fun tweaksTextFieldColors(): TextFieldColors = - TextFieldDefaults.textFieldColors( - textColor = TweaksTheme.colors.tweaksOnBackground, + TextFieldDefaults.colors( + focusedTextColor = TweaksTheme.colors.tweaksOnBackground, disabledTextColor = TweaksTheme.colors.tweaksOnBackground.copy(alpha = 0.8F), cursorColor = TweaksTheme.colors.tweaksPrimary, focusedLabelColor = TweaksTheme.colors.tweaksPrimary, focusedIndicatorColor = TweaksTheme.colors.tweaksPrimary, unfocusedIndicatorColor = TweaksTheme.colors.tweaksPrimary, unfocusedLabelColor = TweaksTheme.colors.tweaksPrimary, - disabledLabelColor = TweaksTheme.colors.tweaksPrimary, + disabledLabelColor = TweaksTheme.colors.tweaksPrimary ) @Composable diff --git a/library/src/enabled/java/com/telefonica/tweaks/ui/theme/Type.kt b/library/src/enabled/java/com/telefonica/tweaks/ui/theme/Type.kt index d8af6a8..b2e1c3c 100644 --- a/library/src/enabled/java/com/telefonica/tweaks/ui/theme/Type.kt +++ b/library/src/enabled/java/com/telefonica/tweaks/ui/theme/Type.kt @@ -1,6 +1,6 @@ package com.telefonica.tweaks.ui.theme -import androidx.compose.material.Typography +import androidx.compose.material3.Typography import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.Font import androidx.compose.ui.text.font.FontFamily @@ -21,70 +21,80 @@ private val RobotoCondensed = FontFamily( ) val TweaksTypography = Typography( - defaultFontFamily = RobotoCondensed, - h1 = TextStyle( + displayLarge = TextStyle( fontWeight = FontWeight.W100, fontSize = 96.sp, + fontFamily = RobotoCondensed ), - h2 = TextStyle( + displayMedium = TextStyle( fontWeight = FontWeight.SemiBold, fontSize = 44.sp, fontFamily = EczarFontFamily, letterSpacing = 1.5.sp ), - h3 = TextStyle( + displaySmall = TextStyle( fontWeight = FontWeight.W400, - fontSize = 14.sp + fontSize = 14.sp, + fontFamily = RobotoCondensed ), - h4 = TextStyle( + headlineLarge = TextStyle( fontWeight = FontWeight.W700, - fontSize = 34.sp + fontSize = 34.sp, + fontFamily = RobotoCondensed ), - h5 = TextStyle( + headlineMedium = TextStyle( fontWeight = FontWeight.W700, - fontSize = 24.sp + fontSize = 24.sp, + fontFamily = RobotoCondensed ), - h6 = TextStyle( + headlineSmall = TextStyle( fontWeight = FontWeight.Normal, fontSize = 18.sp, lineHeight = 20.sp, fontFamily = EczarFontFamily, letterSpacing = 3.sp ), - subtitle1 = TextStyle( + titleLarge = TextStyle( fontWeight = FontWeight.Light, fontSize = 14.sp, lineHeight = 20.sp, - letterSpacing = 3.sp + letterSpacing = 3.sp, + fontFamily = RobotoCondensed ), - subtitle2 = TextStyle( + titleMedium = TextStyle( fontWeight = FontWeight.Normal, fontSize = 14.sp, - letterSpacing = 0.1.em + letterSpacing = 0.1.em, + fontFamily = RobotoCondensed ), - body1 = TextStyle( + bodyLarge = TextStyle( fontWeight = FontWeight.Normal, fontSize = 16.sp, - letterSpacing = 0.1.em + letterSpacing = 0.1.em, + fontFamily = RobotoCondensed ), - body2 = TextStyle( + bodyMedium = TextStyle( fontWeight = FontWeight.Normal, fontSize = 14.sp, lineHeight = 20.sp, - letterSpacing = 0.1.em + letterSpacing = 0.1.em, + fontFamily = RobotoCondensed ), - button = TextStyle( + labelLarge = TextStyle( fontWeight = FontWeight.Bold, fontSize = 14.sp, lineHeight = 16.sp, - letterSpacing = 0.2.em + letterSpacing = 0.2.em, + fontFamily = RobotoCondensed ), - caption = TextStyle( + labelMedium = TextStyle( fontWeight = FontWeight.W500, - fontSize = 12.sp + fontSize = 12.sp, + fontFamily = RobotoCondensed ), - overline = TextStyle( + labelSmall = TextStyle( fontWeight = FontWeight.W500, - fontSize = 10.sp + fontSize = 10.sp, + fontFamily = RobotoCondensed ) ) \ No newline at end of file From f83c895f9400e98450deb7c9b3d1eadb3fcfb3b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Garci=CC=81a?= Date: Fri, 20 Dec 2024 14:17:39 +0100 Subject: [PATCH 2/2] fix edge to edge #ANDROID-15563 --- .../com/telefonica/tweaks/demo/MainActivity.kt | 14 ++++---------- .../com/telefonica/tweaks/ui/TweakComponents.kt | 11 +++-------- 2 files changed, 7 insertions(+), 18 deletions(-) diff --git a/app/src/main/java/com/telefonica/tweaks/demo/MainActivity.kt b/app/src/main/java/com/telefonica/tweaks/demo/MainActivity.kt index 040fedb..8e14cef 100644 --- a/app/src/main/java/com/telefonica/tweaks/demo/MainActivity.kt +++ b/app/src/main/java/com/telefonica/tweaks/demo/MainActivity.kt @@ -7,11 +7,9 @@ import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.consumeWindowInsets import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Scaffold import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -41,14 +39,10 @@ class MainActivity : ComponentActivity() { val navController = rememberNavController() navController.navigateToTweaksOnShake() Surface(color = MaterialTheme.colorScheme.background) { - Scaffold { innerPadding -> - DemoNavHost( - navController = navController, - modifier = Modifier.consumeWindowInsets(innerPadding), - initialScreen = "tweaks", - ) - } - + DemoNavHost( + navController = navController, + initialScreen = "tweaks", + ) } } } diff --git a/library/src/enabled/java/com/telefonica/tweaks/ui/TweakComponents.kt b/library/src/enabled/java/com/telefonica/tweaks/ui/TweakComponents.kt index 972d110..6550df1 100644 --- a/library/src/enabled/java/com/telefonica/tweaks/ui/TweakComponents.kt +++ b/library/src/enabled/java/com/telefonica/tweaks/ui/TweakComponents.kt @@ -98,7 +98,7 @@ fun TweaksScreen( modifier = Modifier .fillMaxSize() .background(TweaksTheme.colors.tweaksBackground) - .padding(16.dp) + .padding(horizontal = 16.dp) .verticalScroll(scrollState), verticalArrangement = Arrangement.spacedBy(8.dp), horizontalAlignment = Alignment.CenterHorizontally, @@ -118,7 +118,6 @@ fun TweaksScreen( text = category.title, ) } - Spacer(modifier = Modifier.windowInsetsBottomHeight(WindowInsets.navigationBars)) } } @@ -134,7 +133,7 @@ fun TweaksCategoryScreen( modifier = Modifier .fillMaxSize() .background(TweaksTheme.colors.tweaksBackground) - .padding(16.dp) + .padding(horizontal = 16.dp) .verticalScroll(scrollState), verticalArrangement = Arrangement.spacedBy(8.dp), horizontalAlignment = Alignment.CenterHorizontally, @@ -142,7 +141,6 @@ fun TweaksCategoryScreen( Spacer(modifier = Modifier.windowInsetsTopHeight(WindowInsets.statusBars)) Text( - modifier = Modifier.padding(top = 16.dp), text = tweakCategory.title, style = MaterialTheme.typography.headlineLarge, color = TweaksTheme.colors.tweaksOnBackground, @@ -167,10 +165,7 @@ fun TweakGroupBody( onNavigationEvent: (String) -> Unit, onCustomNavigation: ((NavController) -> Unit) -> Unit, ) { - Card( - modifier = Modifier.padding(vertical = 16.dp), - elevation = cardElevation(3.dp), - ) { + Card(elevation = cardElevation(3.dp)) { Column( modifier = Modifier .background(TweaksTheme.colors.tweaksGroupBackground)