Update Sunflower from M2 to M3 (#852)

app/build.gradle.kts

@@ -134,19 +134,19 @@ dependencies {
 
   // Compose
   implementation(platform(libs.androidx.compose.bom))
-  implementation(libs.accompanist.themeadapter.material)
   implementation(libs.androidx.activity.compose)
   implementation(libs.androidx.constraintlayout.compose)
   implementation(libs.androidx.compose.runtime)
   implementation(libs.androidx.compose.ui)
   implementation(libs.androidx.compose.foundation)
   implementation(libs.androidx.compose.foundation.layout)
-  implementation(libs.androidx.compose.material)
+  implementation(libs.androidx.compose.material3)
   implementation(libs.androidx.compose.ui.viewbinding)
   implementation(libs.androidx.compose.ui.tooling.preview)
   implementation(libs.androidx.compose.runtime.livedata)
   implementation(libs.androidx.lifecycle.viewmodel.compose)
   implementation(libs.glide)
+  implementation(libs.accompanist.systemuicontroller)
   debugImplementation(libs.androidx.compose.ui.tooling)
 
   // Testing dependencies

app/src/main/AndroidManifest.xml

@@ -32,8 +32,7 @@
         android:theme="@style/Theme.Sunflower">
         <activity
             android:name=".GardenActivity"
-            android:exported="true"
-            android:theme="@style/Theme.Sunflower.NoActionBar">
+            android:exported="true">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
 

app/src/main/java/com/google/samples/apps/sunflower/GardenActivity.kt

@@ -17,42 +17,15 @@
 package com.google.samples.apps.sunflower
 
 import android.os.Bundle
-import android.util.Log
-import android.view.Menu
-import android.view.MenuInflater
-import android.view.MenuItem
+import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.activity.viewModels
-import androidx.appcompat.app.AppCompatActivity
-import androidx.core.view.MenuProvider
 import androidx.core.view.WindowCompat
-import com.google.accompanist.themeadapter.material.MdcTheme
 import com.google.samples.apps.sunflower.compose.SunflowerApp
-import com.google.samples.apps.sunflower.compose.home.SunflowerPage
-import com.google.samples.apps.sunflower.viewmodels.PlantListViewModel
+import com.google.samples.apps.sunflower.ui.SunflowerTheme
 import dagger.hilt.android.AndroidEntryPoint
 
-// TODO: update the superclass to ComponentActivity https://github.com/android/sunflower/issues/829
 @AndroidEntryPoint
-class GardenActivity : AppCompatActivity() {
-
-    private val viewModel: PlantListViewModel by viewModels()
-
-    private val menuProvider = object : MenuProvider {
-        override fun onCreateMenu(menu: Menu, menuInflater: MenuInflater) {
-            menuInflater.inflate(R.menu.menu_plant_list, menu)
-        }
-
-        override fun onMenuItemSelected(menuItem: MenuItem): Boolean {
-            return when (menuItem.itemId) {
-                R.id.filter_zone -> {
-                    viewModel.updateData()
-                    true
-                }
-                else -> false
-            }
-        }
-    }
+class GardenActivity : ComponentActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
@@ -61,21 +34,8 @@ class GardenActivity : AppCompatActivity() {
         WindowCompat.setDecorFitsSystemWindows(window, false)
 
         setContent {
-            MdcTheme {
-                SunflowerApp(
-                    onAttached = { toolbar ->
-                        setSupportActionBar(toolbar)
-                    },
-                    onPageChange = { page ->
-                        when (page) {
-                            SunflowerPage.MY_GARDEN -> removeMenuProvider(menuProvider)
-                            SunflowerPage.PLANT_LIST -> addMenuProvider(
-                                menuProvider,
-                                this
-                            )
-                        }
-                    }
-                )
+            SunflowerTheme {
+                SunflowerApp()
             }
         }
     }

app/src/main/java/com/google/samples/apps/sunflower/compose/SunflowerApp.kt

@@ -19,11 +19,9 @@ package com.google.samples.apps.sunflower.compose
 import android.app.Activity
 import android.content.Intent
 import android.net.Uri
-import androidx.appcompat.widget.Toolbar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.platform.LocalContext
 import androidx.core.app.ShareCompat
-import androidx.navigation.NavController
 import androidx.navigation.NavHostController
 import androidx.navigation.NavType
 import androidx.navigation.compose.NavHost
@@ -33,27 +31,19 @@ import androidx.navigation.navArgument
 import com.google.samples.apps.sunflower.R
 import com.google.samples.apps.sunflower.compose.gallery.GalleryScreen
 import com.google.samples.apps.sunflower.compose.home.HomeScreen
-import com.google.samples.apps.sunflower.compose.home.SunflowerPage
 import com.google.samples.apps.sunflower.compose.plantdetail.PlantDetailsScreen
 
 @Composable
-fun SunflowerApp(
-    onPageChange: (SunflowerPage) -> Unit = {},
-    onAttached: (Toolbar) -> Unit = {},
-) {
+fun SunflowerApp() {
     val navController = rememberNavController()
     SunFlowerNavHost(
-        navController = navController,
-        onPageChange = onPageChange,
-        onAttached = onAttached
+        navController = navController
     )
 }
 
 @Composable
 fun SunFlowerNavHost(
-    navController: NavHostController,
-    onPageChange: (SunflowerPage) -> Unit = {},
-    onAttached: (Toolbar) -> Unit = {},
+    navController: NavHostController
 ) {
     val activity = (LocalContext.current as Activity)
     NavHost(navController = navController, startDestination = "home") {
@@ -62,8 +52,6 @@ fun SunFlowerNavHost(
                 onPlantClick = {
                     navController.navigate("plantDetail/${it.plantId}")
                 },
-                onPageChange = onPageChange,
-                onAttached = onAttached
             )
         }
         composable(

app/src/main/java/com/google/samples/apps/sunflower/compose/gallery/GalleryScreen.kt

@@ -21,13 +21,14 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.Scaffold
-import androidx.compose.material.Text
-import androidx.compose.material.TopAppBar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.dimensionResource
@@ -61,6 +62,7 @@ fun GalleryScreen(
     )
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun GalleryScreen(
     plantPictures: Flow<PagingData<UnsplashPhoto>>,
@@ -96,6 +98,7 @@ private fun GalleryScreen(
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun GalleryTopBar(
     onUpClick: () -> Unit,

app/src/main/java/com/google/samples/apps/sunflower/compose/garden/GardenScreen.kt

@@ -28,18 +28,18 @@ import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.foundation.lazy.grid.rememberLazyGridState
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Button
-import androidx.compose.material.ButtonDefaults
-import androidx.compose.material.Card
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.CardColors
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ElevatedCard
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
-import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.dimensionResource
@@ -49,15 +49,13 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
-import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
-import com.google.accompanist.themeadapter.material.MdcTheme
 import com.google.samples.apps.sunflower.R
-import com.google.samples.apps.sunflower.compose.card
 import com.google.samples.apps.sunflower.compose.utils.SunflowerImage
 import com.google.samples.apps.sunflower.data.GardenPlanting
 import com.google.samples.apps.sunflower.data.Plant
 import com.google.samples.apps.sunflower.data.PlantAndGardenPlantings
+import com.google.samples.apps.sunflower.ui.SunflowerTheme
 import com.google.samples.apps.sunflower.viewmodels.GardenPlantingListViewModel
 import com.google.samples.apps.sunflower.viewmodels.PlantAndGardenPlantingsViewModel
 import java.util.*
@@ -120,8 +118,7 @@ private fun GardenList(
 }
 
 @OptIn(
-    ExperimentalMaterialApi::class,
-    ExperimentalComposeUiApi::class
+    ExperimentalMaterial3Api::class
 )
 @Composable
 private fun GardenListItem(
@@ -134,15 +131,15 @@ private fun GardenListItem(
     val cardSideMargin = dimensionResource(id = R.dimen.card_side_margin)
     val marginNormal = dimensionResource(id = R.dimen.margin_normal)
 
-    Card(
+    ElevatedCard(
         onClick = { onPlantClick(plant) },
         modifier = Modifier.padding(
             start = cardSideMargin,
             end = cardSideMargin,
             bottom = dimensionResource(id = R.dimen.card_bottom_margin)
         ),
-        elevation = dimensionResource(id = R.dimen.card_elevation),
-        shape = MaterialTheme.shapes.card,
+        shape = MaterialTheme.shapes.medium,
+        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.secondaryContainer)
     ) {
         Column(Modifier.fillMaxWidth()) {
             SunflowerImage(
@@ -160,21 +157,20 @@ private fun GardenListItem(
                 Modifier
                     .padding(vertical = marginNormal)
                     .align(Alignment.CenterHorizontally),
-                style = MaterialTheme.typography.subtitle1,
+                style = MaterialTheme.typography.titleMedium,
             )
 
             // Planted date
             Text(
                 text = stringResource(id = R.string.plant_date_header),
                 Modifier.align(Alignment.CenterHorizontally),
                 fontWeight = FontWeight.Bold,
-                color = MaterialTheme.colors.primaryVariant,
-                style = MaterialTheme.typography.subtitle2
+                style = MaterialTheme.typography.titleSmall
             )
             Text(
                 text = vm.plantDateString,
                 Modifier.align(Alignment.CenterHorizontally),
-                style = MaterialTheme.typography.subtitle2
+                style = MaterialTheme.typography.titleSmall
             )
 
             // Last Watered
@@ -184,13 +180,12 @@ private fun GardenListItem(
                     .align(Alignment.CenterHorizontally)
                     .padding(top = marginNormal),
                 fontWeight = FontWeight.Bold,
-                color = MaterialTheme.colors.primaryVariant,
-                style = MaterialTheme.typography.subtitle2
+                style = MaterialTheme.typography.titleSmall
             )
             Text(
                 text = vm.waterDateString,
                 Modifier.align(Alignment.CenterHorizontally),
-                style = MaterialTheme.typography.subtitle2
+                style = MaterialTheme.typography.titleSmall
             )
             Text(
                 text = pluralStringResource(
@@ -201,7 +196,7 @@ private fun GardenListItem(
                 Modifier
                     .align(Alignment.CenterHorizontally)
                     .padding(bottom = marginNormal),
-                style = MaterialTheme.typography.subtitle2
+                style = MaterialTheme.typography.titleSmall
             )
         }
     }
@@ -219,20 +214,13 @@ private fun EmptyGarden(onAddPlantClick: () -> Unit, modifier: Modifier = Modifi
     ) {
         Text(
             text = stringResource(id = R.string.garden_empty),
-            style = MaterialTheme.typography.h5
+            style = MaterialTheme.typography.headlineSmall
         )
         Button(
-            colors = ButtonDefaults.buttonColors(backgroundColor = MaterialTheme.colors.onPrimary),
-            shape = RoundedCornerShape(
-                topStart = 0.dp,
-                topEnd = dimensionResource(id = R.dimen.button_corner_radius),
-                bottomStart = dimensionResource(id = R.dimen.button_corner_radius),
-                bottomEnd = 0.dp,
-            ),
+            shape = MaterialTheme.shapes.medium,
             onClick = onAddPlantClick
         ) {
             Text(
-                color = MaterialTheme.colors.primary,
                 text = stringResource(id = R.string.add_plant)
             )
         }
@@ -244,7 +232,7 @@ private fun EmptyGarden(onAddPlantClick: () -> Unit, modifier: Modifier = Modifi
 private fun GardenScreenPreview(
     @PreviewParameter(GardenScreenPreviewParamProvider::class) gardenPlants: List<PlantAndGardenPlantings>
 ) {
-    MdcTheme {
+    SunflowerTheme {
         GardenScreen(gardenPlants)
     }
 }