Use consistent positioning
On Android, you should place your Toolbar and BottomNavigationView on the same position of each screen.
kotlin
Not available, contribute!In Jetpack Compose, you should place your TopAppBar) and BottomAppBar) in the same position on each screen. You can use Scaffold) to place such Composables consistently.
kotlin
Scaffold(
topBar = { TopAppBar( /* top app bar config */ ) },
bottomBar = { BottomAppBar { /* bottom app bar content */ } }
) { paddingValues ->
// Scaffold content...
}On iOS, you should place your UINavigationBar and UITabBar on the same position of each screen.
swift
Not available, contribute!In SwiftUI, you should place frequently used common views, for example NavigationStack and TabView, on the same position of each screen.
In this SwiftUI code sample, we place the commonly used Cancel and Save button elements in logical and consistent locations: the Cancel button on the left and the Save button on the right of the navigation bar.
swift
var body: some View {
NavigationView {
EditProfileView()
.navigationTitle("Edit Profile")
.navigationBarItems(
leading: CancelButton(action: {
// Perform cancel action
}),
trailing: SaveButton(action: {
// Perform save action here
})
)
}
}In React Native, you should always place your Headers and Tabs on the same position of each screen. We also recommend using React Navigation to re-use navigation components on all of your screes.
jsx
Not available, contribute!In MAUI, the navigation items will be placed at the proper location when using NavigationPage and/or TabbedPage. By using these components, you achieve consistency across the app.
You can set up the TabBar placement by following the TabbedPage toolbar placement guide.
csharp
// No code requiredIn Xamarin, you should always place your Toolbar and TabbedPage on the same position of each screen.
csharp
Not available, contribute!