Skip to content

Commit 3b3822f

Browse files
pekingmeimhappi
pekingme
authored and
imhappi
committed
[FAB] Updated catalog demo for Expressive styles.
PiperOrigin-RevId: 748340268
1 parent fd0b8ba commit 3b3822f

File tree

4 files changed

+450
-56
lines changed

4 files changed

+450
-56
lines changed

‎catalog/java/io/material/catalog/fab/res/layout/m3_extended_fabs.xml

Lines changed: 291 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,68 +25,346 @@
2525
android:columnCount="2"
2626
android:rowCount="3">
2727

28+
<TextView
29+
android:layout_width="wrap_content"
30+
android:layout_height="wrap_content"
31+
android:layout_gravity="start|center"
32+
android:layout_columnSpan="2"
33+
android:textAppearance="?attr/textAppearanceTitleLarge"
34+
android:text="@string/m3_primary_extended_fab_label"/>
35+
36+
<TextView
37+
android:layout_width="wrap_content"
38+
android:layout_height="wrap_content"
39+
android:layout_marginRight="24dp"
40+
android:layout_gravity="start|center"
41+
android:text="@string/m3_small_extended_fab_label"/>
42+
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
43+
style="?attr/extendedFloatingActionButtonSmallStyle"
44+
android:layout_width="wrap_content"
45+
android:layout_height="wrap_content"
46+
android:layout_margin="8dp"
47+
android:layout_gravity="center"
48+
android:contentDescription="@string/m3_primary_small_extended_fab_content_desc"
49+
android:text="@string/extended_fab_label"
50+
app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.Primary"
51+
app:icon="@drawable/ic_add_24px" />
52+
<TextView
53+
android:layout_width="wrap_content"
54+
android:layout_height="wrap_content"
55+
android:layout_marginRight="24dp"
56+
android:layout_gravity="start|center"
57+
android:text="@string/m3_medium_extended_fab_label"/>
58+
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
59+
style="?attr/extendedFloatingActionButtonMediumStyle"
60+
android:layout_width="wrap_content"
61+
android:layout_height="wrap_content"
62+
android:layout_margin="8dp"
63+
android:layout_gravity="center"
64+
android:contentDescription="@string/m3_primary_medium_extended_fab_content_desc"
65+
android:text="@string/extended_fab_label"
66+
app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.Primary"
67+
app:icon="@drawable/ic_add_24px" />
2868
<TextView
2969
android:layout_width="wrap_content"
3070
android:layout_height="wrap_content"
3171
android:layout_marginRight="24dp"
3272
android:layout_gravity="start|center"
33-
android:text="@string/m3_surface_extended_fab_label" />
73+
android:text="@string/m3_large_extended_fab_label"/>
3474
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
35-
style="?attr/extendedFloatingActionButtonSurfaceStyle"
75+
style="?attr/extendedFloatingActionButtonLargeStyle"
3676
android:layout_width="wrap_content"
3777
android:layout_height="wrap_content"
3878
android:layout_margin="8dp"
3979
android:layout_gravity="center"
40-
android:contentDescription="@string/cat_extended_fab_content_desc"
80+
android:contentDescription="@string/m3_primary_large_extended_fab_content_desc"
4181
android:text="@string/extended_fab_label"
82+
app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.Primary"
4283
app:icon="@drawable/ic_add_24px" />
4384

85+
<TextView
86+
android:layout_width="wrap_content"
87+
android:layout_height="wrap_content"
88+
android:layout_gravity="start|center"
89+
android:layout_columnSpan="2"
90+
android:textAppearance="?attr/textAppearanceTitleLarge"
91+
android:text="@string/m3_secondary_extended_fab_label" />
92+
93+
<TextView
94+
android:layout_width="wrap_content"
95+
android:layout_height="wrap_content"
96+
android:layout_marginRight="24dp"
97+
android:layout_gravity="start|center"
98+
android:text="@string/m3_small_extended_fab_label"/>
99+
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
100+
style="?attr/extendedFloatingActionButtonSmallStyle"
101+
android:layout_width="wrap_content"
102+
android:layout_height="wrap_content"
103+
android:layout_margin="8dp"
104+
android:layout_gravity="center"
105+
android:contentDescription="@string/m3_secondary_small_extended_fab_content_desc"
106+
android:text="@string/extended_fab_label"
107+
app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.Secondary"
108+
app:icon="@drawable/ic_add_24px" />
44109
<TextView
45110
android:layout_width="wrap_content"
46111
android:layout_height="wrap_content"
47112
android:layout_marginRight="24dp"
48113
android:layout_gravity="start|center"
49-
android:text="@string/m3_primary_extended_fab_label" />
114+
android:text="@string/m3_medium_extended_fab_label"/>
50115
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
51-
style="?attr/extendedFloatingActionButtonPrimaryStyle"
116+
style="?attr/extendedFloatingActionButtonMediumStyle"
52117
android:layout_width="wrap_content"
53118
android:layout_height="wrap_content"
54119
android:layout_margin="8dp"
55120
android:layout_gravity="center"
56-
android:contentDescription="@string/cat_extended_fab_content_desc"
121+
android:contentDescription="@string/m3_secondary_medium_extended_fab_content_desc"
57122
android:text="@string/extended_fab_label"
123+
app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.Secondary"
58124
app:icon="@drawable/ic_add_24px" />
125+
<TextView
126+
android:layout_width="wrap_content"
127+
android:layout_height="wrap_content"
128+
android:layout_marginRight="24dp"
129+
android:layout_gravity="start|center"
130+
android:text="@string/m3_large_extended_fab_label"/>
131+
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
132+
style="?attr/extendedFloatingActionButtonLargeStyle"
133+
android:layout_width="wrap_content"
134+
android:layout_height="wrap_content"
135+
android:layout_margin="8dp"
136+
android:layout_gravity="center"
137+
android:contentDescription="@string/m3_secondary_large_extended_fab_content_desc"
138+
android:text="@string/extended_fab_label"
139+
app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.Secondary"
140+
app:icon="@drawable/ic_add_24px" />
141+
142+
<TextView
143+
android:layout_width="wrap_content"
144+
android:layout_height="wrap_content"
145+
android:layout_gravity="start|center"
146+
android:layout_columnSpan="2"
147+
android:textAppearance="?attr/textAppearanceTitleLarge"
148+
android:text="@string/m3_tertiary_extended_fab_label" />
59149

60150
<TextView
61151
android:layout_width="wrap_content"
62152
android:layout_height="wrap_content"
63153
android:layout_marginRight="24dp"
64154
android:layout_gravity="start|center"
65-
android:text="@string/m3_secondary_extended_fab_label" />
155+
android:text="@string/m3_small_extended_fab_label"/>
156+
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
157+
style="?attr/extendedFloatingActionButtonSmallStyle"
158+
android:layout_width="wrap_content"
159+
android:layout_height="wrap_content"
160+
android:layout_margin="8dp"
161+
android:layout_gravity="center"
162+
android:contentDescription="@string/m3_tertiary_small_extended_fab_content_desc"
163+
android:text="@string/extended_fab_label"
164+
app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.Tertiary"
165+
app:icon="@drawable/ic_add_24px" />
166+
<TextView
167+
android:layout_width="wrap_content"
168+
android:layout_height="wrap_content"
169+
android:layout_marginRight="24dp"
170+
android:layout_gravity="start|center"
171+
android:text="@string/m3_medium_extended_fab_label"/>
66172
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
67-
style="?extendedFloatingActionButtonSecondaryStyle"
173+
style="?attr/extendedFloatingActionButtonMediumStyle"
68174
android:layout_width="wrap_content"
69175
android:layout_height="wrap_content"
70176
android:layout_margin="8dp"
71177
android:layout_gravity="center"
72-
android:contentDescription="@string/cat_extended_fab_content_desc"
178+
android:contentDescription="@string/m3_tertiary_medium_extended_fab_content_desc"
73179
android:text="@string/extended_fab_label"
74-
app:icon="@drawable/ic_add_24px"/>
180+
app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.Tertiary"
181+
app:icon="@drawable/ic_add_24px" />
182+
<TextView
183+
android:layout_width="wrap_content"
184+
android:layout_height="wrap_content"
185+
android:layout_marginRight="24dp"
186+
android:layout_gravity="start|center"
187+
android:text="@string/m3_large_extended_fab_label"/>
188+
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
189+
style="?attr/extendedFloatingActionButtonLargeStyle"
190+
android:layout_width="wrap_content"
191+
android:layout_height="wrap_content"
192+
android:layout_margin="8dp"
193+
android:layout_gravity="center"
194+
android:contentDescription="@string/m3_tertiary_large_extended_fab_content_desc"
195+
android:text="@string/extended_fab_label"
196+
app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.Tertiary"
197+
app:icon="@drawable/ic_add_24px" />
198+
199+
<TextView
200+
android:layout_width="wrap_content"
201+
android:layout_height="wrap_content"
202+
android:layout_gravity="start|center"
203+
android:layout_columnSpan="2"
204+
android:textAppearance="?attr/textAppearanceTitleLarge"
205+
android:text="@string/m3_primary_container_extended_fab_label" />
75206

76207
<TextView
77208
android:layout_width="wrap_content"
78209
android:layout_height="wrap_content"
79210
android:layout_marginRight="24dp"
80211
android:layout_gravity="start|center"
81-
android:text="@string/m3_tertiary_extended_fab_label" />
212+
android:text="@string/m3_small_extended_fab_label"/>
213+
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
214+
style="?attr/extendedFloatingActionButtonSmallStyle"
215+
android:layout_width="wrap_content"
216+
android:layout_height="wrap_content"
217+
android:layout_margin="8dp"
218+
android:layout_gravity="center"
219+
android:contentDescription="@string/m3_primary_container_small_extended_fab_content_desc"
220+
android:text="@string/extended_fab_label"
221+
app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.PrimaryContainer"
222+
app:icon="@drawable/ic_add_24px" />
223+
<TextView
224+
android:layout_width="wrap_content"
225+
android:layout_height="wrap_content"
226+
android:layout_marginRight="24dp"
227+
android:layout_gravity="start|center"
228+
android:text="@string/m3_medium_extended_fab_label"/>
229+
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
230+
style="?attr/extendedFloatingActionButtonMediumStyle"
231+
android:layout_width="wrap_content"
232+
android:layout_height="wrap_content"
233+
android:layout_margin="8dp"
234+
android:layout_gravity="center"
235+
android:contentDescription="@string/m3_primary_container_medium_extended_fab_content_desc"
236+
android:text="@string/extended_fab_label"
237+
app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.PrimaryContainer"
238+
app:icon="@drawable/ic_add_24px" />
239+
<TextView
240+
android:layout_width="wrap_content"
241+
android:layout_height="wrap_content"
242+
android:layout_marginRight="24dp"
243+
android:layout_gravity="start|center"
244+
android:text="@string/m3_large_extended_fab_label"/>
245+
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
246+
style="?attr/extendedFloatingActionButtonLargeStyle"
247+
android:layout_width="wrap_content"
248+
android:layout_height="wrap_content"
249+
android:layout_margin="8dp"
250+
android:layout_gravity="center"
251+
android:contentDescription="@string/m3_primary_container_large_extended_fab_content_desc"
252+
android:text="@string/extended_fab_label"
253+
app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.PrimaryContainer"
254+
app:icon="@drawable/ic_add_24px" />
255+
256+
<TextView
257+
android:layout_width="wrap_content"
258+
android:layout_height="wrap_content"
259+
android:layout_gravity="start|center"
260+
android:layout_columnSpan="2"
261+
android:textAppearance="?attr/textAppearanceTitleLarge"
262+
android:text="@string/m3_secondary_container_extended_fab_label" />
263+
264+
<TextView
265+
android:layout_width="wrap_content"
266+
android:layout_height="wrap_content"
267+
android:layout_marginRight="24dp"
268+
android:layout_gravity="start|center"
269+
android:text="@string/m3_small_extended_fab_label"/>
270+
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
271+
style="?attr/extendedFloatingActionButtonSmallStyle"
272+
android:layout_width="wrap_content"
273+
android:layout_height="wrap_content"
274+
android:layout_margin="8dp"
275+
android:layout_gravity="center"
276+
android:contentDescription="@string/m3_secondary_container_small_extended_fab_content_desc"
277+
android:text="@string/extended_fab_label"
278+
app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.SecondaryContainer"
279+
app:icon="@drawable/ic_add_24px" />
280+
<TextView
281+
android:layout_width="wrap_content"
282+
android:layout_height="wrap_content"
283+
android:layout_marginRight="24dp"
284+
android:layout_gravity="start|center"
285+
android:text="@string/m3_medium_extended_fab_label"/>
286+
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
287+
style="?attr/extendedFloatingActionButtonMediumStyle"
288+
android:layout_width="wrap_content"
289+
android:layout_height="wrap_content"
290+
android:layout_margin="8dp"
291+
android:layout_gravity="center"
292+
android:contentDescription="@string/m3_secondary_container_medium_extended_fab_content_desc"
293+
android:text="@string/extended_fab_label"
294+
app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.SecondaryContainer"
295+
app:icon="@drawable/ic_add_24px" />
296+
<TextView
297+
android:layout_width="wrap_content"
298+
android:layout_height="wrap_content"
299+
android:layout_marginRight="24dp"
300+
android:layout_gravity="start|center"
301+
android:text="@string/m3_large_extended_fab_label"/>
302+
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
303+
style="?attr/extendedFloatingActionButtonLargeStyle"
304+
android:layout_width="wrap_content"
305+
android:layout_height="wrap_content"
306+
android:layout_margin="8dp"
307+
android:layout_gravity="center"
308+
android:contentDescription="@string/m3_secondary_container_large_extended_fab_content_desc"
309+
android:text="@string/extended_fab_label"
310+
app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.SecondaryContainer"
311+
app:icon="@drawable/ic_add_24px" />
312+
313+
<TextView
314+
android:layout_width="wrap_content"
315+
android:layout_height="wrap_content"
316+
android:layout_gravity="start|center"
317+
android:layout_columnSpan="2"
318+
android:textAppearance="?attr/textAppearanceTitleLarge"
319+
android:text="@string/m3_tertiary_container_extended_fab_label" />
320+
321+
<TextView
322+
android:layout_width="wrap_content"
323+
android:layout_height="wrap_content"
324+
android:layout_marginRight="24dp"
325+
android:layout_gravity="start|center"
326+
android:text="@string/m3_small_extended_fab_label"/>
327+
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
328+
style="?attr/extendedFloatingActionButtonSmallStyle"
329+
android:layout_width="wrap_content"
330+
android:layout_height="wrap_content"
331+
android:layout_margin="8dp"
332+
android:layout_gravity="center"
333+
android:contentDescription="@string/m3_tertiary_container_small_extended_fab_content_desc"
334+
android:text="@string/extended_fab_label"
335+
app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.TertiaryContainer"
336+
app:icon="@drawable/ic_add_24px" />
337+
<TextView
338+
android:layout_width="wrap_content"
339+
android:layout_height="wrap_content"
340+
android:layout_marginRight="24dp"
341+
android:layout_gravity="start|center"
342+
android:text="@string/m3_medium_extended_fab_label"/>
343+
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
344+
style="?attr/extendedFloatingActionButtonMediumStyle"
345+
android:layout_width="wrap_content"
346+
android:layout_height="wrap_content"
347+
android:layout_margin="8dp"
348+
android:layout_gravity="center"
349+
android:contentDescription="@string/m3_tertiary_container_medium_extended_fab_content_desc"
350+
android:text="@string/extended_fab_label"
351+
app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.TertiaryContainer"
352+
app:icon="@drawable/ic_add_24px" />
353+
<TextView
354+
android:layout_width="wrap_content"
355+
android:layout_height="wrap_content"
356+
android:layout_marginRight="24dp"
357+
android:layout_gravity="start|center"
358+
android:text="@string/m3_large_extended_fab_label"/>
82359
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
83-
style="?attr/extendedFloatingActionButtonTertiaryStyle"
360+
style="?attr/extendedFloatingActionButtonLargeStyle"
84361
android:layout_width="wrap_content"
85362
android:layout_height="wrap_content"
86363
android:layout_margin="8dp"
87364
android:layout_gravity="center"
88-
android:contentDescription="@string/cat_extended_fab_content_desc"
365+
android:contentDescription="@string/m3_tertiary_container_large_extended_fab_content_desc"
89366
android:text="@string/extended_fab_label"
367+
app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.TertiaryContainer"
90368
app:icon="@drawable/ic_add_24px" />
91369

92370
</GridLayout>

0 commit comments

Comments
 (0)