adaptive-ui

Adaptive UI — Every Screen, Every Device

Android has 1B+ active large-screen devices. Every screen must work on phones, tablets, foldables, and Chromebooks. These 10 rules make that happen automatically.

The golden rule

Before placing any layout element: ask how it looks at 600dp width AND 840dp width. If the answer is "one stretched column" — it's wrong.

Setup — required dependencies

[versions]
material3Adaptive = "1.1.0"

[libraries]
material3-adaptive = { group = "androidx.compose.material3.adaptive", name = "adaptive", version.ref = "material3Adaptive" }
material3-adaptive-layout = { group = "androidx.compose.material3.adaptive", name = "adaptive-layout", version.ref = "material3Adaptive" }
material3-adaptive-navigation = { group = "androidx.compose.material3.adaptive", name = "adaptive-navigation", version.ref = "material3Adaptive" }
windowSizeClass = { group = "androidx.compose.material3", name = "material3-window-size-class", version.ref = "material3" }

Rule 1: NavigationSuiteScaffold — zero-code adaptive navigation

// ✅ One component → BottomBar on phone, Rail on tablet, Drawer on large screen
@Composable
fun MyApp() {
    val navController = rememberNavController()
    val currentEntry by navController.currentBackStackEntryAsState()

    NavigationSuiteScaffold(
        navigationSuiteItems = {
            TopLevelRoute.entries.forEach { route ->
                item(
                    selected = currentEntry?.destination?.hasRoute(route.routeClass) == true,
                    onClick = { navController.navigateTopLevel(route) },
                    icon = {
                        Icon(
                            if (currentEntry?.destination?.hasRoute(route.routeClass) == true)
                                route.selectedIcon else route.icon,
                            contentDescription = stringResource(route.labelRes)
                        )
                    },
                    label = { Text(stringResource(route.labelRes)) },
                    badge = if (route.badgeCount > 0) {
                        { Badge { Text("${route.badgeCount}") } }
                    } else null
                )
            }
        }
    ) {
        AppNavHost(navController)
    }
}
// Compact  (< 600dp): BottomNavigationBar
// Medium   (600-840dp): NavigationRail
// Expanded (> 840dp): NavigationDrawer (permanent)
// No extra code needed — ever.

// ✅ Define top-level routes
enum class TopLevelRoute(
    val routeClass: KClass<*>,
    val icon: ImageVector,
    val selectedIcon: ImageVector,
    @StringRes val labelRes: Int,
    val badgeCount: Int = 0
) {
    Home(HomeRoute::class, Icons.Outlined.Home, Icons.Filled.Home, R.string.home),
    Search(SearchRoute::class, Icons.Outlined.Search, Icons.Filled.Search, R.string.search),
    Inbox(InboxRoute::class, Icons.Outlined.Inbox, Icons.Filled.Inbox, R.string.inbox, badgeCount = 3),
    Profile(ProfileRoute::class, Icons.Outlined.Person, Icons.Filled.Person, R.string.profile),
}

// ✅ Top-level navigate helper — prevents duplicate backstack entries
fun NavController.navigateTopLevel(route: TopLevelRoute) {
    navigate(route.routeClass.objectInstance ?: return) {
        popUpTo(graph.findStartDestination().id) { saveState = true }
        launchSingleTop = true
        restoreState = true
    }
}