diff --git a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/common/AppBar.kt b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/common/AppBar.kt index 7ca100ee4..884dbee78 100644 --- a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/common/AppBar.kt +++ b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/common/AppBar.kt @@ -1,16 +1,19 @@ package co.nimblehq.sample.compose.ui.common import androidx.annotation.StringRes -import androidx.compose.material.Text -import androidx.compose.material.TopAppBar +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.Text +import androidx.compose.material3.TopAppBar +import androidx.compose.material3.TopAppBarDefaults import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import co.nimblehq.sample.compose.R -import co.nimblehq.sample.compose.ui.theme.AppTheme.colors +import co.nimblehq.sample.compose.ui.theme.AppTheme import co.nimblehq.sample.compose.ui.theme.ComposeTheme +@OptIn(ExperimentalMaterial3Api::class) @Composable fun AppBar( @StringRes title: Int, @@ -19,7 +22,9 @@ fun AppBar( TopAppBar( modifier = modifier, title = { Text(text = stringResource(title)) }, - backgroundColor = colors.topAppBarBackground + colors = TopAppBarDefaults.topAppBarColors().copy( + containerColor = AppTheme.colors.topAppBarBackground + ) ) } diff --git a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/HomeScreen.kt b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/HomeScreen.kt index 6f5689d74..24650185e 100644 --- a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/HomeScreen.kt +++ b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/HomeScreen.kt @@ -2,8 +2,8 @@ package co.nimblehq.sample.compose.ui.screens.main.home import android.Manifest.permission.* import androidx.compose.foundation.layout.* -import androidx.compose.material.CircularProgressIndicator -import androidx.compose.material.Scaffold +import androidx.compose.material3.CircularProgressIndicator +import androidx.compose.material3.Scaffold import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -22,7 +22,6 @@ import co.nimblehq.sample.compose.ui.models.UiModel import co.nimblehq.sample.compose.ui.showToast import co.nimblehq.sample.compose.ui.theme.ComposeTheme import com.google.accompanist.permissions.* -import kotlinx.coroutines.flow.* @Composable fun HomeScreen( diff --git a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/Item.kt b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/Item.kt index 03ac9ede4..a4d4d6fd1 100644 --- a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/Item.kt +++ b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/Item.kt @@ -2,7 +2,9 @@ package co.nimblehq.sample.compose.ui.screens.main.home import androidx.compose.foundation.* import androidx.compose.foundation.layout.* -import androidx.compose.material.* +import androidx.compose.material3.DropdownMenu +import androidx.compose.material3.DropdownMenuItem +import androidx.compose.material3.Text import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource @@ -49,9 +51,11 @@ fun Item( expanded = expanded, onDismissRequest = { expanded = false } ) { - DropdownMenuItem(onClick = { onLongClick(uiModel) }) { - Text(stringResource(id = R.string.third_edit_menu_title)) - } + DropdownMenuItem( + text = { Text(stringResource(id = R.string.third_edit_menu_title)) }, + onClick = { onLongClick(uiModel) } + ) + } } } diff --git a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/ItemList.kt b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/ItemList.kt index 54ead9ea1..18b4248f0 100644 --- a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/ItemList.kt +++ b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/ItemList.kt @@ -2,7 +2,7 @@ package co.nimblehq.sample.compose.ui.screens.main.home import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items -import androidx.compose.material.Divider +import androidx.compose.material3.HorizontalDivider import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview @@ -23,7 +23,7 @@ fun ItemList( onClick = onItemClick, onLongClick = onItemLongClick ) - Divider() + HorizontalDivider() } } } diff --git a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/second/SecondScreen.kt b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/second/SecondScreen.kt index 5fc0172d1..725268923 100644 --- a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/second/SecondScreen.kt +++ b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/second/SecondScreen.kt @@ -4,9 +4,9 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding -import androidx.compose.material.Button -import androidx.compose.material.Scaffold -import androidx.compose.material.Text +import androidx.compose.material3.Button +import androidx.compose.material3.Scaffold +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier diff --git a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/third/ThirdScreen.kt b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/third/ThirdScreen.kt index 6e47f5209..4776a9305 100644 --- a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/third/ThirdScreen.kt +++ b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/third/ThirdScreen.kt @@ -3,8 +3,8 @@ package co.nimblehq.sample.compose.ui.screens.main.third import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding -import androidx.compose.material.Scaffold -import androidx.compose.material.Text +import androidx.compose.material3.Scaffold +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier diff --git a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/AppColors.kt b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/AppColors.kt index b8823f2a9..9a4c35c80 100644 --- a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/AppColors.kt +++ b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/AppColors.kt @@ -1,6 +1,8 @@ package co.nimblehq.sample.compose.ui.theme -import androidx.compose.material.* +import androidx.compose.material3.ColorScheme +import androidx.compose.material3.darkColorScheme +import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.staticCompositionLocalOf import androidx.compose.ui.graphics.Color @@ -8,21 +10,22 @@ import androidx.compose.ui.graphics.Color internal val GreenCitrus = Color(0xFF99CC00) /** - * Expand the final [Colors] class to provide more custom app colors. + * Expand the final [ColorScheme] class to provide more custom app colors. */ -data class AppColors( - val themeColors: Colors, +abstract class AppColors( + var colorScheme: ColorScheme = LightColorPalette, // Custom colors here val topAppBarBackground: Color = GreenCitrus -) +) { + open val themeColors: ColorScheme + get() = colorScheme +} -internal val LightColorPalette = AppColors( - themeColors = lightColors() -) +internal val LightColorPalette: ColorScheme = lightColorScheme() -internal val DarkColorPalette = AppColors( - themeColors = darkColors() -) +internal val DarkColorPalette: ColorScheme = darkColorScheme() -internal val LocalAppColors = staticCompositionLocalOf { LightColorPalette } +internal object AppColorsImpl : AppColors() + +internal val LocalAppColors = staticCompositionLocalOf { AppColorsImpl } diff --git a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/AppShapes.kt b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/AppShapes.kt index d1391bf1f..2b32c0439 100644 --- a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/AppShapes.kt +++ b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/AppShapes.kt @@ -1,10 +1,15 @@ package co.nimblehq.sample.compose.ui.theme -import androidx.compose.material.Shapes +import androidx.compose.material3.Shapes import androidx.compose.runtime.staticCompositionLocalOf -private val Shapes = Shapes( - // Custom shapes here -) +interface AppShapes { + val themeShapes: Shapes + get() = Shapes( + // Custom shapes here + ) +} -internal val LocalAppShapes = staticCompositionLocalOf { Shapes } +object AppShapesImpl : AppShapes + +internal val LocalAppShapes = staticCompositionLocalOf { AppShapesImpl } diff --git a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/AppTypography.kt b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/AppTypography.kt index a94b72b53..dbcb68c47 100644 --- a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/AppTypography.kt +++ b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/AppTypography.kt @@ -1,10 +1,14 @@ package co.nimblehq.sample.compose.ui.theme -import androidx.compose.material.Typography +import androidx.compose.material3.Typography import androidx.compose.runtime.staticCompositionLocalOf -private val Typography = Typography( +interface AppTypography { // Custom typography here -) + val themeTypography: Typography + get() = Typography() +} -internal val LocalAppTypography = staticCompositionLocalOf { Typography } +object AppTypographyImpl : AppTypography + +internal val LocalAppTypography = staticCompositionLocalOf { AppTypographyImpl } diff --git a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/Theme.kt b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/Theme.kt index 6e55baabd..228b27c4b 100644 --- a/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/Theme.kt +++ b/sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/Theme.kt @@ -1,29 +1,39 @@ package co.nimblehq.sample.compose.ui.theme import androidx.compose.foundation.isSystemInDarkTheme -import androidx.compose.material.* +import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.* @Composable fun ComposeTheme( + colors: AppColors = LocalAppColors.current, + dimensions: AppDimensions = LocalAppDimensions.current, + shapes: AppShapes = LocalAppShapes.current, + styles: AppStyles = LocalAppStyles.current, + typography: AppTypography = LocalAppTypography.current, darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { - val colors = if (darkTheme) { + val colorScheme = if (darkTheme) { DarkColorPalette } else { LightColorPalette } - val typography = LocalAppTypography.current - val shapes = LocalAppShapes.current + colors.run { + this.colorScheme = colorScheme + } CompositionLocalProvider( - LocalAppColors provides colors + LocalAppColors provides colors, + LocalAppDimensions provides dimensions, + LocalAppShapes provides shapes, + LocalAppTypography provides typography, + LocalAppStyles provides styles, ) { MaterialTheme( - colors = colors.themeColors, - typography = typography, - shapes = shapes, + colorScheme = colors.themeColors, + shapes = shapes.themeShapes, + typography = typography.themeTypography, content = content ) } @@ -31,7 +41,7 @@ fun ComposeTheme( /** * Alternate to [MaterialTheme] allowing us to add our own theme systems - * or to extend [MaterialTheme]'s types e.g. return our own [Colors] extension. + * or to extend [MaterialTheme]'s types e.g. return our own [AppColors] extension. */ object AppTheme { @@ -40,12 +50,12 @@ object AppTheme { @ReadOnlyComposable get() = LocalAppColors.current - val typography: Typography + val typography: AppTypography @Composable @ReadOnlyComposable get() = LocalAppTypography.current - val shapes: Shapes + val shapes: AppShapes @Composable @ReadOnlyComposable get() = LocalAppShapes.current diff --git a/sample-compose/gradle/libs.versions.toml b/sample-compose/gradle/libs.versions.toml index 5eaf80239..3f34b5425 100644 --- a/sample-compose/gradle/libs.versions.toml +++ b/sample-compose/gradle/libs.versions.toml @@ -50,7 +50,7 @@ compose-ui = { group = "androidx.compose.ui", name = "ui" } compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" } compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" } compose-foundation = { group = "androidx.compose.foundation", name = "foundation" } -compose-material = { group = "androidx.compose.material", name = "material" } +compose-material3 = { group = "androidx.compose.material3", name = "material3" } compose-navigation = { group = "androidx.navigation", name = "navigation-compose", version.ref = "composeNavigation" } accompanist-permissions = { group = "com.google.accompanist", name = "accompanist-permissions", version.ref = "accompanist" } accompanist-systemUiController = { group = "com.google.accompanist", name = "accompanist-systemuicontroller", version.ref = "accompanist" } @@ -103,7 +103,7 @@ compose = [ "compose-ui", "compose-ui-tooling-preview", "compose-foundation", - "compose-material", + "compose-material3", "compose-navigation", ] hilt = [ diff --git a/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/screens/main/home/HomeScreen.kt b/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/screens/main/home/HomeScreen.kt index c45fe8e2a..a953e0220 100644 --- a/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/screens/main/home/HomeScreen.kt +++ b/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/screens/main/home/HomeScreen.kt @@ -5,7 +5,7 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding -import androidx.compose.material.Text +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.ui.Modifier diff --git a/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/AppColors.kt b/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/AppColors.kt index 1de05f5dc..983bfd66d 100644 --- a/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/AppColors.kt +++ b/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/AppColors.kt @@ -1,26 +1,30 @@ package co.nimblehq.template.compose.ui.theme -import androidx.compose.material.* +import androidx.compose.material3.ColorScheme +import androidx.compose.material3.darkColorScheme +import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.staticCompositionLocalOf // Base colors here // e.g. internal val GreenCitrus = Color(0xFF99CC00) /** - * Expand the final [Colors] class to provide more custom app colors. + * Expand the final [ColorScheme] class to provide more custom app colors. */ -data class AppColors( - val themeColors: Colors +abstract class AppColors( + var colorScheme: ColorScheme = LightColorPalette, // Custom colors here -) +) { + open val themeColors: ColorScheme + get() = colorScheme +} -internal val LightColorPalette = AppColors( - themeColors = lightColors() -) +internal val LightColorPalette: ColorScheme = lightColorScheme() -internal val DarkColorPalette = AppColors( - themeColors = darkColors() -) +internal val DarkColorPalette: ColorScheme = darkColorScheme() + +internal object AppColorsImpl : AppColors() + +internal val LocalAppColors = staticCompositionLocalOf { AppColorsImpl } -internal val LocalAppColors = staticCompositionLocalOf { LightColorPalette } diff --git a/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/AppShapes.kt b/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/AppShapes.kt index 819b72980..f1f649fa9 100644 --- a/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/AppShapes.kt +++ b/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/AppShapes.kt @@ -1,10 +1,15 @@ package co.nimblehq.template.compose.ui.theme -import androidx.compose.material.Shapes +import androidx.compose.material3.Shapes import androidx.compose.runtime.staticCompositionLocalOf -private val Shapes = Shapes( - // Custom shapes here -) +interface AppShapes { + val themeShapes: Shapes + get() = Shapes( + // Custom shapes here + ) +} -internal val LocalAppShapes = staticCompositionLocalOf { Shapes } +object AppShapesImpl : AppShapes + +internal val LocalAppShapes = staticCompositionLocalOf { AppShapesImpl } diff --git a/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/AppTypography.kt b/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/AppTypography.kt index 9b4b79149..5d66e92d8 100644 --- a/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/AppTypography.kt +++ b/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/AppTypography.kt @@ -1,10 +1,15 @@ package co.nimblehq.template.compose.ui.theme -import androidx.compose.material.Typography +import androidx.compose.material3.Typography import androidx.compose.runtime.staticCompositionLocalOf -private val Typography = Typography( +interface AppTypography { // Custom typography here -) + val themeTypography: Typography + get() = Typography() +} + +object AppTypographyImpl : AppTypography + +internal val LocalAppTypography = staticCompositionLocalOf { AppTypographyImpl } -internal val LocalAppTypography = staticCompositionLocalOf { Typography } diff --git a/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/Theme.kt b/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/Theme.kt index d82fd0954..21b01e040 100644 --- a/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/Theme.kt +++ b/template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/Theme.kt @@ -1,29 +1,39 @@ package co.nimblehq.template.compose.ui.theme import androidx.compose.foundation.isSystemInDarkTheme -import androidx.compose.material.* +import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.* @Composable fun ComposeTheme( + colors: AppColors = LocalAppColors.current, + dimensions: AppDimensions = LocalAppDimensions.current, + shapes: AppShapes = LocalAppShapes.current, + styles: AppStyles = LocalAppStyles.current, + typography: AppTypography = LocalAppTypography.current, darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { - val colors = if (darkTheme) { + val colorScheme = if (darkTheme) { DarkColorPalette } else { LightColorPalette } - val typography = LocalAppTypography.current - val shapes = LocalAppShapes.current + colors.run { + this.colorScheme = colorScheme + } CompositionLocalProvider( - LocalAppColors provides colors + LocalAppColors provides colors, + LocalAppDimensions provides dimensions, + LocalAppShapes provides shapes, + LocalAppTypography provides typography, + LocalAppStyles provides styles, ) { MaterialTheme( - colors = colors.themeColors, - typography = typography, - shapes = shapes, + colorScheme = colors.themeColors, + typography = typography.themeTypography, + shapes = shapes.themeShapes, content = content ) } @@ -31,7 +41,7 @@ fun ComposeTheme( /** * Alternate to [MaterialTheme] allowing us to add our own theme systems - * or to extend [MaterialTheme]'s types e.g. return our own [Colors] extension. + * or to extend [MaterialTheme]'s types e.g. return our own [AppColors] extension. */ object AppTheme { @@ -40,12 +50,12 @@ object AppTheme { @ReadOnlyComposable get() = LocalAppColors.current - val typography: Typography + val typography: AppTypography @Composable @ReadOnlyComposable get() = LocalAppTypography.current - val shapes: Shapes + val shapes: AppShapes @Composable @ReadOnlyComposable get() = LocalAppShapes.current diff --git a/template-compose/gradle/libs.versions.toml b/template-compose/gradle/libs.versions.toml index 7a31e305c..13fb434b1 100644 --- a/template-compose/gradle/libs.versions.toml +++ b/template-compose/gradle/libs.versions.toml @@ -48,7 +48,7 @@ compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = compose-ui = { group = "androidx.compose.ui", name = "ui" } compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" } compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" } -compose-material = { group = "androidx.compose.material", name = "material" } +compose-material3 = { group = "androidx.compose.material3", name = "material3" } compose-navigation = { group = "androidx.navigation", name = "navigation-compose", version.ref = "composeNavigation" } accompanist-permissions = { group = "com.google.accompanist", name = "accompanist-permissions", version.ref = "accompanist" } @@ -97,7 +97,7 @@ androidx = [ compose = [ "compose-ui", "compose-ui-tooling-preview", - "compose-material", + "compose-material3", "compose-navigation", ] hilt = [