Skip to content

Commit

Permalink
[BottomNavigation] Integrated tokens.
Browse files Browse the repository at this point in the history
Created a new copy of CSL of icon/text/ripple tint for navigation bar. Before this change, they are shared with navigation rail.
Changed item text appearance from textAppearanceTitleSmall to textAppearanceLabelMedium

PiperOrigin-RevId: 503210110
  • Loading branch information
pekingme authored and raajkumars committed Jan 24, 2023
1 parent c484ea7 commit 355702f
Show file tree
Hide file tree
Showing 10 changed files with 190 additions and 12 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
~ Copyright 2021 The Android Open Source Project
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ https://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Active item -->
<item android:color="@macro/m3_comp_navigation_bar_active_pressed_icon_color"
android:state_pressed="true" android:state_checked="true"/>
<item android:color="@macro/m3_comp_navigation_bar_active_focus_icon_color"
android:state_focused="true" android:state_checked="true"/>
<item android:color="@macro/m3_comp_navigation_bar_active_hover_icon_color"
android:state_hovered="true" android:state_checked="true"/>
<item android:color="@macro/m3_comp_navigation_bar_active_icon_color"
android:state_checked="true"/>

<!-- Inactive item -->
<item android:color="@macro/m3_comp_navigation_bar_inactive_pressed_icon_color"
android:state_pressed="true"/>
<item android:color="@macro/m3_comp_navigation_bar_inactive_focus_icon_color"
android:state_focused="true"/>
<item android:color="@macro/m3_comp_navigation_bar_inactive_hover_icon_color"
android:state_hovered="true"/>
<item android:color="@macro/m3_comp_navigation_bar_inactive_icon_color"/>
</selector>
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
~ Copyright 2021 The Android Open Source Project
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ https://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Active item -->
<item android:color="@macro/m3_comp_navigation_bar_active_pressed_label_text_color"
android:state_pressed="true" android:state_checked="true"/>
<item android:color="@macro/m3_comp_navigation_bar_active_focus_label_text_color"
android:state_focused="true" android:state_checked="true"/>
<item android:color="@macro/m3_comp_navigation_bar_active_hover_label_text_color"
android:state_hovered="true" android:state_checked="true"/>
<item android:color="@macro/m3_comp_navigation_bar_active_label_text_color"
android:state_checked="true"/>

<!-- Inactive item -->
<item android:color="@macro/m3_comp_navigation_bar_inactive_pressed_label_text_color"
android:state_pressed="true"/>
<item android:color="@macro/m3_comp_navigation_bar_inactive_focus_label_text_color"
android:state_focused="true"/>
<item android:color="@macro/m3_comp_navigation_bar_inactive_hover_label_text_color"
android:state_hovered="true"/>
<item android:color="@macro/m3_comp_navigation_bar_inactive_label_text_color"/>
</selector>
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
~ Copyright 2021 The Android Open Source Project
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ https://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<!-- Selected. -->
<item android:alpha="@dimen/m3_comp_navigation_bar_pressed_state_layer_opacity"
android:color="@macro/m3_comp_navigation_bar_active_pressed_state_layer_color"
android:state_pressed="true" android:state_selected="true"/>
<item android:alpha="@dimen/m3_comp_navigation_bar_focus_state_layer_opacity"
android:color="@macro/m3_comp_navigation_bar_active_focus_state_layer_color"
android:state_focused="true" android:state_selected="true"/>
<item android:alpha="@dimen/m3_comp_navigation_bar_hover_state_layer_opacity"
android:color="@macro/m3_comp_navigation_bar_active_hover_state_layer_color"
android:state_hovered="true" android:state_selected="true"/>

<!-- Unselected. -->
<item android:alpha="@dimen/m3_comp_navigation_bar_pressed_state_layer_opacity"
android:color="@macro/m3_comp_navigation_bar_inactive_pressed_state_layer_color"
android:state_pressed="true"/>
<item android:alpha="@dimen/m3_comp_navigation_bar_focus_state_layer_opacity"
android:color="@macro/m3_comp_navigation_bar_inactive_focus_state_layer_color"
android:state_focused="true"/>
<item android:alpha="@dimen/m3_comp_navigation_bar_hover_state_layer_opacity"
android:color="@macro/m3_comp_navigation_bar_inactive_hover_state_layer_color"
android:state_hovered="true"/>
<item android:color="@android:color/transparent"/>
</selector>

Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,12 @@
<dimen name="design_bottom_navigation_active_item_max_width">168dp</dimen>
<dimen name="design_bottom_navigation_active_item_min_width">96dp</dimen>

<dimen name="m3_bottom_nav_min_height">80dp</dimen>
<dimen name="m3_bottom_nav_min_height">@dimen/m3_comp_navigation_bar_container_height</dimen>
<dimen name="m3_bottom_nav_item_padding_top">12dp</dimen>
<dimen name="m3_bottom_nav_item_padding_bottom">16dp</dimen>

<dimen name="m3_bottom_nav_item_active_indicator_width">64dp</dimen>
<dimen name="m3_bottom_nav_item_active_indicator_height">32dp</dimen>
<dimen name="m3_bottom_nav_item_active_indicator_width">@dimen/m3_comp_navigation_bar_active_indicator_width</dimen>
<dimen name="m3_bottom_nav_item_active_indicator_height">@dimen/m3_comp_navigation_bar_active_indicator_height</dimen>
<dimen name="m3_bottom_nav_item_active_indicator_margin_horizontal">4dp</dimen>

</resources>
Original file line number Diff line number Diff line change
Expand Up @@ -65,13 +65,14 @@

<!-- Style for Material 3 Bottom Navigation View. -->
<style name="Base.Widget.Material3.BottomNavigationView" parent="Widget.MaterialComponents.BottomNavigationView">
<item name="android:background">?attr/colorSurface</item>
<item name="android:background">@macro/m3_comp_navigation_bar_container_color</item>
<item name="backgroundTint">@null</item>
<item name="elevation">@dimen/m3_sys_elevation_level2</item>
<item name="elevation">@dimen/m3_comp_navigation_bar_container_elevation</item>
<item name="itemActiveIndicatorStyle">@style/Widget.Material3.BottomNavigationView.ActiveIndicator</item>
<item name="itemTextAppearanceInactive">?attr/textAppearanceTitleSmall</item>
<item name="itemTextAppearanceActive">?attr/textAppearanceTitleSmall</item>
<item name="itemTextAppearanceInactive">@macro/m3_comp_navigation_bar_label_text_type</item>
<item name="itemTextAppearanceActive">@macro/m3_comp_navigation_bar_label_text_type</item>
<item name="itemRippleColor">@color/m3_navigation_bar_ripple_color_selector</item>
<item name="itemIconSize">@dimen/m3_comp_navigation_bar_icon_size</item>
<item name="itemIconTint">@color/m3_navigation_bar_item_with_indicator_icon_tint</item>
<item name="itemTextColor">@color/m3_navigation_bar_item_with_indicator_label_tint</item>
<item name="itemPaddingTop">@dimen/m3_bottom_nav_item_padding_top</item>
Expand All @@ -87,7 +88,7 @@
<item name="android:width">@dimen/m3_bottom_nav_item_active_indicator_width</item>
<item name="android:height">@dimen/m3_bottom_nav_item_active_indicator_height</item>
<item name="marginHorizontal">@dimen/m3_bottom_nav_item_active_indicator_margin_horizontal</item>
<item name="shapeAppearance">@style/ShapeAppearance.Material3.Corner.Full</item>
<item name="android:color">?attr/colorSecondaryContainer</item>
<item name="shapeAppearance">@style/ShapeAppearance.M3.Comp.NavigationBar.ActiveIndicator.Shape</item>
<item name="android:color">@macro/m3_comp_navigation_bar_active_indicator_color</item>
</style>
</resources>
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
~ Copyright (C) 2022 The Android Open Source Project
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<!-- AUTOGENERATED FILE. DO NOT MODIFY. -->
<!-- Version: v0.147 -->

<resources>

<!-- Generated from token set (md.comp.navigation-bar) in context (platform=android, audience=3p). -->
<!-- Enabled - Container -->
<macro name="m3_comp_navigation_bar_container_color">?attr/colorSurface</macro>
<dimen name="m3_comp_navigation_bar_container_height">80dp</dimen>
<dimen name="m3_comp_navigation_bar_container_elevation">@dimen/m3_sys_elevation_level2</dimen>
<!-- Enabled - Label text -->
<macro name="m3_comp_navigation_bar_label_text_type">?attr/textAppearanceLabelMedium</macro>
<macro name="m3_comp_navigation_bar_active_label_text_color">?attr/colorOnSurface</macro>
<macro name="m3_comp_navigation_bar_inactive_label_text_color">?attr/colorOnSurfaceVariant</macro>
<macro name="m3_comp_navigation_bar_active_hover_label_text_color">?attr/colorOnSurface</macro>
<macro name="m3_comp_navigation_bar_inactive_hover_label_text_color">?attr/colorOnSurface</macro>
<macro name="m3_comp_navigation_bar_active_focus_label_text_color">?attr/colorOnSurface</macro>
<macro name="m3_comp_navigation_bar_inactive_focus_label_text_color">?attr/colorOnSurface</macro>
<macro name="m3_comp_navigation_bar_active_pressed_label_text_color">?attr/colorOnSurface</macro>
<macro name="m3_comp_navigation_bar_inactive_pressed_label_text_color">?attr/colorOnSurface</macro>
<!-- Enabled - Icon -->
<dimen name="m3_comp_navigation_bar_icon_size">24dp</dimen>
<macro name="m3_comp_navigation_bar_active_icon_color">?attr/colorOnSecondaryContainer</macro>
<macro name="m3_comp_navigation_bar_inactive_icon_color">?attr/colorOnSurfaceVariant</macro>
<macro name="m3_comp_navigation_bar_active_hover_icon_color">?attr/colorOnSecondaryContainer</macro>
<macro name="m3_comp_navigation_bar_inactive_hover_icon_color">?attr/colorOnSurface</macro>
<macro name="m3_comp_navigation_bar_active_focus_icon_color">?attr/colorOnSecondaryContainer</macro>
<macro name="m3_comp_navigation_bar_inactive_focus_icon_color">?attr/colorOnSurface</macro>
<macro name="m3_comp_navigation_bar_active_pressed_icon_color">?attr/colorOnSecondaryContainer</macro>
<macro name="m3_comp_navigation_bar_inactive_pressed_icon_color">?attr/colorOnSurface</macro>
<!-- Enabled - Active indicator -->
<macro name="m3_comp_navigation_bar_active_indicator_color">?attr/colorSecondaryContainer</macro>
<dimen name="m3_comp_navigation_bar_active_indicator_height">32dp</dimen>
<dimen name="m3_comp_navigation_bar_active_indicator_width">64dp</dimen>
<style name="ShapeAppearance.M3.Comp.NavigationBar.ActiveIndicator.Shape" parent="ShapeAppearance.M3.Sys.Shape.Corner.Full"/>
<!-- Enabled - State layer -->
<macro name="m3_comp_navigation_bar_active_hover_state_layer_color">?attr/colorOnSurface</macro>
<macro name="m3_comp_navigation_bar_inactive_hover_state_layer_color">?attr/colorOnSurface</macro>
<dimen name="m3_comp_navigation_bar_hover_state_layer_opacity">@dimen/m3_sys_state_hover_state_layer_opacity</dimen>
<macro name="m3_comp_navigation_bar_active_focus_state_layer_color">?attr/colorOnSurface</macro>
<macro name="m3_comp_navigation_bar_inactive_focus_state_layer_color">?attr/colorOnSurface</macro>
<dimen name="m3_comp_navigation_bar_focus_state_layer_opacity">@dimen/m3_sys_state_focus_state_layer_opacity</dimen>
<macro name="m3_comp_navigation_bar_active_pressed_state_layer_color">?attr/colorOnSurface</macro>
<macro name="m3_comp_navigation_bar_inactive_pressed_state_layer_color">?attr/colorOnSurface</macro>
<dimen name="m3_comp_navigation_bar_pressed_state_layer_opacity">@dimen/m3_sys_state_pressed_state_layer_opacity</dimen>

</resources>
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,10 @@
<item name="backgroundTint">@null</item>
<item name="elevation">@dimen/m3_navigation_rail_elevation</item>
<item name="itemActiveIndicatorStyle">@style/Widget.Material3.NavigationRailView.ActiveIndicator</item>
<item name="itemRippleColor">@color/m3_navigation_bar_ripple_color_selector</item>
<item name="itemRippleColor">@color/m3_navigation_rail_ripple_color_selector</item>
<item name="itemIconSize">@dimen/m3_comp_navigation_rail_icon_size</item>
<item name="itemIconTint">@color/m3_navigation_bar_item_with_indicator_icon_tint</item>
<item name="itemTextColor">@color/m3_navigation_bar_item_with_indicator_label_tint</item>
<item name="itemIconTint">@color/m3_navigation_rail_item_with_indicator_icon_tint</item>
<item name="itemTextColor">@color/m3_navigation_rail_item_with_indicator_label_tint</item>
<item name="itemPaddingTop">@dimen/m3_navigation_rail_item_padding_top</item>
<item name="itemPaddingBottom">@dimen/m3_navigation_rail_item_padding_bottom</item>
<item name="itemMinHeight">@dimen/m3_navigation_rail_item_min_height</item>
Expand Down

0 comments on commit 355702f

Please sign in to comment.