Skip to content

Commit 2f5c314

Browse files
gsajithdsn5ft
gsajith
authored and
dsn5ft
committed
Update ExtendedFloatingActionButton documentation
PiperOrigin-RevId: 235619027
1 parent 1db449c commit 2f5c314

File tree

2 files changed

+164
-14
lines changed

2 files changed

+164
-14
lines changed

‎docs/components/ExtendedFloatingActionButton.md‎

Lines changed: 162 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,164 @@
1+
<!--docs:
2+
title: "Extended Floating Action Button"
3+
layout: detail
4+
section: components
5+
excerpt: "A customizable button component with updated visual styles."
6+
iconId: button
7+
path: /catalog/extended-floating-action-button/
8+
-->
9+
110
# Extended Floating Action Button
211

3-
The [Extended Floating Action Button
4-
component](https://material.io/go/design-extended-fab) is yet to be completed,
5-
please follow the [tracking
6-
issue](https://github.com/material-components/material-components-android/issues/79)
7-
for more information.
12+
An `ExtendedFloatingActionButton` displays the primary action in an application.
13+
The Extended FAB is wider than the regular `FloatingActionButton`, and it
14+
includes a text label.
15+
16+
Extended floating action buttons provide quick access to important or common
17+
actions within an app. They have a variety of uses, including:
18+
19+
- Performing a common action, such as starting a new email in a mail app.
20+
- Displaying additional related actions.
21+
- Update or transforming into other UI elements on the screen.
22+
23+
Extended floating action buttons adjust their position and visibility in
24+
response to other UI elements on the screen.
25+
26+
## Design & API Documentation
27+
28+
- [Material Design guidelines: Floating Action Buttons](https://material.io/go/design-extended-fab)
29+
<!--{: .icon-list-item.icon-list-item--spec }-->
30+
- [Class definition](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/floatingactionbutton/ExtendedFloatingActionButton.java)
31+
<!--{: .icon-list-item.icon-list-item--link }-->
32+
- [Class overview](https://developer.android.com/reference/com/google/android/material/floatingactionbutton/ExtendedFloatingActionButton)
33+
<!--{: .icon-list-item.icon-list-item--link }--> <!--{: .icon-list }-->
34+
35+
## Usage
36+
37+
The `ExtendedFloatingActionButton` widget provides a complete implementation of
38+
Material Design's extended FAB component. The example below shows a usage of the
39+
extended FAB within a CoordinatorLayout, but the CoordinatorLayout is not
40+
necessary for this component. There are more generic examples of usage later on.
41+
Here's how to include the widget in your layout:
42+
43+
```xml
44+
<androidx.coordinatorlayout.widget.CoordinatorLayout
45+
xmlns:android="http://schemas.android.com/apk/res/android"
46+
xmlns:app="http://schemas.android.com/apk/res-auto"
47+
android:layout_width="match_parent"
48+
android:layout_height="match_parent">
49+
50+
<!-- Main content -->
51+
52+
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
53+
android:layout_width="wrap_content"
54+
android:layout_height="wrap_content"
55+
android:layout_margin="8dp"
56+
android:contentDescription="@string/extended_fab_content_desc"
57+
android:text="@string/extended_fab_label"
58+
app:icon="@drawable/ic_plus_24px"
59+
app:layout_anchor="@id/app_bar"
60+
app:layout_anchorGravity="bottom|right|end"/>
61+
62+
</androidx.coordinatorlayout.widget.CoordinatorLayout>
63+
```
64+
65+
Note: `ExtendedFloatingActionButton` is a child class of `MaterialButton`,
66+
rather than `FloatingActionButton`. This means that several attributes which are
67+
applicable to `FloatingActionButton` have different naming in
68+
`ExtendedFloatingActionButton`. For example, `FloatingActionButton` uses
69+
`app:srcCompat` to set the icon drawable, whereas `ExtendedFloatingActionButton`
70+
uses `app:icon`. To compare the attribute sets for these two components, please
71+
see the [FloatingActionButton](FloatingActionButton.md) page, and the
72+
"Attributes" table on this page.
73+
74+
### Material Styles
75+
76+
Using `ExtendedFloatingActionButton` with a Material theme
77+
(`Theme.MaterialComponents`) will provide the correct Material styling to your
78+
extended FABs by default.
79+
80+
#### Default Extended Floating Action Button Style
81+
82+
The default style represents an extended floating action button with a colored
83+
background, text, and an icon.
84+
85+
```xml
86+
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
87+
android:layout_width="wrap_content"
88+
android:layout_height="wrap_content"
89+
android:contentDescription="@string/extended_fab_content_desc"
90+
android:text="@string/extended_fab_label"
91+
app:icon="@drawable/ic_plus_24px"/>
92+
```
93+
94+
Extended FABs with no style directly applied to them, but with a Material theme
95+
applied, are styled with the
96+
`Widget.MaterialComponents.ExtendedFloatingActionButton.Icon` style. The `Icon`
97+
suffix indicates that the paddings for this button have been adjusted to give a
98+
more even spacing when an icon is present.
99+
100+
#### Text-only Extended Floating Action Button Style
101+
102+
```xml
103+
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
104+
style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
105+
android:layout_width="wrap_content"
106+
android:layout_height="wrap_content"
107+
android:contentDescription="@string/extended_fab_content_desc"
108+
android:text="@string/extended_fab_label"
109+
app:icon="@drawable/ic_plus_24px"/>
110+
```
111+
112+
The `Widget.MaterialComponents.ExtendedFloatingActionButton`, with no `Icon`
113+
suffix, indicates that the paddings for this extended FAB are more suited for a
114+
text-only button. This style should only be used when your extended FAB does not
115+
need to display an icon, and must be manually applied to your extended FAB.
116+
117+
## Attributes
118+
119+
The following attributes can be changed for Extended Floating Action Button:
120+
121+
Description | Relevant attributes
122+
----------------------------- | -------------------
123+
Button padding | `android:padding`<br/>`android:paddingLeft`<br/>`android:paddingRight`<br/>`android:paddingStart`<br/>`android:paddingEnd`<br/>`android:paddingTop`<br/>`android:paddingBottom`
124+
Button inset | `android:insetLeft`<br/>`android:insetRight`<br/>`android:insetTop`<br/>`android:insetBottom`
125+
Background color | `app:backgroundTint`<br/>`app:backgroundTintMode`
126+
Icon drawable | `app:icon`<br/>`app:iconSize`
127+
Padding between icon and text | `app:iconPadding`
128+
Icon color | `app:iconTint`<br/>`app:iconTintMode`
129+
Stroke | `app:strokeColor`<br/>`app:strokeWidth`
130+
Ripple | `app:rippleColor`
131+
Shape | `app:shapeAppearance`<br/>`app:shapeAppearanceOverlay`
132+
133+
### Theme Attribute Mapping
134+
135+
```
136+
style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton" and
137+
style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton.Icon"
138+
```
139+
140+
Component Attribute | Default Theme Attribute Value
141+
------------------------ | -------------------------------------------
142+
`android:textAppearance` | `textAppearanceButton`
143+
`backgroundTint` | `colorSecondary`
144+
`iconTint` | `colorOnSecondary`
145+
`rippleColor` | `colorOnSecondary` at 32% opacity (pressed)
146+
`android:textColor` | `colorOnSecondary`
147+
148+
### Visibility
149+
150+
Use the `show` and `hide` methods to animate the visibility of a
151+
`ExtendedFloatingActionButton`. The show animation grows the widget and fades it
152+
in, while the hide animation shrinks the widget and fades it out.
153+
154+
### Extending and Shrinking
155+
156+
In addition, `ExtendedFloatingActionButton` has the methods `extend` and
157+
`shrink` to animate showing and hiding the extended FAB's text. The `extend`
158+
animation extends the FAB to show the text and the icon. The `shrink` animation
159+
shrinks the FAB to show just the icon.
160+
161+
## Related Concepts
162+
163+
- [FloatingActionButton](FloatingActionButton.md)
164+
- [MaterialButton](MaterialButton.md)

‎docs/theming/Color.md‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -110,15 +110,8 @@ components, e.g. `tabStyle`, `chipStyle`, `textInputStyle`, and so on.
110110

111111
## Theme Attribute Mapping
112112

113-
The following components have been updated to use the theme attributes described
114-
above:
115-
116-
* [BottomNavigationView](../components/BottomNavigationView.md)
117-
* [Chip](../components/Chip.md)
118-
* [FloatingActionButton](../components/FloatingActionButton.md)
119-
* [MaterialButton](../components/MaterialButton.md)
120-
* [MaterialCardView](../components/MaterialCardView.md)
121-
* [TabLayout](../components/TabLayout.md)
113+
All MDC-Android components have been updated to use the theme attributes
114+
described above, when applicable.
122115

123116
To understand how the high-level theme attributes map to specific parts of each
124117
component, please refer directly to the component's documentation.

0 commit comments

Comments
 (0)