Navigation Rail with Material 3 in Jetpack Compose

Introduction

Navigation rails are predominantly present in devices with larger screens, such as tablets, where user movement through the bottom navigation is problematic. In scenarios involving expandable displays, the utilization of navigation icons situated in the sidebar simplifies the process of navigation.

The window size class is an experimental API that introduces three distinct screen size categories: compact, medium, and expanded. When the screen size surpasses the compact category, the navigation rail becomes a viable option, whereas smaller sizes warrant the use of the bottom navigation bar.

In the context of Material 3, three primary types of navigation components exist the Navigation bar, Navigation drawer, and Navigation rail. We covered the Navigation bar and Navigation drawer in the last article. Therefore in this article, we will discuss the Navigation rail. So let us begin.

Implementing the Navigation Rail

Let's dive into how you can implement a navigation Rail using Material 3 in Jetpack Compose.

1. Add Dependency

Create a new project or open any project, then the following dependencies to your module build.gradle(App) file. The material3 dependency is already included in your project if you are using the most recent version of Android Studio then you can only add the window size class dependency.

implementation("androidx.compose.material3:material3")
implementation("androidx.compose.material3:material3-window-size-class:1.1.1")

2. Setting up The Navigation Rail

According to the Material 3 guidelines, the Navigation rail can contain 3 to 7 items plus a fab button. The Navigation Rail should be used in the medium and expanded window size. The Navigation should be placed in place even for different sizes and applications.

To create the navigation rail, firstly, we must describe the content of the navigation rail, for which we will four three Navigation items (Navigation item is a custom class that we have already defined), and to preserve the state in recomposition, we will utilize the showNavigationRail state and selectedItemIndex.

data class NavigationItem(
    val title: String,
    val unselectedIcon: ImageVector,
    val selectedIcon: ImageVector,
    val hasNews: Boolean,
    val badgeCount: Int? = null
)

@OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
@Composable
fun NavigationRailExample(mainActivity: MainActivity) {

    val items = listOf(
        NavigationItem(
            title = "Location",
            selectedIcon = Icons.Default.LocationOn,
            unselectedIcon = Icons.Outlined.LocationOn,
            hasNews = false,
        ),
        NavigationItem(
            title = "Add",
            selectedIcon = Icons.Filled.AddCircle,
            unselectedIcon = Icons.Outlined.AddCircle,
            hasNews = true,
        ),
        NavigationItem(
            title = "Notification",
            selectedIcon = Icons.Filled.Notifications,
            unselectedIcon = Icons.Outlined.Notifications,
            hasNews = false,
            badgeCount = 45
        ),
        NavigationItem(
            title = "Home",
            selectedIcon = Icons.Filled.Home,
            unselectedIcon = Icons.Outlined.Home,
            hasNews = false,
        ),
    )
    val windowClass = calculateWindowSizeClass(mainActivity)
    val showNavigationRail = windowClass.widthSizeClass != WindowWidthSizeClass.Compact
    var selectedItemIndex by rememberSaveable {
        mutableStateOf(0)
    }

    Surface(
        modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background
    ) {
        Scaffold(
            bottomBar = {
                if (!showNavigationRail) {
                    // NavigationBar()
                }
            }, modifier = Modifier.fillMaxSize()
        ) { it ->
            LazyColumn(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(it)
                    .padding(
                        start = if (showNavigationRail) 80.dp else 0.dp
                    )

            ) {
                items(50) {
                    Text(
                        text = "Hello Learner $it",
                        modifier = Modifier.padding(16.dp),
                    )
                }
            }
            if (showNavigationRail) {
                // to define navigation Rail here
            }
        }
    }

}

@Composable
fun NavigationSideBar(
    items: List<NavigationItem>, selectedItemIndex: Int, onNavigate: (Int) -> Unit
) {
    NavigationRail(
        header = {
            // to define header here
        },
    ) {
        Column(
            modifier = Modifier.fillMaxHeight(),
            verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.CenterVertically)
        ) {
            items.forEachIndexed { index, item ->
                NavigationRailItem(
                    selected = selectedItemIndex == index,
                    onClick = {
                        onNavigate(index)
                    },
                    icon = {
                        NavigationIcon(
                            item = item, selected = selectedItemIndex == index
                        )
                    },
                    label = {
                        Text(text = item.title)
                    },
                )
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun NavigationIcon(
    item: NavigationItem, selected: Boolean
) {
    BadgedBox(badge = {
        if (item.badgeCount != null) {
            Badge {
                Text(text = item.badgeCount.toString())
            }
        } else if (item.hasNews) {
            Badge()
        }
    }) {
        Icon(
            imageVector = if (selected) item.selectedIcon else item.unselectedIcon,
            contentDescription = item.title
        )
    }
}

    NavigationRail(
        header = {
            IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Default.Menu, contentDescription = "Menu"
                )
            }
            FloatingActionButton(
                onClick = { /*TODO*/ },
                elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
            ) {
                Icon(
                    imageVector = Icons.Outlined.Edit, contentDescription = "Edit"
                )
            }
        },
        modifier = Modifier
            .background(MaterialTheme.colorScheme.inverseOnSurface)
            .offset(x = (-1).dp)
    ) {

                // existing code 
     }