Skip to content

Commit e4bc1db

Browse files
kaungkhantsoekaungkhantsoe
committed
[#603] Refactor to use Material3
1 parent 7254956 commit e4bc1db

File tree

17 files changed

+141
-87
lines changed

17 files changed

+141
-87
lines changed

‎sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/common/AppBar.kt

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
package co.nimblehq.sample.compose.ui.common
22

33
import androidx.annotation.StringRes
4-
import androidx.compose.material.Text
5-
import androidx.compose.material.TopAppBar
4+
import androidx.compose.material3.ExperimentalMaterial3Api
5+
import androidx.compose.material3.Text
6+
import androidx.compose.material3.TopAppBar
7+
import androidx.compose.material3.TopAppBarDefaults
68
import androidx.compose.runtime.Composable
79
import androidx.compose.ui.Modifier
810
import androidx.compose.ui.res.stringResource
911
import androidx.compose.ui.tooling.preview.Preview
1012
import co.nimblehq.sample.compose.R
11-
import co.nimblehq.sample.compose.ui.theme.AppTheme.colors
13+
import co.nimblehq.sample.compose.ui.theme.AppTheme
1214
import co.nimblehq.sample.compose.ui.theme.ComposeTheme
1315

16+
@OptIn(ExperimentalMaterial3Api::class)
1417
@Composable
1518
fun AppBar(
1619
@StringRes title: Int,
@@ -19,7 +22,9 @@ fun AppBar(
1922
TopAppBar(
2023
modifier = modifier,
2124
title = { Text(text = stringResource(title)) },
22-
backgroundColor = colors.topAppBarBackground
25+
colors = TopAppBarDefaults.topAppBarColors().copy(
26+
containerColor = AppTheme.colors.topAppBarBackground
27+
)
2328
)
2429
}
2530

‎sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/HomeScreen.kt

+2-3
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ package co.nimblehq.sample.compose.ui.screens.main.home
22

33
import android.Manifest.permission.*
44
import androidx.compose.foundation.layout.*
5-
import androidx.compose.material.CircularProgressIndicator
6-
import androidx.compose.material.Scaffold
5+
import androidx.compose.material3.CircularProgressIndicator
6+
import androidx.compose.material3.Scaffold
77
import androidx.compose.runtime.*
88
import androidx.compose.ui.Alignment
99
import androidx.compose.ui.Modifier
@@ -22,7 +22,6 @@ import co.nimblehq.sample.compose.ui.models.UiModel
2222
import co.nimblehq.sample.compose.ui.showToast
2323
import co.nimblehq.sample.compose.ui.theme.ComposeTheme
2424
import com.google.accompanist.permissions.*
25-
import kotlinx.coroutines.flow.*
2625

2726
@Composable
2827
fun HomeScreen(

‎sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/Item.kt

+8-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ package co.nimblehq.sample.compose.ui.screens.main.home
22

33
import androidx.compose.foundation.*
44
import androidx.compose.foundation.layout.*
5-
import androidx.compose.material.*
5+
import androidx.compose.material3.DropdownMenu
6+
import androidx.compose.material3.DropdownMenuItem
7+
import androidx.compose.material3.Text
68
import androidx.compose.runtime.*
79
import androidx.compose.ui.Modifier
810
import androidx.compose.ui.res.stringResource
@@ -49,9 +51,11 @@ fun Item(
4951
expanded = expanded,
5052
onDismissRequest = { expanded = false }
5153
) {
52-
DropdownMenuItem(onClick = { onLongClick(uiModel) }) {
53-
Text(stringResource(id = R.string.third_edit_menu_title))
54-
}
54+
DropdownMenuItem(
55+
text = { Text(stringResource(id = R.string.third_edit_menu_title)) },
56+
onClick = { onLongClick(uiModel) }
57+
)
58+
5559
}
5660
}
5761
}

‎sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/ItemList.kt

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ package co.nimblehq.sample.compose.ui.screens.main.home
22

33
import androidx.compose.foundation.lazy.LazyColumn
44
import androidx.compose.foundation.lazy.items
5-
import androidx.compose.material.Divider
5+
import androidx.compose.material3.HorizontalDivider
66
import androidx.compose.runtime.Composable
77
import androidx.compose.ui.Modifier
88
import androidx.compose.ui.tooling.preview.Preview
@@ -23,7 +23,7 @@ fun ItemList(
2323
onClick = onItemClick,
2424
onLongClick = onItemLongClick
2525
)
26-
Divider()
26+
HorizontalDivider()
2727
}
2828
}
2929
}

‎sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/second/SecondScreen.kt

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import androidx.compose.foundation.layout.Box
44
import androidx.compose.foundation.layout.Column
55
import androidx.compose.foundation.layout.fillMaxSize
66
import androidx.compose.foundation.layout.padding
7-
import androidx.compose.material.Button
8-
import androidx.compose.material.Scaffold
9-
import androidx.compose.material.Text
7+
import androidx.compose.material3.Button
8+
import androidx.compose.material3.Scaffold
9+
import androidx.compose.material3.Text
1010
import androidx.compose.runtime.Composable
1111
import androidx.compose.ui.Alignment
1212
import androidx.compose.ui.Modifier

‎sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/third/ThirdScreen.kt

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ package co.nimblehq.sample.compose.ui.screens.main.third
33
import androidx.compose.foundation.layout.Box
44
import androidx.compose.foundation.layout.fillMaxSize
55
import androidx.compose.foundation.layout.padding
6-
import androidx.compose.material.Scaffold
7-
import androidx.compose.material.Text
6+
import androidx.compose.material3.Scaffold
7+
import androidx.compose.material3.Text
88
import androidx.compose.runtime.Composable
99
import androidx.compose.ui.Alignment
1010
import androidx.compose.ui.Modifier

‎sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/AppColors.kt

+15-12
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,31 @@
11
package co.nimblehq.sample.compose.ui.theme
22

3-
import androidx.compose.material.*
3+
import androidx.compose.material3.ColorScheme
4+
import androidx.compose.material3.darkColorScheme
5+
import androidx.compose.material3.lightColorScheme
46
import androidx.compose.runtime.staticCompositionLocalOf
57
import androidx.compose.ui.graphics.Color
68

79
// Base colors here
810
internal val GreenCitrus = Color(0xFF99CC00)
911

1012
/**
11-
* Expand the final [Colors] class to provide more custom app colors.
13+
* Expand the final [ColorScheme] class to provide more custom app colors.
1214
*/
13-
data class AppColors(
14-
val themeColors: Colors,
15+
abstract class AppColors(
16+
var colorScheme: ColorScheme = LightColorPalette,
1517

1618
// Custom colors here
1719
val topAppBarBackground: Color = GreenCitrus
18-
)
20+
) {
21+
open val themeColors: ColorScheme
22+
get() = colorScheme
23+
}
1924

20-
internal val LightColorPalette = AppColors(
21-
themeColors = lightColors()
22-
)
25+
internal val LightColorPalette: ColorScheme = lightColorScheme()
2326

24-
internal val DarkColorPalette = AppColors(
25-
themeColors = darkColors()
26-
)
27+
internal val DarkColorPalette: ColorScheme = darkColorScheme()
2728

28-
internal val LocalAppColors = staticCompositionLocalOf { LightColorPalette }
29+
internal object AppColorsImpl : AppColors()
30+
31+
internal val LocalAppColors = staticCompositionLocalOf<AppColors> { AppColorsImpl }

‎sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/AppShapes.kt

+10-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
package co.nimblehq.sample.compose.ui.theme
22

3-
import androidx.compose.material.Shapes
3+
import androidx.compose.material3.Shapes
44
import androidx.compose.runtime.staticCompositionLocalOf
55

6-
private val Shapes = Shapes(
7-
// Custom shapes here
8-
)
6+
interface AppShapes {
7+
val themeShapes: Shapes
8+
get() = Shapes(
9+
// Custom shapes here
10+
)
11+
}
912

10-
internal val LocalAppShapes = staticCompositionLocalOf { Shapes }
13+
object AppShapesImpl : AppShapes
14+
15+
internal val LocalAppShapes = staticCompositionLocalOf<AppShapes> { AppShapesImpl }

‎sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/AppTypography.kt

+8-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
package co.nimblehq.sample.compose.ui.theme
22

3-
import androidx.compose.material.Typography
3+
import androidx.compose.material3.Typography
44
import androidx.compose.runtime.staticCompositionLocalOf
55

6-
private val Typography = Typography(
6+
interface AppTypography {
77
// Custom typography here
8-
)
8+
val themeTypography: Typography
9+
get() = Typography()
10+
}
911

10-
internal val LocalAppTypography = staticCompositionLocalOf { Typography }
12+
object AppTypographyImpl : AppTypography
13+
14+
internal val LocalAppTypography = staticCompositionLocalOf<AppTypography> { AppTypographyImpl }

‎sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/theme/Theme.kt

+21-11
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,47 @@
11
package co.nimblehq.sample.compose.ui.theme
22

33
import androidx.compose.foundation.isSystemInDarkTheme
4-
import androidx.compose.material.*
4+
import androidx.compose.material3.MaterialTheme
55
import androidx.compose.runtime.*
66

77
@Composable
88
fun ComposeTheme(
9+
colors: AppColors = LocalAppColors.current,
10+
dimensions: AppDimensions = LocalAppDimensions.current,
11+
shapes: AppShapes = LocalAppShapes.current,
12+
styles: AppStyles = LocalAppStyles.current,
13+
typography: AppTypography = LocalAppTypography.current,
914
darkTheme: Boolean = isSystemInDarkTheme(),
1015
content: @Composable () -> Unit
1116
) {
12-
val colors = if (darkTheme) {
17+
val colorScheme = if (darkTheme) {
1318
DarkColorPalette
1419
} else {
1520
LightColorPalette
1621
}
17-
val typography = LocalAppTypography.current
18-
val shapes = LocalAppShapes.current
22+
colors.run {
23+
this.colorScheme = colorScheme
24+
}
1925

2026
CompositionLocalProvider(
21-
LocalAppColors provides colors
27+
LocalAppColors provides colors,
28+
LocalAppDimensions provides dimensions,
29+
LocalAppShapes provides shapes,
30+
LocalAppTypography provides typography,
31+
LocalAppStyles provides styles,
2232
) {
2333
MaterialTheme(
24-
colors = colors.themeColors,
25-
typography = typography,
26-
shapes = shapes,
34+
colorScheme = colors.themeColors,
35+
shapes = shapes.themeShapes,
36+
typography = typography.themeTypography,
2737
content = content
2838
)
2939
}
3040
}
3141

3242
/**
3343
* Alternate to [MaterialTheme] allowing us to add our own theme systems
34-
* or to extend [MaterialTheme]'s types e.g. return our own [Colors] extension.
44+
* or to extend [MaterialTheme]'s types e.g. return our own [AppColors] extension.
3545
*/
3646
object AppTheme {
3747

@@ -40,12 +50,12 @@ object AppTheme {
4050
@ReadOnlyComposable
4151
get() = LocalAppColors.current
4252

43-
val typography: Typography
53+
val typography: AppTypography
4454
@Composable
4555
@ReadOnlyComposable
4656
get() = LocalAppTypography.current
4757

48-
val shapes: Shapes
58+
val shapes: AppShapes
4959
@Composable
5060
@ReadOnlyComposable
5161
get() = LocalAppShapes.current

‎sample-compose/gradle/libs.versions.toml

+2-2
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ compose-ui = { group = "androidx.compose.ui", name = "ui" }
5050
compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }
5151
compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
5252
compose-foundation = { group = "androidx.compose.foundation", name = "foundation" }
53-
compose-material = { group = "androidx.compose.material", name = "material" }
53+
compose-material3 = { group = "androidx.compose.material3", name = "material3" }
5454
compose-navigation = { group = "androidx.navigation", name = "navigation-compose", version.ref = "composeNavigation" }
5555
accompanist-permissions = { group = "com.google.accompanist", name = "accompanist-permissions", version.ref = "accompanist" }
5656
accompanist-systemUiController = { group = "com.google.accompanist", name = "accompanist-systemuicontroller", version.ref = "accompanist" }
@@ -103,7 +103,7 @@ compose = [
103103
"compose-ui",
104104
"compose-ui-tooling-preview",
105105
"compose-foundation",
106-
"compose-material",
106+
"compose-material3",
107107
"compose-navigation",
108108
]
109109
hilt = [

‎template-compose/app/src/main/java/co/nimblehq/template/compose/ui/screens/main/home/HomeScreen.kt

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import androidx.compose.foundation.layout.Column
55
import androidx.compose.foundation.layout.fillMaxSize
66
import androidx.compose.foundation.layout.fillMaxWidth
77
import androidx.compose.foundation.layout.padding
8-
import androidx.compose.material.Text
8+
import androidx.compose.material3.Text
99
import androidx.compose.runtime.Composable
1010
import androidx.compose.runtime.getValue
1111
import androidx.compose.ui.Modifier

‎template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/AppColors.kt

+16-12
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,30 @@
11
package co.nimblehq.template.compose.ui.theme
22

3-
import androidx.compose.material.*
3+
import androidx.compose.material3.ColorScheme
4+
import androidx.compose.material3.darkColorScheme
5+
import androidx.compose.material3.lightColorScheme
46
import androidx.compose.runtime.staticCompositionLocalOf
57

68
// Base colors here
79
// e.g. internal val GreenCitrus = Color(0xFF99CC00)
810

911
/**
10-
* Expand the final [Colors] class to provide more custom app colors.
12+
* Expand the final [ColorScheme] class to provide more custom app colors.
1113
*/
12-
data class AppColors(
13-
val themeColors: Colors
14+
abstract class AppColors(
15+
var colorScheme: ColorScheme = LightColorPalette,
1416

1517
// Custom colors here
16-
)
18+
) {
19+
open val themeColors: ColorScheme
20+
get() = colorScheme
21+
}
1722

18-
internal val LightColorPalette = AppColors(
19-
themeColors = lightColors()
20-
)
23+
internal val LightColorPalette: ColorScheme = lightColorScheme()
2124

22-
internal val DarkColorPalette = AppColors(
23-
themeColors = darkColors()
24-
)
25+
internal val DarkColorPalette: ColorScheme = darkColorScheme()
26+
27+
internal object AppColorsImpl : AppColors()
28+
29+
internal val LocalAppColors = staticCompositionLocalOf<AppColors> { AppColorsImpl }
2530

26-
internal val LocalAppColors = staticCompositionLocalOf { LightColorPalette }

‎template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/AppShapes.kt

+10-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
package co.nimblehq.template.compose.ui.theme
22

3-
import androidx.compose.material.Shapes
3+
import androidx.compose.material3.Shapes
44
import androidx.compose.runtime.staticCompositionLocalOf
55

6-
private val Shapes = Shapes(
7-
// Custom shapes here
8-
)
6+
interface AppShapes {
7+
val themeShapes: Shapes
8+
get() = Shapes(
9+
// Custom shapes here
10+
)
11+
}
912

10-
internal val LocalAppShapes = staticCompositionLocalOf { Shapes }
13+
object AppShapesImpl : AppShapes
14+
15+
internal val LocalAppShapes = staticCompositionLocalOf<AppShapes> { AppShapesImpl }

‎template-compose/app/src/main/java/co/nimblehq/template/compose/ui/theme/AppTypography.kt

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
package co.nimblehq.template.compose.ui.theme
22

3-
import androidx.compose.material.Typography
3+
import androidx.compose.material3.Typography
44
import androidx.compose.runtime.staticCompositionLocalOf
55

6-
private val Typography = Typography(
6+
interface AppTypography {
77
// Custom typography here
8-
)
8+
val themeTypography: Typography
9+
get() = Typography()
10+
}
11+
12+
object AppTypographyImpl : AppTypography
13+
14+
internal val LocalAppTypography = staticCompositionLocalOf<AppTypography> { AppTypographyImpl }
915

10-
internal val LocalAppTypography = staticCompositionLocalOf { Typography }

0 commit comments

Comments
 (0)