How to create Navigation rail?
Navigation Rail is most useful components of Material Design if our apps are used on a device of larger screen such as tablet and desktop. It make easy for users to navigate. It looks like a sidebar and can contains three to seven app destination items. We use NavigationRailItem to represent a destination within a Navigation Rail.
It should be placed at the side edge of large screen devices such as tablets or desktop when an application has three to seven top-level destinations.
In this tutorial we will learn to create Navigation Rail.
Create a New Project and select Empty Activity In my case, application name is coding Bihar you can use any other name.
MainActivity
Copy this code →
package com.example.codingbihar
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.example.codingbihar.ui.theme.CodingBiharTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
CodingBiharTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
NavigationRails()
}
}
}
}
}Create a separate file for Navigation Rail and named it as NavigationRails
NavigationRails
Copy this code →
package com.example.codingbihar
import androidx.compose.foundation.layout.Row
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationRail
import androidx.compose.material3.NavigationRailItem
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
@Composable
fun NavigationRails() {
var selectedItem by remember { mutableStateOf(0) }
val items = listOf("Home", "Search", "Settings")
val icons = listOf(Icons.Filled.Home,
Icons.Filled.Search, Icons.Filled.Settings)
Row {
NavigationRail {
items.forEachIndexed { index, item ->
NavigationRailItem(
icon = { Icon(icons[index], contentDescription = item) },
label = { Text(item) },
selected = selectedItem == index,
onClick = { selectedItem = index }
)
}
}
}
}OUTPUT : -
