Skip to content

Commit f223b26

Browse files
imhappidsn5ft
imhappi
authored and
dsn5ft
committed
[FloatingToolbar][DockedToolbar] Integrate tokens and add m3 styles
PiperOrigin-RevId: 741220809
1 parent e85371f commit f223b26

21 files changed

+418
-35
lines changed

‎catalog/java/io/material/catalog/dockedtoolbar/res/layout/cat_docked_toolbar_content.xml‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,8 @@
3030
android:layout_width="48dp"
3131
android:layout_height="48dp"
3232
android:layout_gravity="center"
33-
style="?attr/materialIconButtonStyle"
33+
style="@style/Widget.Material3.DockedToolbar.IconButton"
3434
android:contentDescription="@string/cat_docked_toolbar_left_arrow_button_description"
35-
app:iconTint="?attr/colorOnSecondaryContainer"
3635
app:icon="@drawable/ic_arrow_back_24px" />
3736
</FrameLayout>
3837

@@ -45,9 +44,7 @@
4544
android:layout_width="48dp"
4645
android:layout_height="48dp"
4746
android:layout_gravity="center"
48-
style="?attr/materialIconButtonStyle"
49-
app:iconTint="?attr/colorOnSecondaryContainer"
50-
47+
style="@style/Widget.Material3.DockedToolbar.IconButton"
5148
android:contentDescription="@string/cat_docked_toolbar_right_arrow_button_description"
5249
app:icon="@drawable/ic_arrow_forward_24px" />
5350
</FrameLayout>
@@ -80,9 +77,8 @@
8077
android:layout_width="48dp"
8178
android:layout_height="48dp"
8279
android:layout_gravity="center"
83-
app:iconTint="?attr/colorOnSecondaryContainer"
84-
85-
style="?attr/materialIconButtonStyle"
80+
android:gravity="center"
81+
style="@style/Widget.Material3.DockedToolbar.IconButton"
8682
android:contentDescription="@string/cat_docked_toolbar_tab_button_description"
8783
app:icon="@drawable/ic_tab_24px" />
8884
</FrameLayout>
@@ -96,9 +92,8 @@
9692
android:layout_width="48dp"
9793
android:layout_height="48dp"
9894
android:layout_gravity="center"
99-
app:iconTint="?attr/colorOnSecondaryContainer"
100-
101-
style="?attr/materialIconButtonStyle"
95+
android:gravity="center"
96+
style="@style/Widget.Material3.DockedToolbar.IconButton"
10297
android:contentDescription="@string/cat_docked_toolbar_overflow_button_description"
10398
app:icon="@drawable/abc_ic_menu_overflow_material" />
10499
</FrameLayout>

‎catalog/java/io/material/catalog/dockedtoolbar/res/layout/cat_docked_toolbar_small_content.xml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
android:layout_width="48dp"
3131
android:layout_height="48dp"
3232
android:layout_gravity="center"
33-
style="?attr/materialIconButtonStyle"
33+
style="@style/Widget.Material3.DockedToolbar.IconButton.Vibrant"
3434
android:contentDescription="@string/cat_docked_toolbar_left_arrow_button_description"
3535
app:icon="@drawable/ic_arrow_back_24px" />
3636
</FrameLayout>
@@ -59,7 +59,7 @@
5959
android:layout_width="48dp"
6060
android:layout_height="48dp"
6161
android:layout_gravity="center"
62-
style="?attr/materialIconButtonStyle"
62+
style="@style/Widget.Material3.DockedToolbar.IconButton.Vibrant"
6363
android:contentDescription="@string/cat_docked_toolbar_right_arrow_button_description"
6464
app:icon="@drawable/ic_arrow_forward_24px" />
6565
</FrameLayout>

‎catalog/java/io/material/catalog/dockedtoolbar/res/layout/cat_docked_toolbar_vibrant_fragment.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,11 @@
6767

6868
</androidx.coordinatorlayout.widget.CoordinatorLayout>
6969

70-
<!-- TODO: b/393647677 - Update this toolbar styling to be vibrant once styles are ready -->
7170
<com.google.android.material.dockedtoolbar.DockedToolbarLayout
7271
android:id="@+id/docked_toolbar"
7372
android:layout_width="match_parent"
7473
android:layout_height="wrap_content"
74+
style="?attr/dockedToolbarVibrantStyle"
7575
app:layout_constraintLeft_toLeftOf="parent"
7676
app:layout_constraintRight_toRightOf="parent"
7777
app:paddingBottomSystemWindowInsets="true"

‎catalog/java/io/material/catalog/floatingtoolbar/res/layout/cat_floating_toolbar_content.xml‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,37 +17,37 @@
1717
xmlns:app="http://schemas.android.com/apk/res-auto">
1818
<Button
1919
android:id="@+id/floating_toolbar_button_bold"
20-
style="?attr/materialIconButtonStyle"
20+
style="@style/Widget.Material3.FloatingToolbar.IconButton"
2121
android:layout_width="wrap_content"
2222
android:layout_height="wrap_content"
2323
android:checkable="true"
2424
android:contentDescription="@string/cat_floating_toolbar_button_bold_content_description"
2525
app:icon="@drawable/ic_format_bold_24px" />
2626
<Button
27-
style="?attr/materialIconButtonStyle"
27+
style="@style/Widget.Material3.FloatingToolbar.IconButton"
2828
android:id="@+id/floating_toolbar_button_italic"
2929
android:layout_width="wrap_content"
3030
android:layout_height="wrap_content"
3131
android:checkable="true"
3232
android:contentDescription="@string/cat_floating_toolbar_button_italic_content_description"
3333
app:icon="@drawable/ic_format_italic_24px" />
3434
<Button
35-
style="?attr/materialIconButtonStyle"
35+
style="@style/Widget.Material3.FloatingToolbar.IconButton"
3636
android:id="@+id/floating_toolbar_button_underlined"
3737
android:layout_width="wrap_content"
3838
android:layout_height="wrap_content"
3939
android:checkable="true"
4040
android:contentDescription="@string/cat_floating_toolbar_button_underlined_content_description"
4141
app:icon="@drawable/ic_format_underlined_24px" />
4242
<Button
43-
style="?attr/materialIconButtonStyle"
43+
style="@style/Widget.Material3.FloatingToolbar.IconButton"
4444
android:id="@+id/floating_toolbar_button_color_text"
4545
android:layout_width="wrap_content"
4646
android:layout_height="wrap_content"
4747
android:contentDescription="@string/cat_floating_toolbar_button_color_text_content_description"
4848
app:icon="@drawable/ic_format_color_text_24px" />
4949
<Button
50-
style="?attr/materialIconButtonStyle"
50+
style="@style/Widget.Material3.FloatingToolbar.IconButton"
5151
android:id="@+id/floating_toolbar_button_color_fill"
5252
android:layout_width="wrap_content"
5353
android:layout_height="wrap_content"

‎docs/components/DockedToolbar.md‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -238,11 +238,20 @@ inset padding.
238238

239239
#### Styles
240240

241-
**Element** | **Style**
242-
------------------ | ------------------------------------------
241+
**Element** | **Style**
242+
----------------- | ----------------------------------------
243243
**Default style** | `Widget.Material3.DockedToolbar`
244+
**Vibrant style** | `Widget.Material3.DockedToolbar.Vibrant`
244245

245-
Default style theme attribute: `?attr/dockedToolbarStyle`
246+
Standard style theme attribute: `?attr/floatingToolbarStyle`
247+
Vibrant style theme attribute: `?attr/floatingToolbarVibrantStyle`
248+
249+
The default style is the standard style.
250+
251+
Docked Toolbar may also recommend styles for specific components for when they
252+
are inside of a docked toolbar. Currently, there are styles for icon buttons:
253+
`Widget.Material3.DockedToolbar.IconButton` and
254+
`Widget.Material3.DockedToolbar.IconButton.Vibrant`.
246255

247256
See the full list of
248257
[styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/dockedtoolbar/res/values/styles.xml) and

‎lib/java/com/google/android/material/color/res/color/m3_standard_toolbar_icon_button_container_color_selector.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 (C) 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+
~ 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+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
18+
<!-- Disabled state -->
19+
<item android:color="@macro/m3_comp_toolbar_standard_button_container_color" android:state_enabled="false"/>
20+
<!-- Checkable, checked state -->
21+
<item android:color="@macro/m3_comp_toolbar_standard_selected_button_container_color" android:state_checkable="true" android:state_checked="true"/>
22+
<!-- Default, Enabled state -->
23+
<item android:color="@macro/m3_comp_toolbar_standard_button_container_color"/>
24+
</selector>

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
~ Copyright (C) 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+
~ 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+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
18+
<!-- Disabled state -->
19+
<item android:color="@macro/m3_comp_toolbar_standard_disabled_icon_color" android:alpha="@dimen/m3_comp_toolbar_standard_disabled_icon_opacity" android:state_enabled="false"/>
20+
<!-- Hovered state -->
21+
<item android:color="@macro/m3_comp_toolbar_standard_hovered_icon_color" android:state_hovered="true"/>
22+
<item android:color="@macro/m3_comp_toolbar_standard_selected_hovered_icon_color" android:state_hovered="true" android:state_checkable="true" android:state_checked="true"/>
23+
<!-- Focused state -->
24+
<item android:color="@macro/m3_comp_toolbar_standard_focused_icon_color" android:state_focused="true"/>
25+
<item android:color="@macro/m3_comp_toolbar_standard_selected_focused_icon_color" android:state_focused="true" android:state_checkable="true" android:state_checked="true"/>
26+
<!-- Pressed state -->
27+
<item android:color="@macro/m3_comp_toolbar_standard_pressed_icon_color" android:state_pressed="true"/>
28+
<item android:color="@macro/m3_comp_toolbar_standard_selected_pressed_icon_color" android:state_pressed="true" android:state_checkable="true" android:state_checked="true"/>
29+
<!-- Checkable, checked state -->
30+
<item android:color="@macro/m3_comp_toolbar_standard_selected_icon_color" android:state_checkable="true" android:state_checked="true"/>
31+
<!-- Default, Enabled state -->
32+
<item android:color="@macro/m3_comp_toolbar_standard_icon_color"/>
33+
</selector>

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
~ Copyright (C) 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+
~ 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+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
18+
<item android:alpha="0.1" android:color="@macro/m3_comp_toolbar_standard_pressed_state_layer_color" android:state_pressed="true"/>
19+
<item android:alpha="0.1" android:color="@macro/m3_comp_toolbar_standard_selected_pressed_state_layer_color" android:state_pressed="true" android:state_checked="true" android:state_checkable="true"/>
20+
<item android:alpha="0.1" android:color="@macro/m3_comp_toolbar_standard_focused_state_layer_color" android:state_focused="true"/>
21+
<item android:alpha="0.1" android:color="@macro/m3_comp_toolbar_standard_selected_focused_state_layer_color" android:state_focused="true" android:state_checked="true" android:state_checkable="true"/>
22+
<item android:alpha="0.08" android:color="@macro/m3_comp_toolbar_standard_hovered_state_layer_color" android:state_hovered="true"/>
23+
<item android:alpha="0.08" android:color="@macro/m3_comp_toolbar_standard_selected_hovered_state_layer_color" android:state_hovered="true" android:state_checked="true" android:state_checkable="true"/>
24+
<item android:alpha="0.1" android:color="@macro/m3_comp_toolbar_standard_pressed_state_layer_color"/>
25+
</selector>

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
~ Copyright (C) 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+
~ 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+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
18+
<!-- Disabled state -->
19+
<item android:color="@macro/m3_comp_toolbar_standard_disabled_label_text_color" android:alpha="@dimen/m3_comp_toolbar_standard_disabled_label_text_opacity" android:state_enabled="false"/>
20+
<!-- Hovered state -->
21+
<item android:color="@macro/m3_comp_toolbar_standard_hovered_label_text_color" android:state_hovered="true"/>
22+
<item android:color="@macro/m3_comp_toolbar_standard_selected_hovered_label_text_color" android:state_hovered="true" android:state_checkable="true" android:state_checked="true"/>
23+
<!-- Focused state -->
24+
<item android:color="@macro/m3_comp_toolbar_standard_focused_label_text_color" android:state_focused="true"/>
25+
<item android:color="@macro/m3_comp_toolbar_standard_selected_focused_label_text_color" android:state_focused="true" android:state_checkable="true" android:state_checked="true"/>
26+
<!-- Pressed state -->
27+
<item android:color="@macro/m3_comp_toolbar_standard_pressed_label_text_color" android:state_pressed="true"/>
28+
<item android:color="@macro/m3_comp_toolbar_standard_selected_pressed_label_text_color" android:state_pressed="true" android:state_checkable="true" android:state_checked="true"/>
29+
<!-- Checkable, checked state -->
30+
<item android:color="@macro/m3_comp_toolbar_standard_selected_label_text_color" android:state_checkable="true" android:state_checked="true"/>
31+
<!-- Default, Enabled state -->
32+
<item android:color="@macro/m3_comp_toolbar_standard_label_text_color"/>
33+
</selector>

‎lib/java/com/google/android/material/color/res/color/m3_vibrant_toolbar_icon_button_container_color_selector.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 (C) 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+
~ 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+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
18+
<!-- Disabled state -->
19+
<item android:color="@macro/m3_comp_toolbar_vibrant_vibrant_button_container_color" android:state_enabled="false"/>
20+
<!-- Checkable, checked state -->
21+
<item android:color="@macro/m3_comp_toolbar_vibrant_vibrant_selected_button_container_color" android:state_checkable="true" android:state_checked="true"/>
22+
<!-- Default, Enabled state -->
23+
<item android:color="@macro/m3_comp_toolbar_vibrant_vibrant_button_container_color"/>
24+
</selector>

0 commit comments

Comments
 (0)