#18 feat: make layout adapt to large displays

Signed-off-by: sds100 <developer.sds100@gmail.com>

Author: sds100

app/build.gradle

@@ -86,6 +86,7 @@ dependencies {
     implementation "com.google.accompanist:accompanist-insets:0.23.1"
     implementation "androidx.datastore:datastore-preferences:1.0.0"
     implementation "androidx.core:core-splashscreen:1.0.0-rc01"
+    implementation "androidx.compose.material3:material3-window-size-class:1.0.0-alpha14"
 
     //other
     implementation 'com.jakewharton.timber:timber:5.0.1'

app/src/main/java/com/mapcode/MainActivity.kt

@@ -4,6 +4,9 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.viewModels
+import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
+import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
+import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
 import androidx.compose.runtime.Composable
 import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
 import androidx.core.view.WindowCompat
@@ -12,19 +15,23 @@ import com.google.android.gms.maps.MapsInitializer
 import com.mapcode.map.MapViewModel
 import com.mapcode.theme.MapcodeTheme
 import dagger.hilt.android.AndroidEntryPoint
+import timber.log.Timber
 
 @AndroidEntryPoint
 class MainActivity : ComponentActivity() {
     private val viewModel: MapViewModel by viewModels()
 
+    @OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
     override fun onCreate(savedInstanceState: Bundle?) {
         installSplashScreen()
         super.onCreate(savedInstanceState)
-        
+
         WindowCompat.setDecorFitsSystemWindows(window, false)
 
         setContent {
-            MapcodeApp(viewModel)
+            val widthSizeClass = calculateWindowSizeClass(this).widthSizeClass
+            Timber.e(widthSizeClass.toString())
+            MapcodeApp(viewModel, widthSizeClass)
         }
 
         MapsInitializer.initialize(this)
@@ -38,12 +45,13 @@ class MainActivity : ComponentActivity() {
 }
 
 @Composable
-fun MapcodeApp(viewModel: MapViewModel) {
+fun MapcodeApp(viewModel: MapViewModel, widthSizeClass: WindowWidthSizeClass) {
     MapcodeTheme {
         val navController = rememberNavController()
         MapcodeNavHost(
             navController = navController,
-            viewModel = viewModel
+            viewModel = viewModel,
+            isExpandedScreen = widthSizeClass == WindowWidthSizeClass.Expanded
         )
     }
 }

app/src/main/java/com/mapcode/MapcodeNavHost.kt

@@ -16,15 +16,16 @@ import com.mapcode.map.MapViewModel
 fun MapcodeNavHost(
     modifier: Modifier = Modifier,
     navController: NavHostController,
-    viewModel: MapViewModel
+    viewModel: MapViewModel,
+    isExpandedScreen: Boolean
 ) {
     NavHost(
         navController = navController,
         startDestination = MapcodeDestination.Map.name,
         modifier = modifier
     ) {
         composable(MapcodeDestination.Map.name) {
-            MapScreen(viewModel)
+            MapScreen(viewModel, isExpandedScreen = isExpandedScreen)
         }
     }
 }