Skip to content

Commit 76936c4

Browse files
imhappikendrickumstattd
authored andcommitted
[BottomNavigationBar] Update catalog demo to demonstrate adaptive bottom navigation bar
PiperOrigin-RevId: 723671728
1 parent 4657afb commit 76936c4

File tree

3 files changed

+48
-0
lines changed

3 files changed

+48
-0
lines changed
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
~ Copyright 2025 The Android Open Source Project
4+
~
5+
~ Licensed under the Apache License, Version 2.0 (the "License");
6+
~ you may not use this file except in compliance with the License.
7+
~ You may obtain a copy of the License at
8+
~
9+
~ https://www.apache.org/licenses/LICENSE-2.0
10+
~
11+
~ Unless required by applicable law or agreed to in writing, software
12+
~ distributed under the License is distributed on an "AS IS" BASIS,
13+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
~ See the License for the specific language governing permissions and
15+
~ limitations under the License.
16+
-->
17+
<com.google.android.material.bottomnavigation.BottomNavigationView
18+
xmlns:android="http://schemas.android.com/apk/res/android"
19+
xmlns:app="http://schemas.android.com/apk/res-auto"
20+
android:id="@+id/cat_bottom_nav"
21+
android:layout_width="match_parent"
22+
android:layout_height="wrap_content"
23+
android:layout_gravity="bottom"
24+
app:itemIconGravity="start"
25+
app:itemGravity="center"
26+
app:menu="@menu/bottom_nav_menu"/>

docs/components/BottomNavigation.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -336,6 +336,28 @@ See the full list of
336336
and
337337
[bottom navigation attributes](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomnavigation/res/values/attrs.xml).
338338

339+
### Bottom Navigation on larger screens
340+
341+
On medium screen sizes and larger, bottom navigation bars are recommended to be
342+
a horizontal item configuration, by setting `app:itemIconGravity` to be `start`
343+
instead of `top`. You can do this by
344+
[setting alternative layouts identified by resource qualifiers](https://developer.android.com/develop/ui/views/layout/responsive-adaptive-design-with-views#alternative_layout_resources).
345+
346+
Here's an example:
347+
348+
```xml
349+
<com.google.android.material.bottomnavigation.BottomNavigationView
350+
android:id="@+id/bottom_navigation_bar"
351+
android:layout_width="match_parent"
352+
android:layout_height="wrap_content"
353+
android:layout_gravity="bottom"
354+
app:itemIconGravity="start"
355+
app:itemGravity="center"
356+
app:menu="@menu/bottom_navigation_menu"/>
357+
```
358+
359+
!["Horizontal bottom navigation bar"](assets/bottomnav/bottomnav_horizontal.png)
360+
339361
## Theming a bottom navigation bar
340362

341363
Bottom navigation supports
21.8 KB
Loading

0 commit comments

Comments
 (0)