Skip to content

Commit 56a96a8

Browse files
pekingmeleticiarossi
pekingme
authored and
leticiarossi
committed
[NavRail] Added Expressive styles.
PiperOrigin-RevId: 749159805
1 parent 12a136c commit 56a96a8

File tree

8 files changed

+171
-8
lines changed

8 files changed

+171
-8
lines changed

‎lib/java/com/google/android/material/dialog/res/values/themes_base.xml

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,12 @@
6464
<item name="materialButtonGroupStyle">@style/Widget.Material3Expressive.MaterialButtonGroup</item>
6565
<item name="materialButtonToggleGroupStyle">@style/Widget.Material3Expressive.MaterialButtonToggleGroup</item>
6666

67+
<item name="bottomNavigationStyle">@style/Widget.Material3Expressive.BottomNavigationView</item>
68+
<item name="navigationRailStyle">@style/Widget.Material3Expressive.NavigationRailView</item>
69+
6770
<item name="toolbarStyle">@style/Widget.Material3Expressive.Toolbar</item>
6871
<item name="toolbarSurfaceStyle">@style/Widget.Material3Expressive.Toolbar.Surface</item>
6972

70-
<item name="bottomNavigationStyle">@style/Widget.Material3Expressive.BottomNavigationView</item>
71-
7273
<!-- Top App Bars. -->
7374
<item name="collapsingToolbarLayoutMediumSize">@dimen/m3_comp_app_bar_medium_flexible_container_height</item>
7475
<item name="collapsingToolbarLayoutLargeSize">@dimen/m3_comp_app_bar_large_flexible_container_height</item>
@@ -114,11 +115,12 @@
114115
<item name="materialButtonGroupStyle">@style/Widget.Material3Expressive.MaterialButtonGroup</item>
115116
<item name="materialButtonToggleGroupStyle">@style/Widget.Material3Expressive.MaterialButtonToggleGroup</item>
116117

118+
<item name="bottomNavigationStyle">@style/Widget.Material3Expressive.BottomNavigationView</item>
119+
<item name="navigationRailStyle">@style/Widget.Material3Expressive.NavigationRailView</item>
120+
117121
<item name="toolbarStyle">@style/Widget.Material3Expressive.Toolbar</item>
118122
<item name="toolbarSurfaceStyle">@style/Widget.Material3Expressive.Toolbar.Surface</item>
119123

120-
<item name="bottomNavigationStyle">@style/Widget.Material3Expressive.BottomNavigationView</item>
121-
122124
<!-- Top App Bars. -->
123125
<item name="collapsingToolbarLayoutMediumSize">@dimen/m3_comp_app_bar_medium_flexible_container_height</item>
124126
<item name="collapsingToolbarLayoutLargeSize">@dimen/m3_comp_app_bar_large_flexible_container_height</item>

‎lib/java/com/google/android/material/navigationrail/res/color/m3expressive_nav_rail_item_icon_tint.xml

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
18+
<!-- Active item -->
19+
<item android:color="@macro/m3_comp_nav_rail_item_active_icon_color"
20+
android:state_checked="true"/>
21+
22+
<!-- Inactive item -->
23+
<item android:color="@macro/m3_comp_nav_rail_item_inactive_icon_color"/>
24+
</selector>

‎lib/java/com/google/android/material/navigationrail/res/color/m3expressive_nav_rail_item_label_tint.xml

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
18+
<!-- Active item -->
19+
<item android:color="@macro/m3_comp_nav_rail_item_active_label_text_color"
20+
android:state_checked="true"/>
21+
22+
<!-- Inactive item -->
23+
<item android:color="@macro/m3_comp_nav_rail_item_inactive_label_text_color"/>
24+
</selector>

‎lib/java/com/google/android/material/navigationrail/res/color/m3expressive_nav_rail_item_ripple_tint.xml

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
18+
19+
<!-- Selected. -->
20+
<item android:alpha="@dimen/m3_ripple_pressed_alpha"
21+
android:color="@macro/m3_comp_nav_rail_item_active_pressed_state_layer_color"
22+
android:state_pressed="true" android:state_selected="true"/>
23+
<item android:alpha="@dimen/m3_ripple_focused_alpha"
24+
android:color="@macro/m3_comp_nav_rail_item_active_focused_state_layer_color"
25+
android:state_focused="true" android:state_selected="true"/>
26+
<item android:alpha="@dimen/m3_ripple_hovered_alpha"
27+
android:color="@macro/m3_comp_nav_rail_item_active_hovered_state_layer_color"
28+
android:state_hovered="true" android:state_selected="true"/>
29+
30+
<!-- Unselected. -->
31+
<item android:alpha="@dimen/m3_ripple_pressed_alpha"
32+
android:color="@macro/m3_comp_nav_rail_item_inactive_pressed_state_layer_color"
33+
android:state_pressed="true"/>
34+
<item android:alpha="@dimen/m3_ripple_focused_alpha"
35+
android:color="@macro/m3_comp_nav_rail_item_inactive_focused_state_layer_color"
36+
android:state_focused="true"/>
37+
<item android:alpha="@dimen/m3_ripple_hovered_alpha"
38+
android:color="@macro/m3_comp_nav_rail_item_inactive_hovered_state_layer_color"
39+
android:state_hovered="true"/>
40+
<item android:color="@android:color/transparent"/>
41+
</selector>

‎lib/java/com/google/android/material/navigationrail/res/values/dimens.xml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,13 @@
4848
<dimen name="m3_navigation_rail_max_expanded_width">360dp</dimen>
4949
<dimen name="m3_navigation_rail_expanded_item_spacing">0dp</dimen>
5050

51+
<dimen name="m3expressive_nav_rail_item_min_height">@dimen/m3_comp_nav_rail_item_container_height</dimen>
52+
<dimen name="m3expressive_nav_rail_min_width">@dimen/m3_comp_nav_rail_collapsed_container_width</dimen>
53+
<dimen name="m3expressive_nav_rail_content_margin_top">@dimen/m3_comp_nav_rail_collapsed_top_space</dimen>
54+
<dimen name="m3expressive_nav_rail_header_items_margin">@dimen/m3_comp_nav_rail_item_header_space_minimum</dimen>
55+
<dimen name="m3expressive_nav_rail_item_vertical_padding">@dimen/m3_comp_nav_rail_item_container_vertical_space</dimen>
56+
<dimen name="m3expressive_nav_rail_item_spacing">@dimen/m3_comp_nav_rail_collapsed_item_vertical_space</dimen>
57+
<!-- TODO:b/373943921 - integrate tokens when ready -->
58+
<dimen name="m3expressive_nav_rail_item_leading_trailing_padding">20dp</dimen>
59+
5160
</resources>

‎lib/java/com/google/android/material/navigationrail/res/values/styles.xml

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,54 @@
1616
-->
1717
<resources>
1818

19+
<!-- Styles for M3 Expressive NavigationRailView. -->
20+
21+
<style name="Widget.Material3Expressive.NavigationRailView" parent="Widget.Material3.NavigationRailView">
22+
<item name="collapsedItemMinHeight">@dimen/m3expressive_nav_rail_item_min_height</item>
23+
<item name="expandedItemMinHeight">@dimen/m3_comp_nav_rail_item_short_container_height</item>
24+
<item name="expandedMinWidth">@dimen/m3_comp_nav_rail_expanded_container_width_minimum</item>
25+
<item name="expandedMaxWidth">@dimen/m3_comp_nav_rail_expanded_container_width_maximum</item>
26+
<item name="android:background">@macro/m3_comp_nav_rail_collapsed_container_color</item>
27+
<item name="elevation">@dimen/m3_comp_nav_rail_collapsed_container_elevation</item>
28+
<item name="android:minWidth">@dimen/m3expressive_nav_rail_min_width</item>
29+
<item name="itemPaddingTop">@dimen/m3expressive_nav_rail_item_vertical_padding</item>
30+
<item name="itemPaddingBottom">@dimen/m3expressive_nav_rail_item_vertical_padding</item>
31+
<item name="contentMarginTop">@dimen/m3expressive_nav_rail_content_margin_top</item>
32+
<item name="headerMarginBottom">@dimen/m3expressive_nav_rail_header_items_margin</item>
33+
<item name="itemSpacing">@dimen/m3expressive_nav_rail_item_spacing</item>
34+
<item name="measureBottomPaddingFromLabelBaseline">false</item>
35+
<item name="itemTextColor">@color/m3expressive_nav_rail_item_label_tint</item>
36+
<item name="itemIconTint">@color/m3expressive_nav_rail_item_icon_tint</item>
37+
<item name="itemRippleColor">@color/m3expressive_nav_rail_item_ripple_tint</item>
38+
<item name="itemTextAppearanceActiveBoldEnabled">false</item>
39+
<item name="itemActiveIndicatorStyle">@style/Widget.Material3Expressive.NavigationRailView.ActiveIndicator</item>
40+
<item name="itemIconSize">@dimen/m3_comp_nav_rail_item_icon_size</item>
41+
<item name="activeIndicatorLabelPadding">@dimen/m3_comp_nav_rail_item_vertical_icon_label_space</item>
42+
<item name="horizontalItemTextAppearanceActive">@macro/m3_comp_nav_rail_item_horizontal_label_text_font</item>
43+
<item name="horizontalItemTextAppearanceInactive">@macro/m3_comp_nav_rail_item_horizontal_label_text_font</item>
44+
<item name="itemTextAppearanceActive">@macro/m3_comp_nav_rail_item_vertical_label_text_font</item>
45+
<item name="itemTextAppearanceInactive">@macro/m3_comp_nav_rail_item_vertical_label_text_font</item>
46+
<item name="scrollingEnabled">true</item>
47+
<item name="labelFontScalingEnabled">true</item>
48+
<item name="labelMaxLines">999</item>
49+
<item name="labelVisibilityMode">labeled</item>
50+
<item name="iconLabelHorizontalSpacing">@dimen/m3_comp_nav_rail_item_horizontal_icon_label_space</item>
51+
</style>
52+
53+
<style name="Widget.Material3Expressive.NavigationRailView.ActiveIndicator" parent="Widget.Material3.NavigationRailView.ActiveIndicator">
54+
<item name="android:color">@macro/m3_comp_nav_rail_item_active_indicator_color</item>
55+
<item name="shapeAppearance">@style/ShapeAppearance.M3.Comp.NavRail.Item.ActiveIndicator.Shape</item>
56+
<item name="android:width">@dimen/m3_comp_nav_rail_item_vertical_active_indicator_width</item>
57+
<item name="android:height">@dimen/m3_comp_nav_rail_item_vertical_active_indicator_height</item>
58+
<item name="expandedHeight">@dimen/m3_comp_nav_rail_item_horizontal_active_indicator_height</item>
59+
<item name="expandedWidth">wrap_content</item>
60+
<item name="expandedMarginHorizontal">@dimen/m3expressive_nav_rail_item_leading_trailing_padding</item>
61+
<item name="expandedActiveIndicatorPaddingStart">@dimen/m3_comp_nav_rail_item_horizontal_full_width_leading_space</item>
62+
<item name="expandedActiveIndicatorPaddingEnd">@dimen/m3_comp_nav_rail_item_horizontal_full_width_trailing_space</item>
63+
<item name="expandedActiveIndicatorPaddingTop">@dimen/m3_comp_nav_rail_item_vertical_leading_space</item>
64+
<item name="expandedActiveIndicatorPaddingBottom">@dimen/m3_comp_nav_rail_item_vertical_trailing_space</item>
65+
</style>
66+
1967
<!-- Styles for M3 NavigationRailView. -->
2068

2169
<style name="Widget.Material3.NavigationRailView" parent="Widget.MaterialComponents.NavigationRailView">

‎lib/java/com/google/android/material/navigationrail/res/values/tokens.xml

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,11 @@
4848
<dimen name="m3_comp_nav_rail_collapsed_item_vertical_space">4dp</dimen>
4949
<dimen name="m3_comp_nav_rail_collapsed_top_space">44dp</dimen>
5050

51+
<!-- Generated from token set (md.comp.nav-rail.expanded) in context (platform=android, audience=3p). -->
52+
<dimen name="m3_comp_nav_rail_expanded_container_width_minimum">220dp</dimen>
53+
<dimen name="m3_comp_nav_rail_expanded_container_width_maximum">360dp</dimen>
54+
<style name="ShapeAppearance.M3.Comp.NavRail.Expanded.Container.Shape" parent="ShapeAppearance.M3.Sys.Shape.Corner.None"/>
55+
5156
<!-- Generated from token set (md.comp.nav-rail.item) in context (platform=android, audience=3p). -->
5257
<dimen name="m3_comp_nav_rail_item_icon_size">24dp</dimen>
5358
<style name="ShapeAppearance.M3.Comp.NavRail.Item.ActiveIndicator.Shape" parent="ShapeAppearance.M3.Sys.Shape.Corner.Full"/>
@@ -64,4 +69,12 @@
6469
<dimen name="m3_comp_nav_rail_item_vertical_leading_space">16dp</dimen>
6570
<dimen name="m3_comp_nav_rail_item_vertical_trailing_space">16dp</dimen>
6671

72+
<!-- Generated from token set (md.comp.nav-rail.item.horizontal) in context (platform=android,
73+
audience=3p). -->
74+
<macro name="m3_comp_nav_rail_item_horizontal_label_text_font">?attr/textAppearanceLabelLarge</macro>
75+
<dimen name="m3_comp_nav_rail_item_horizontal_active_indicator_height">56dp</dimen>
76+
<dimen name="m3_comp_nav_rail_item_horizontal_full_width_leading_space">16dp</dimen>
77+
<dimen name="m3_comp_nav_rail_item_horizontal_full_width_trailing_space">16dp</dimen>
78+
<dimen name="m3_comp_nav_rail_item_horizontal_icon_label_space">8dp</dimen>
79+
6780
</resources>

‎lib/java/com/google/android/material/theme/res/values/themes_base.xml

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,11 +68,12 @@
6868
<item name="materialButtonGroupStyle">@style/Widget.Material3Expressive.MaterialButtonGroup</item>
6969
<item name="materialButtonToggleGroupStyle">@style/Widget.Material3Expressive.MaterialButtonToggleGroup</item>
7070

71+
<item name="bottomNavigationStyle">@style/Widget.Material3Expressive.BottomNavigationView</item>
72+
<item name="navigationRailStyle">@style/Widget.Material3Expressive.NavigationRailView</item>
73+
7174
<item name="toolbarStyle">@style/Widget.Material3Expressive.Toolbar</item>
7275
<item name="toolbarSurfaceStyle">@style/Widget.Material3Expressive.Toolbar.Surface</item>
7376

74-
<item name="bottomNavigationStyle">@style/Widget.Material3Expressive.BottomNavigationView</item>
75-
7677
<!-- Top App Bars. -->
7778
<item name="collapsingToolbarLayoutMediumSize">@dimen/m3_comp_app_bar_medium_flexible_container_height</item>
7879
<item name="collapsingToolbarLayoutLargeSize">@dimen/m3_comp_app_bar_large_flexible_container_height</item>
@@ -125,11 +126,12 @@
125126
<item name="materialButtonGroupStyle">@style/Widget.Material3Expressive.MaterialButtonGroup</item>
126127
<item name="materialButtonToggleGroupStyle">@style/Widget.Material3Expressive.MaterialButtonToggleGroup</item>
127128

129+
<item name="bottomNavigationStyle">@style/Widget.Material3Expressive.BottomNavigationView</item>
130+
<item name="navigationRailStyle">@style/Widget.Material3Expressive.NavigationRailView</item>
131+
128132
<item name="toolbarStyle">@style/Widget.Material3Expressive.Toolbar</item>
129133
<item name="toolbarSurfaceStyle">@style/Widget.Material3Expressive.Toolbar.Surface</item>
130134

131-
<item name="bottomNavigationStyle">@style/Widget.Material3Expressive.BottomNavigationView</item>
132-
133135
<!-- Top App Bars. -->
134136
<item name="collapsingToolbarLayoutMediumSize">@dimen/m3_comp_app_bar_medium_flexible_container_height</item>
135137
<item name="collapsingToolbarLayoutLargeSize">@dimen/m3_comp_app_bar_large_flexible_container_height</item>

0 commit comments

Comments
 (0)