Support Multiple screen size

app/build.gradle

@@ -90,6 +90,7 @@ dependencies {
 
 	implementation Firebase.dynamicLink
 	implementation(project(":features:article:dynamic-links-handler"))
+	implementation "androidx.compose.material3:material3-window-size-class:1.0.0-alpha12"
 }
 
 if (file("google-services.json").exists()) {

app/src/main/java/kasem/sm/slime/MainActivity.kt

@@ -9,6 +9,8 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.annotation.RequiresApi
+import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
+import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
 import coil.ImageLoader
 import com.google.accompanist.navigation.animation.rememberAnimatedNavController
 import com.google.accompanist.navigation.material.ExperimentalMaterialNavigationApi
@@ -27,6 +29,7 @@ class MainActivity : ComponentActivity() {
     @Inject
     lateinit var imageLoader: ImageLoader
 
+    @OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
     @RequiresApi(S)
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
@@ -37,7 +40,8 @@ class MainActivity : ComponentActivity() {
             SlimeNavigation(
                 navController = navController,
                 imageLoader = imageLoader,
-                bottomSheetNavigator = bottomSheetNavigator
+                bottomSheetNavigator = bottomSheetNavigator,
+                windowSizeClass = calculateWindowSizeClass(this)
             )
 
             handleDynamicLink(

app/src/main/java/kasem/sm/slime/ui/navigation/SlimeNavigation.kt

@@ -6,17 +6,23 @@ package kasem.sm.slime.ui.navigation
 
 import android.os.Build.VERSION_CODES.S
 import androidx.annotation.RequiresApi
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.rememberScaffoldState
+import androidx.compose.material3.windowsizeclass.WindowSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.navigation.NavController
 import androidx.navigation.NavGraph.Companion.findStartDestination
 import androidx.navigation.NavHostController
 import coil.ImageLoader
 import com.google.accompanist.navigation.material.BottomSheetNavigator
 import com.google.accompanist.navigation.material.ExperimentalMaterialNavigationApi
 import kasem.sm.common_ui.scaffold.SlimeBottomBar
+import kasem.sm.common_ui.scaffold.SlimeNavigationRail
 import kasem.sm.common_ui.scaffold.SlimeScaffold
+import kasem.sm.common_ui.scaffold.isCompactWindow
 import kasem.sm.common_ui.theme.SlimeTheme
 import kasem.sm.common_ui.util.BottomNavigationItems
 
@@ -27,38 +33,61 @@ fun SlimeNavigation(
     imageLoader: ImageLoader,
     navController: NavHostController,
     bottomSheetNavigator: BottomSheetNavigator,
-) = SlimeTheme {
-    val scaffoldState = rememberScaffoldState()
+    windowSizeClass: WindowSizeClass,
+) {
+    SlimeTheme {
+        val scaffoldState = rememberScaffoldState()
 
-    SlimeScaffold(
-        state = scaffoldState,
-        bottomBarVisibility = navController.isNotAuthRoute(),
-        fabVisibility = navController.isProfileScreenRoute(),
-        bottomBar = {
-            SlimeBottomBar(
-                currentRoute = navController.currentRouteAsState(),
-                items = BottomNavigationItems.toList,
-                navigateTo = { route ->
-                    if (navController.currentDestination?.route != route) {
-                        navController.navigate(route) {
-                            popUpTo(navController.graph.findStartDestination().id) {
-                                saveState = true
-                            }
-                            launchSingleTop = true
-                            restoreState = true
-                        }
-                    }
+        SlimeScaffold(
+            state = scaffoldState,
+            bottomBarVisibility = navController.isNotAuthRoute(),
+            fabVisibility = navController.isProfileScreenRoute(),
+            windowSizeClass = windowSizeClass,
+            bottomBar = {
+                SlimeBottomBar(
+                    currentRoute = navController.currentRouteAsState(),
+                    items = BottomNavigationItems.toList,
+                    navigateTo = navController::navigateTo
+                )
+            },
+        ) { padding ->
+            /**
+             * If the device is rotated (horizontally), we need to display
+             * the rail first in the row then the content
+             */
+            Row(
+                Modifier
+                    .fillMaxSize()
+            ) {
+                if (!windowSizeClass.isCompactWindow) {
+                    SlimeNavigationRail(
+                        currentRoute = navController.currentRouteAsState(),
+                        items = BottomNavigationItems.toList,
+                        navigateTo = navController::navigateTo
+                    )
                 }
-            )
+
+                NavHost(
+                    navController = navController,
+                    bottomSheetNavigator = bottomSheetNavigator,
+                    imageLoader = imageLoader,
+                    snackbarHostState = scaffoldState.snackbarHostState,
+                    modifier = Modifier
+                        .padding(padding)
+                )
+            }
+        }
+    }
+}
+
+fun NavController.navigateTo(route: String) {
+    if (currentDestination?.route != route) {
+        navigate(route) {
+            popUpTo(graph.findStartDestination().id) {
+                saveState = true
+            }
+            launchSingleTop = true
+            restoreState = true
         }
-    ) { padding ->
-        NavHost(
-            navController = navController,
-            bottomSheetNavigator = bottomSheetNavigator,
-            imageLoader = imageLoader,
-            snackbarHostState = scaffoldState.snackbarHostState,
-            modifier = Modifier
-                .padding(padding)
-        )
     }
 }

common-ui/build.gradle

@@ -22,4 +22,6 @@ dependencies {
 	implementation(Accompanist.flowLayout)
 	implementation Accompanist.sysUiController
 	implementation "org.jetbrains.kotlin:kotlin-reflect:1.6.21"
+
+	implementation "androidx.compose.material3:material3-window-size-class:1.0.0-alpha12"
 }

common-ui/src/main/java/kasem/sm/common_ui/scaffold/SlimeBottomBar.kt

@@ -9,7 +9,11 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.NavigationRail
+import androidx.compose.material3.NavigationRailItem
 import androidx.compose.material3.Text
+import androidx.compose.material3.windowsizeclass.WindowSizeClass
+import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
@@ -48,3 +52,37 @@ fun SlimeBottomBar(
         }
     }
 }
+
+@Composable
+fun SlimeNavigationRail(
+    currentRoute: String?,
+    navigateTo: (String) -> Unit,
+    items: List<BottomNavigationItems>,
+) {
+    NavigationRail {
+        items.forEach { item ->
+            NavigationRailItem(
+                icon = {
+                    Icon(
+                        painter = painterResource(id = item.icon),
+                        modifier = Modifier.size(22.dp),
+                        contentDescription = item.title,
+                        tint = MaterialTheme.colorScheme.onSurfaceVariant,
+                    )
+                },
+                label = {
+                    Text(
+                        text = item.title,
+                        fontFamily = LocalSlimeFont.current.secondaryMedium
+                    )
+                },
+                selected = currentRoute == item.route,
+                onClick = {
+                    navigateTo(item.route)
+                }
+            )
+        }
+    }
+}
+
+val WindowSizeClass.isCompactWindow get() = widthSizeClass == WindowWidthSizeClass.Compact

common-ui/src/main/java/kasem/sm/common_ui/scaffold/SlimeScaffold.kt

@@ -11,6 +11,7 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
+import androidx.compose.material3.windowsizeclass.WindowSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 
@@ -19,6 +20,7 @@ fun SlimeScaffold(
     state: ScaffoldState,
     bottomBarVisibility: Boolean,
     fabVisibility: Boolean,
+    windowSizeClass: WindowSizeClass,
     bottomBar: @Composable () -> Unit,
     content: @Composable (PaddingValues) -> Unit,
 ) {
@@ -28,20 +30,24 @@ fun SlimeScaffold(
         content = content,
         bottomBar = {
             if (bottomBarVisibility) {
-                bottomBar()
+                if (windowSizeClass.isCompactWindow) {
+                    bottomBar()
+                }
             }
         },
         floatingActionButton = {
             if (fabVisibility) {
-                FloatingActionButton(onClick = {
-                    //
-                }) {
+                FloatingActionButton(
+                    onClick = {
+                        //
+                    }
+                ) {
                     Icon(
                         imageVector = Icons.Default.Add,
                         contentDescription = Icons.Default.Add.name
                     )
                 }
             }
-        }
+        },
     )
 }

version.properties

@@ -1,5 +1,5 @@
-#Tue May 24 20:35:34 IST 2022
+#Tue May 24 22:03:57 IST 2022
 MAJOR=0
 MINOR=0
 VERSION_CODE=31
-PATCH=4188
+PATCH=4198