[Crane] Used material-window to introduce tablet support for Crane

Change-Id: I3336c0f3d05b4b657d22efdacecf05f6fdf844e3

Author: riggaroo

Crane/app/build.gradle

@@ -125,6 +125,7 @@ dependencies {
     implementation Libs.AndroidX.Compose.runtimeLivedata
     implementation Libs.AndroidX.Compose.foundation
     implementation Libs.AndroidX.Compose.material
+    implementation Libs.AndroidX.Compose.materialWindow
     implementation Libs.AndroidX.Compose.layout
     implementation Libs.AndroidX.Compose.animation
     implementation Libs.AndroidX.Compose.toolingPreview

Crane/app/src/main/java/androidx/compose/samples/crane/base/ExploreSection.kt

@@ -18,32 +18,37 @@ package androidx.compose.samples.crane.base
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.windowInsetsBottomHeight
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.GridItemSpan
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Divider
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
+import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.samples.crane.R
 import androidx.compose.samples.crane.data.ExploreModel
 import androidx.compose.samples.crane.home.OnExploreItemClicked
 import androidx.compose.samples.crane.ui.BottomSheetShape
 import androidx.compose.samples.crane.ui.crane_caption
-import androidx.compose.samples.crane.ui.crane_divider_color
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -56,6 +61,7 @@ import coil.compose.rememberImagePainter
 
 @Composable
 fun ExploreSection(
+    widthSize: WindowWidthSizeClass,
     modifier: Modifier = Modifier,
     title: String,
     exploreList: List<ExploreModel>,
@@ -68,74 +74,104 @@ fun ExploreSection(
                 style = MaterialTheme.typography.caption.copy(color = crane_caption)
             )
             Spacer(Modifier.height(8.dp))
-            LazyColumn(
-                modifier = Modifier.weight(1f),
-            ) {
-                items(exploreList) { exploreItem ->
-                    Column(Modifier.fillParentMaxWidth()) {
-                        ExploreItem(
-                            modifier = Modifier.fillParentMaxWidth(),
-                            item = exploreItem,
-                            onItemClicked = onItemClicked
+
+            LazyVerticalGrid(
+                columns = GridCells.Adaptive(200.dp),
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+                content = {
+                    items(exploreList) { exploreItem ->
+                        when (widthSize) {
+                            WindowWidthSizeClass.Medium, WindowWidthSizeClass.Expanded -> {
+                                ExploreItemColumn(
+                                    modifier = Modifier.fillMaxWidth(),
+                                    item = exploreItem,
+                                    onItemClicked = onItemClicked
+                                )
+                            }
+                            else -> {
+                                ExploreItemRow(
+                                    modifier = Modifier.fillMaxWidth(),
+                                    item = exploreItem,
+                                    onItemClicked = onItemClicked
+                                )
+                            }
+                        }
+                    }
+                    item(span = {
+                        // Span the whole bottom row of grid items to add space at the bottom of the grid.
+                        GridItemSpan(maxLineSpan)
+                    }) {
+                        Spacer(
+                            modifier = Modifier.windowInsetsBottomHeight(WindowInsets.navigationBars)
                         )
-                        Divider(color = crane_divider_color)
                     }
                 }
-                item {
-                    Spacer(
-                        modifier = Modifier.windowInsetsBottomHeight(WindowInsets.navigationBars)
-                    )
-                }
-            }
+            )
         }
     }
 }
 
+/**
+ * Composable with large image card and text underneath.
+ */
 @OptIn(ExperimentalCoilApi::class)
 @Composable
-private fun ExploreItem(
+private fun ExploreItemColumn(
     modifier: Modifier = Modifier,
     item: ExploreModel,
     onItemClicked: OnExploreItemClicked
 ) {
-    Row(
+    Column(
         modifier = modifier
             .clickable { onItemClicked(item) }
             .padding(top = 12.dp, bottom = 12.dp)
     ) {
-        ExploreImageContainer {
-            Box {
-                val painter = rememberImagePainter(
-                    data = item.imageUrl,
-                    builder = {
-                        crossfade(true)
-                    }
-                )
-                Image(
-                    painter = painter,
-                    contentDescription = null,
-                    contentScale = ContentScale.Crop,
-                    modifier = Modifier.fillMaxSize(),
-                )
+        ExploreImageContainer(modifier = Modifier.fillMaxWidth()) {
+            ExploreImage(item)
+        }
+        Spacer(Modifier.height(8.dp))
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .wrapContentHeight()
+        ) {
+            Text(
+                modifier = Modifier.fillMaxWidth(),
+                text = item.city.nameToDisplay,
+                style = MaterialTheme.typography.subtitle1
+            )
+            Spacer(Modifier.height(4.dp))
+            Text(
+                modifier = Modifier.fillMaxWidth(),
+                text = item.description,
+                style = MaterialTheme.typography.caption.copy(color = crane_caption)
+            )
+        }
+    }
+}
 
-                if (painter.state is Loading) {
-                    Image(
-                        painter = painterResource(id = R.drawable.ic_crane_logo),
-                        contentDescription = null,
-                        modifier = Modifier
-                            .size(36.dp)
-                            .align(Alignment.Center),
-                    )
-                }
-            }
+@Composable
+private fun ExploreItemRow(
+    modifier: Modifier = Modifier,
+    item: ExploreModel,
+    onItemClicked: OnExploreItemClicked
+) {
+    Row(
+        modifier = modifier
+            .clickable { onItemClicked(item) }
+            .padding(top = 12.dp, bottom = 12.dp)
+    ) {
+        ExploreImageContainer(modifier = Modifier.size(64.dp)) {
+            ExploreImage(item)
         }
         Spacer(Modifier.width(24.dp))
-        Column {
+        Column(modifier = Modifier.fillMaxWidth()) {
             Text(
                 text = item.city.nameToDisplay,
                 style = MaterialTheme.typography.h6
             )
-            Spacer(Modifier.height(8.dp))
+            Spacer(Modifier.height(4.dp))
             Text(
                 text = item.description,
                 style = MaterialTheme.typography.caption.copy(color = crane_caption)
@@ -144,9 +180,41 @@ private fun ExploreItem(
     }
 }
 
+@OptIn(ExperimentalCoilApi::class)
 @Composable
-private fun ExploreImageContainer(content: @Composable () -> Unit) {
-    Surface(Modifier.size(width = 60.dp, height = 60.dp), RoundedCornerShape(4.dp)) {
+private fun ExploreImage(item: ExploreModel) {
+    Box {
+        val painter = rememberImagePainter(
+            data = item.imageUrl,
+            builder = {
+                crossfade(true)
+            }
+        )
+        Image(
+            painter = painter,
+            contentDescription = null,
+            contentScale = ContentScale.Crop,
+            modifier = Modifier.fillMaxSize(),
+        )
+
+        if (painter.state is Loading) {
+            Image(
+                painter = painterResource(id = R.drawable.ic_crane_logo),
+                contentDescription = null,
+                modifier = Modifier
+                    .size(36.dp)
+                    .align(Alignment.Center),
+            )
+        }
+    }
+}
+
+@Composable
+private fun ExploreImageContainer(
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit
+) {
+    Surface(modifier.aspectRatio(1f), RoundedCornerShape(4.dp)) {
         content()
     }
 }

Crane/app/src/main/java/androidx/compose/samples/crane/home/CraneHome.kt

@@ -17,13 +17,16 @@
 package androidx.compose.samples.crane.home
 
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.material.BackdropScaffold
 import androidx.compose.material.BackdropValue
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.Scaffold
 import androidx.compose.material.rememberBackdropScaffoldState
 import androidx.compose.material.rememberScaffoldState
+import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
@@ -40,6 +43,7 @@ import androidx.compose.samples.crane.data.ExploreModel
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import kotlinx.coroutines.launch
 
@@ -51,6 +55,7 @@ enum class CraneScreen {
 
 @Composable
 fun CraneHome(
+    widthSize: WindowWidthSizeClass,
     onExploreItemClicked: OnExploreItemClicked,
     onDateSelectionClicked: () -> Unit,
     modifier: Modifier = Modifier,
@@ -66,6 +71,7 @@ fun CraneHome(
         val scope = rememberCoroutineScope()
         CraneHomeContent(
             modifier = modifier.padding(contentPadding),
+            widthSize = widthSize,
             onExploreItemClicked = onExploreItemClicked,
             onDateSelectionClicked = onDateSelectionClicked,
             openDrawer = {
@@ -80,6 +86,7 @@ fun CraneHome(
 @OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun CraneHomeContent(
+    widthSize: WindowWidthSizeClass,
     onExploreItemClicked: OnExploreItemClicked,
     onDateSelectionClicked: () -> Unit,
     openDrawer: () -> Unit,
@@ -100,6 +107,7 @@ fun CraneHomeContent(
         },
         backLayerContent = {
             SearchContent(
+                widthSize,
                 tabSelected,
                 viewModel,
                 onPeopleChanged,
@@ -112,6 +120,7 @@ fun CraneHomeContent(
                 CraneScreen.Fly -> {
                     suggestedDestinations?.let { destinations ->
                         ExploreSection(
+                            widthSize = widthSize,
                             title = stringResource(R.string.explore_flights_by_destination),
                             exploreList = destinations,
                             onItemClicked = onExploreItemClicked
@@ -120,13 +129,15 @@ fun CraneHomeContent(
                 }
                 CraneScreen.Sleep -> {
                     ExploreSection(
+                        widthSize = widthSize,
                         title = stringResource(R.string.explore_properties_by_destination),
                         exploreList = viewModel.hotels,
                         onItemClicked = onExploreItemClicked
                     )
                 }
                 CraneScreen.Eat -> {
                     ExploreSection(
+                        widthSize = widthSize,
                         title = stringResource(R.string.explore_restaurants_by_destination),
                         exploreList = viewModel.restaurants,
                         onItemClicked = onExploreItemClicked
@@ -145,7 +156,7 @@ private fun HomeTabBar(
     modifier: Modifier = Modifier
 ) {
     CraneTabBar(
-        modifier = modifier,
+        modifier = modifier.wrapContentWidth().sizeIn(maxWidth = 500.dp),
         onMenuClicked = openDrawer
     ) { tabBarModifier ->
         CraneTabs(
@@ -159,6 +170,7 @@ private fun HomeTabBar(
 
 @Composable
 private fun SearchContent(
+    widthSize: WindowWidthSizeClass,
     tabSelected: CraneScreen,
     viewModel: MainViewModel,
     onPeopleChanged: (Int) -> Unit,
@@ -171,7 +183,8 @@ private fun SearchContent(
 
     when (tabSelected) {
         CraneScreen.Fly -> FlySearchContent(
-            datesSelected,
+            widthSize = widthSize,
+            datesSelected = datesSelected,
             searchUpdates = FlySearchContentUpdates(
                 onPeopleChanged = onPeopleChanged,
                 onToDestinationChanged = { viewModel.toDestinationChanged(it) },
@@ -180,15 +193,17 @@ private fun SearchContent(
             )
         )
         CraneScreen.Sleep -> SleepSearchContent(
-            datesSelected,
+            widthSize = widthSize,
+            datesSelected = datesSelected,
             sleepUpdates = SleepSearchContentUpdates(
                 onPeopleChanged = onPeopleChanged,
                 onDateSelectionClicked = onDateSelectionClicked,
                 onExploreItemClicked = onExploreItemClicked
             )
         )
         CraneScreen.Eat -> EatSearchContent(
-            datesSelected,
+            widthSize = widthSize,
+            datesSelected = datesSelected,
             eatUpdates = EatSearchContentUpdates(
                 onPeopleChanged = onPeopleChanged,
                 onDateSelectionClicked = onDateSelectionClicked,