Skip to content

Commit d0460f3

Browse files
pekingmepaulfthomas
authored andcommittedOct 17, 2022
[Tabs] Integrated tokens into M3 styles.
PiperOrigin-RevId: 481709158
1 parent 32f1118 commit d0460f3

13 files changed

+253
-27
lines changed
 

‎lib/java/com/google/android/material/tabs/res/color/m3_tabs_icon_color.xml

+3-2
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,9 @@
2020
android:state_enabled="false"/>
2121

2222
<!-- Selected -->
23-
<item android:color="?attr/colorPrimary" android:state_selected="true"/>
23+
<item android:color="@macro/m3_comp_primary_navigation_tab_with_icon_active_icon_color"
24+
android:state_selected="true"/>
2425

2526
<!-- Not selected -->
26-
<item android:color="?attr/colorOnSurfaceVariant"/>
27+
<item android:color="@macro/m3_comp_primary_navigation_tab_with_icon_inactive_icon_color"/>
2728
</selector>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
Copyright 2021 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+
<item android:alpha="@dimen/material_emphasis_disabled"
19+
android:color="?attr/colorOnSurface"
20+
android:state_enabled="false"/>
21+
22+
<!-- Selected -->
23+
<item android:color="@macro/m3_comp_secondary_navigation_tab_with_icon_active_icon_color"
24+
android:state_selected="true"/>
25+
26+
<!-- Not selected -->
27+
<item android:color="@macro/m3_comp_secondary_navigation_tab_with_icon_inactive_icon_color"/>
28+
</selector>

‎lib/java/com/google/android/material/tabs/res/color/m3_tabs_ripple_color.xml

+12-12
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@
2020

2121
<!-- Uses the primary state layer since tapping a selected tab keeps it
2222
selected. -->
23-
<item android:alpha="@dimen/m3_ripple_pressed_alpha"
24-
android:color="?attr/colorPrimary"
23+
<item android:alpha="@dimen/m3_comp_primary_navigation_tab_active_pressed_state_layer_opacity"
24+
android:color="@macro/m3_comp_primary_navigation_tab_active_pressed_state_layer_color"
2525
android:state_pressed="true" android:state_selected="true"/>
26-
<item android:alpha="@dimen/m3_ripple_focused_alpha"
27-
android:color="?attr/colorPrimary"
26+
<item android:alpha="@dimen/m3_comp_primary_navigation_tab_active_focus_state_layer_opacity"
27+
android:color="@macro/m3_comp_primary_navigation_tab_active_focus_state_layer_color"
2828
android:state_focused="true" android:state_selected="true"/>
29-
<item android:alpha="@dimen/m3_ripple_hovered_alpha"
30-
android:color="?attr/colorPrimary"
29+
<item android:alpha="@dimen/m3_comp_primary_navigation_tab_active_hover_state_layer_opacity"
30+
android:color="@macro/m3_comp_primary_navigation_tab_active_hover_state_layer_color"
3131
android:state_hovered="true" android:state_selected="true"/>
3232
<item android:alpha="@dimen/m3_ripple_default_alpha"
3333
android:color="?attr/colorPrimary"
@@ -37,14 +37,14 @@
3737

3838
<!-- Uses the primary state layer since tapping an non-selected tab will
3939
select it. -->
40-
<item android:alpha="@dimen/m3_ripple_selectable_pressed_alpha"
41-
android:color="?attr/colorPrimary"
40+
<item android:alpha="@dimen/m3_comp_primary_navigation_tab_inactive_pressed_state_layer_opacity"
41+
android:color="@macro/m3_comp_primary_navigation_tab_inactive_pressed_state_layer_color"
4242
android:state_pressed="true"/>
43-
<item android:alpha="@dimen/m3_ripple_focused_alpha"
44-
android:color="?attr/colorOnSurfaceVariant"
43+
<item android:alpha="@dimen/m3_comp_primary_navigation_tab_inactive_focus_state_layer_opacity"
44+
android:color="@macro/m3_comp_primary_navigation_tab_inactive_focus_state_layer_color"
4545
android:state_focused="true"/>
46-
<item android:alpha="@dimen/m3_ripple_hovered_alpha"
47-
android:color="?attr/colorOnSurfaceVariant"
46+
<item android:alpha="@dimen/m3_comp_primary_navigation_tab_inactive_hover_state_layer_opacity"
47+
android:color="@macro/m3_comp_primary_navigation_tab_inactive_hover_state_layer_color"
4848
android:state_hovered="true"/>
4949
<item android:alpha="@dimen/m3_ripple_default_alpha"
5050
android:color="?attr/colorOnSurfaceVariant"/>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
Copyright 2021 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+
21+
<!-- Uses the primary state layer since tapping a selected tab keeps it
22+
selected. -->
23+
<item android:alpha="@dimen/m3_comp_secondary_navigation_tab_pressed_state_layer_opacity"
24+
android:color="@macro/m3_comp_secondary_navigation_tab_pressed_state_layer_color"
25+
android:state_pressed="true" android:state_selected="true"/>
26+
<item android:alpha="@dimen/m3_comp_secondary_navigation_tab_focus_state_layer_opacity"
27+
android:color="@macro/m3_comp_secondary_navigation_tab_focus_state_layer_color"
28+
android:state_focused="true" android:state_selected="true"/>
29+
<item android:alpha="@dimen/m3_comp_secondary_navigation_tab_hover_state_layer_opacity"
30+
android:color="@macro/m3_comp_secondary_navigation_tab_hover_state_layer_color"
31+
android:state_hovered="true" android:state_selected="true"/>
32+
<item android:alpha="@dimen/m3_ripple_default_alpha"
33+
android:color="?attr/colorPrimary"
34+
android:state_selected="true"/>
35+
36+
<!-- Not selected -->
37+
38+
<!-- Uses the primary state layer since tapping an non-selected tab will
39+
select it. -->
40+
<item android:alpha="@dimen/m3_comp_secondary_navigation_tab_pressed_state_layer_opacity"
41+
android:color="@macro/m3_comp_secondary_navigation_tab_pressed_state_layer_color"
42+
android:state_pressed="true"/>
43+
<item android:alpha="@dimen/m3_comp_secondary_navigation_tab_focus_state_layer_opacity"
44+
android:color="@macro/m3_comp_secondary_navigation_tab_focus_state_layer_color"
45+
android:state_focused="true"/>
46+
<item android:alpha="@dimen/m3_comp_secondary_navigation_tab_hover_state_layer_opacity"
47+
android:color="@macro/m3_comp_secondary_navigation_tab_hover_state_layer_color"
48+
android:state_hovered="true"/>
49+
<item android:alpha="@dimen/m3_ripple_default_alpha"
50+
android:color="?attr/colorOnSurfaceVariant"/>
51+
52+
</selector>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
Copyright 2021 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+
<item android:alpha="@dimen/material_emphasis_disabled"
19+
android:color="?attr/colorOnSurface"
20+
android:state_enabled="false"/>
21+
22+
<!-- Selected -->
23+
<item android:color="@macro/m3_comp_primary_navigation_tab_with_label_text_active_label_text_color"
24+
android:state_selected="true"/>
25+
26+
<!-- Not selected -->
27+
<item android:color="@macro/m3_comp_primary_navigation_tab_with_label_text_inactive_label_text_color"/>
28+
</selector>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
Copyright 2021 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+
<item android:alpha="@dimen/material_emphasis_disabled"
19+
android:color="?attr/colorOnSurface"
20+
android:state_enabled="false"/>
21+
22+
<!-- Selected -->
23+
<item android:color="@macro/m3_comp_secondary_navigation_tab_active_label_text_color"
24+
android:state_selected="true"/>
25+
26+
<!-- Not selected -->
27+
<item android:color="@macro/m3_comp_secondary_navigation_tab_inactive_label_text_color"/>
28+
</selector>

‎lib/java/com/google/android/material/tabs/res/drawable-v21/m3_tabs_background.xml

+5-3
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,19 @@
1515
limitations under the License.
1616
-->
1717
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
18+
<!-- Fills the entire area with the divider's color first... -->
1819
<item>
1920
<shape
2021
android:shape="rectangle">
21-
<solid android:color="?attr/colorSurfaceVariant"/>
22+
<solid android:color="@macro/m3_comp_primary_navigation_tab_divider_color"/>
2223
</shape>
2324
</item>
25+
<!-- ..., then draws a rectangle with the container color to cover the area not for the divider. -->
2426
<item
25-
android:bottom="1dp">
27+
android:bottom="@dimen/m3_comp_primary_navigation_tab_divider_height">
2628
<shape
2729
android:shape="rectangle">
28-
<solid android:color="?attr/colorSurface"/>
30+
<solid android:color="@macro/m3_comp_primary_navigation_tab_container_color"/>
2931
</shape>
3032
</item>
3133
</layer-list>

‎lib/java/com/google/android/material/tabs/res/drawable-v23/m3_tabs_background.xml

+5-3
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,19 @@
1515
limitations under the License.
1616
-->
1717
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
18+
<!-- Fills the entire area with the container's color first... -->
1819
<item>
1920
<shape
2021
android:shape="rectangle">
21-
<solid android:color="?attr/colorSurface"/>
22+
<solid android:color="@macro/m3_comp_primary_navigation_tab_container_color"/>
2223
</shape>
2324
</item>
25+
<!-- ..., then draws a rectangle for the divider at the bottom. -->
2426
<item
2527
android:gravity="bottom">
2628
<shape>
27-
<size android:height="1dp" />
28-
<solid android:color="?attr/colorSurfaceVariant" />
29+
<size android:height="@dimen/m3_comp_primary_navigation_tab_divider_height" />
30+
<solid android:color="@macro/m3_comp_primary_navigation_tab_divider_color" />
2931
</shape>
3032
</item>
3133
</layer-list>

‎lib/java/com/google/android/material/tabs/res/drawable/m3_tabs_line_indicator.xml

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717

1818
<shape xmlns:android="http://schemas.android.com/apk/res/android"
1919
android:shape="rectangle">
20+
<!-- Color is assigned programmatically with the value of "tabIndicatorColor". -->
2021
<solid android:color="@android:color/white"/>
21-
<size android:height="2dp"/>
22+
<size android:height="@dimen/m3_comp_secondary_navigation_tab_active_indicator_height"/>
2223
</shape>

‎lib/java/com/google/android/material/tabs/res/drawable/m3_tabs_rounded_line_indicator.xml

+2-1
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,14 @@
2121
android:right="2dp">
2222
<shape
2323
android:shape="rectangle">
24+
<!-- Color is assigned programmatically with the value of "tabIndicatorColor". -->
2425
<solid android:color="@android:color/white"/>
2526
<corners
2627
android:bottomLeftRadius="0dp"
2728
android:bottomRightRadius="0dp"
2829
android:topLeftRadius="3dp"
2930
android:topRightRadius="3dp"/>
30-
<size android:height="3dp"/>
31+
<size android:height="@dimen/m3_comp_primary_navigation_tab_active_indicator_height"/>
3132
</shape>
3233
</item>
3334
</layer-list>

‎lib/java/com/google/android/material/tabs/res/layout/design_layout_tab_icon.xml

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
-->
1717

1818
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
19-
android:layout_width="24dp"
20-
android:layout_height="24dp"
19+
android:layout_width="@dimen/m3_comp_primary_navigation_tab_with_icon_icon_size"
20+
android:layout_height="@dimen/m3_comp_primary_navigation_tab_with_icon_icon_size"
2121
android:contentDescription="@null"
2222
android:scaleType="centerInside"/>

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

+10-3
Original file line numberDiff line numberDiff line change
@@ -70,13 +70,14 @@
7070

7171
<!-- Styles for M3 Tabs -->
7272
<style name="Base.Widget.Material3.TabLayout" parent="Widget.MaterialComponents.TabLayout">
73+
<item name="android:background">@macro/m3_comp_primary_navigation_tab_container_color</item>
7374
<item name="enforceTextAppearance">false</item>
7475
<item name="tabIconTint">@color/m3_tabs_icon_color</item>
75-
<item name="tabTextAppearance">?attr/textAppearanceLabelLarge</item>
76-
<item name="tabTextColor">@color/m3_tabs_icon_color</item>
76+
<item name="tabTextAppearance">@macro/m3_comp_primary_navigation_tab_with_label_text_label_text_type</item>
77+
<item name="tabTextColor">@color/m3_tabs_text_color</item>
7778
<item name="tabIndicator">@drawable/m3_tabs_rounded_line_indicator</item>
7879
<item name="tabIndicatorAnimationMode">elastic</item>
79-
<item name="tabIndicatorColor">?attr/colorPrimary</item>
80+
<item name="tabIndicatorColor">@macro/m3_comp_primary_navigation_tab_active_indicator_color</item>
8081
<item name="tabRippleColor">@color/m3_tabs_ripple_color</item>
8182
<item name="tabIndicatorFullWidth">false</item>
8283
<item name="tabIndicatorAnimationDuration">?attr/motionDurationLong2</item>
@@ -95,7 +96,13 @@
9596
present in the UI. This style does not have a bottom divider, which is added in v21 because
9697
the drawable cannot use theme colors pre-21. -->
9798
<style name="Base.Widget.Material3.TabLayout.Secondary" parent="Widget.Material3.TabLayout">
99+
<item name="android:background">@macro/m3_comp_secondary_navigation_tab_container_color</item>
100+
<item name="tabIconTint">@color/m3_tabs_icon_color_secondary</item>
101+
<item name="tabTextAppearance">@macro/m3_comp_secondary_navigation_tab_label_text_type</item>
102+
<item name="tabTextColor">@color/m3_tabs_text_color_secondary</item>
98103
<item name="tabIndicator">@drawable/m3_tabs_line_indicator</item>
104+
<item name="tabIndicatorColor">@macro/m3_comp_secondary_navigation_tab_active_indicator_color</item>
105+
<item name="tabRippleColor">@color/m3_tabs_ripple_color_secondary</item>
99106
<item name="tabIndicatorFullWidth">true</item>
100107
</style>
101108

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
~ Copyright (C) 2022 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+
~ http://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+
<!-- AUTOGENERATED FILE. DO NOT MODIFY. -->
18+
<!-- Version: v0.126 -->
19+
20+
<resources>
21+
<!-- Generated from token set (md.comp.primary-navigation-tab) in default context. -->
22+
<!-- Enabled - Container -->
23+
<macro name="m3_comp_primary_navigation_tab_container_color">?attr/colorSurface</macro>
24+
<!-- Enabled - Label text -->
25+
<macro name="m3_comp_primary_navigation_tab_with_label_text_label_text_type">?attr/textAppearanceTitleSmall</macro>
26+
<macro name="m3_comp_primary_navigation_tab_with_label_text_active_label_text_color">?attr/colorPrimary</macro>
27+
<macro name="m3_comp_primary_navigation_tab_with_label_text_inactive_label_text_color">?attr/colorOnSurfaceVariant</macro>
28+
<!-- Enabled - Icon -->
29+
<dimen name="m3_comp_primary_navigation_tab_with_icon_icon_size">24dp</dimen>
30+
<macro name="m3_comp_primary_navigation_tab_with_icon_active_icon_color">?attr/colorPrimary</macro>
31+
<macro name="m3_comp_primary_navigation_tab_with_icon_inactive_icon_color">?attr/colorOnSurfaceVariant</macro>
32+
<!-- Enabled - Divider -->
33+
<macro name="m3_comp_primary_navigation_tab_divider_color">?attr/colorSurfaceVariant</macro>
34+
<dimen name="m3_comp_primary_navigation_tab_divider_height">1dp</dimen>
35+
<!-- Enabled - Active indicator -->
36+
<macro name="m3_comp_primary_navigation_tab_active_indicator_color">?attr/colorPrimary</macro>
37+
<dimen name="m3_comp_primary_navigation_tab_active_indicator_height">3dp</dimen>
38+
<!-- Hovered - State layer -->
39+
<macro name="m3_comp_primary_navigation_tab_active_hover_state_layer_color">?attr/colorPrimary</macro>
40+
<dimen name="m3_comp_primary_navigation_tab_active_hover_state_layer_opacity">@dimen/m3_sys_state_hover_state_layer_opacity</dimen>
41+
<macro name="m3_comp_primary_navigation_tab_inactive_hover_state_layer_color">?attr/colorOnSurface</macro>
42+
<dimen name="m3_comp_primary_navigation_tab_inactive_hover_state_layer_opacity">@dimen/m3_sys_state_hover_state_layer_opacity</dimen>
43+
<!-- Focused - State layer -->
44+
<macro name="m3_comp_primary_navigation_tab_active_focus_state_layer_color">?attr/colorPrimary</macro>
45+
<dimen name="m3_comp_primary_navigation_tab_active_focus_state_layer_opacity">@dimen/m3_sys_state_focus_state_layer_opacity</dimen>
46+
<macro name="m3_comp_primary_navigation_tab_inactive_focus_state_layer_color">?attr/colorOnSurface</macro>
47+
<dimen name="m3_comp_primary_navigation_tab_inactive_focus_state_layer_opacity">@dimen/m3_sys_state_focus_state_layer_opacity</dimen>
48+
<!-- Pressed (rippple) - State layer -->
49+
<macro name="m3_comp_primary_navigation_tab_active_pressed_state_layer_color">?attr/colorPrimary</macro>
50+
<dimen name="m3_comp_primary_navigation_tab_active_pressed_state_layer_opacity">@dimen/m3_sys_state_pressed_state_layer_opacity</dimen>
51+
<macro name="m3_comp_primary_navigation_tab_inactive_pressed_state_layer_color">?attr/colorPrimary</macro>
52+
<dimen name="m3_comp_primary_navigation_tab_inactive_pressed_state_layer_opacity">@dimen/m3_sys_state_pressed_state_layer_opacity</dimen>
53+
54+
<!-- Generated from token set (md.comp.secondary-navigation-tab) in default context. -->
55+
<!-- Enabled - Container -->
56+
<macro name="m3_comp_secondary_navigation_tab_container_color">?attr/colorSurface</macro>
57+
<!-- Enabled - Label text -->
58+
<macro name="m3_comp_secondary_navigation_tab_label_text_type">?attr/textAppearanceTitleSmall</macro>
59+
<macro name="m3_comp_secondary_navigation_tab_active_label_text_color">?attr/colorOnSurface</macro>
60+
<macro name="m3_comp_secondary_navigation_tab_inactive_label_text_color">?attr/colorOnSurfaceVariant</macro>
61+
<!-- Enabled - Icon -->
62+
<macro name="m3_comp_secondary_navigation_tab_with_icon_active_icon_color">?attr/colorOnSurface</macro>
63+
<macro name="m3_comp_secondary_navigation_tab_with_icon_inactive_icon_color">?attr/colorOnSurfaceVariant</macro>
64+
<!-- Enabled - Active indicator -->
65+
<macro name="m3_comp_secondary_navigation_tab_active_indicator_color">?attr/colorPrimary</macro>
66+
<dimen name="m3_comp_secondary_navigation_tab_active_indicator_height">2dp</dimen>
67+
<!-- Hovered - State layer -->
68+
<macro name="m3_comp_secondary_navigation_tab_hover_state_layer_color">?attr/colorOnSurface</macro>
69+
<dimen name="m3_comp_secondary_navigation_tab_hover_state_layer_opacity">@dimen/m3_sys_state_hover_state_layer_opacity</dimen>
70+
<!-- Focused - State layer -->
71+
<macro name="m3_comp_secondary_navigation_tab_focus_state_layer_color">?attr/colorOnSurface</macro>
72+
<dimen name="m3_comp_secondary_navigation_tab_focus_state_layer_opacity">@dimen/m3_sys_state_focus_state_layer_opacity</dimen>
73+
<!-- Pressed (rippple) - State layer -->
74+
<macro name="m3_comp_secondary_navigation_tab_pressed_state_layer_color">?attr/colorOnSurface</macro>
75+
<dimen name="m3_comp_secondary_navigation_tab_pressed_state_layer_opacity">@dimen/m3_sys_state_pressed_state_layer_opacity</dimen>
76+
</resources>

0 commit comments

Comments
 (0)
Please sign in to comment.