Skip to content

Commit f61cea5

Browse files
pekingmeleticiarossi
pekingme
authored and
leticiarossi
committed
[Button] Added adaptation section in dev doc.
PiperOrigin-RevId: 749080366
1 parent d0194fb commit f61cea5

File tree

4 files changed

+133
-0
lines changed

4 files changed

+133
-0
lines changed

‎docs/components/Button.md‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -749,6 +749,139 @@ Element | Style | Theme Attribute
749749
----------------- | -------------------------------------- | ---------------
750750
**Default style** | `Widget.Material3.MaterialButtonGroup` | `?attr/materialButtonGroupStyle`
751751

752+
### Making button groups adaptive
753+
754+
`MaterialButtonGroup` inherits from the `LinearLayout`. It can be configured to
755+
achieve different child arrangements for different screen sizes or foldable
756+
screens by using `layout_width` and `layout_weight`.
757+
758+
#### Fixed button sizes
759+
760+
When child buttons should not be adjusted while screen size changes, consider
761+
using `layout_width` on all buttons.
762+
763+
![Button group with fixed arrangement](assets/buttons/group_arrangement_fixed.png)
764+
765+
```xml
766+
<com.google.android.material.button.MaterialButtonGroup
767+
android:layout_width="match_parent"
768+
android:layout_height="wrap_content"
769+
android:paddingBottom="8dp"
770+
android:gravity="center_horizontal"
771+
android:spacing="4dp">
772+
<Button
773+
style="?attr/materialIconButtonFilledStyle"
774+
android:layout_width="wrap_content"
775+
android:layout_height="wrap_content"
776+
android:contentDescription="@string/cat_button_previous_icon"
777+
android:gravity="center"
778+
app:iconGravity="textStart"
779+
app:icon="@drawable/cat_button_previous_icon"/>
780+
<Button
781+
style="?attr/materialIconButtonFilledStyle"
782+
android:layout_width="wrap_content"
783+
android:layout_height="wrap_content"
784+
android:contentDescription="@string/cat_button_play_icon"
785+
android:gravity="center"
786+
app:iconGravity="textStart"
787+
app:icon="@drawable/cat_button_play_icon"/>
788+
<Button
789+
style="?attr/materialIconButtonFilledStyle"
790+
android:layout_width="wrap_content"
791+
android:layout_height="wrap_content"
792+
android:contentDescription="@string/cat_button_next_icon"
793+
android:gravity="center"
794+
app:iconGravity="textStart"
795+
app:icon="@drawable/cat_button_next_icon"/>
796+
</com.google.android.material.button.MaterialButtonGroup>
797+
```
798+
799+
#### Flexible button sizes
800+
801+
When all child buttons are equally important or their sizes are proportional to
802+
each other, consider using `layout_weight` on all buttons.
803+
804+
![Button group with flexible arrangement](assets/buttons/group_arrangement_flexible.png)
805+
806+
```xml
807+
<com.google.android.material.button.MaterialButtonGroup
808+
android:layout_width="match_parent"
809+
android:layout_height="wrap_content"
810+
android:paddingBottom="8dp"
811+
android:gravity="center_horizontal"
812+
android:spacing="4dp">
813+
<Button
814+
style="?attr/materialIconButtonFilledStyle"
815+
android:layout_width="0dp"
816+
android:layout_height="wrap_content"
817+
android:layout_weight="1"
818+
android:contentDescription="@string/cat_button_previous_icon"
819+
android:gravity="center"
820+
app:iconGravity="textStart"
821+
app:icon="@drawable/cat_button_previous_icon"/>
822+
<Button
823+
style="?attr/materialIconButtonFilledStyle"
824+
android:layout_width="0dp"
825+
android:layout_height="wrap_content"
826+
android:layout_weight="2"
827+
android:contentDescription="@string/cat_button_play_icon"
828+
android:gravity="center"
829+
app:iconGravity="textStart"
830+
app:icon="@drawable/cat_button_play_icon"/>
831+
<Button
832+
style="?attr/materialIconButtonFilledStyle"
833+
android:layout_width="0dp"
834+
android:layout_height="wrap_content"
835+
android:layout_weight="1"
836+
android:contentDescription="@string/cat_button_next_icon"
837+
android:gravity="center"
838+
app:iconGravity="textStart"
839+
app:icon="@drawable/cat_button_next_icon"/>
840+
</com.google.android.material.button.MaterialButtonGroup>
841+
```
842+
843+
#### Mixed button sizes
844+
845+
When only some buttons are flexible for different screen sizes, consider using
846+
`layout_weight` on these buttons but use `layout_width` on the rest as below.
847+
848+
![Button group with mixed arrangement](assets/buttons/group_arrangement_mixed.png)
849+
850+
```xml
851+
<com.google.android.material.button.MaterialButtonGroup
852+
android:layout_width="match_parent"
853+
android:layout_height="wrap_content"
854+
android:paddingBottom="8dp"
855+
android:gravity="center_horizontal"
856+
android:spacing="4dp">
857+
<Button
858+
style="?attr/materialIconButtonFilledStyle"
859+
android:layout_width="wrap_content"
860+
android:layout_height="wrap_content"
861+
android:contentDescription="@string/cat_button_previous_icon"
862+
android:gravity="center"
863+
app:iconGravity="textStart"
864+
app:icon="@drawable/cat_button_previous_icon"/>
865+
<Button
866+
style="?attr/materialIconButtonFilledStyle"
867+
android:layout_width="0dp"
868+
android:layout_height="wrap_content"
869+
android:layout_weight="2"
870+
android:contentDescription="@string/cat_button_play_icon"
871+
android:gravity="center"
872+
app:iconGravity="textStart"
873+
app:icon="@drawable/cat_button_play_icon"/>
874+
<Button
875+
style="?attr/materialIconButtonFilledStyle"
876+
android:layout_width="wrap_content"
877+
android:layout_height="wrap_content"
878+
android:contentDescription="@string/cat_button_next_icon"
879+
android:gravity="center"
880+
app:iconGravity="textStart"
881+
app:icon="@drawable/cat_button_next_icon"/>
882+
</com.google.android.material.button.MaterialButtonGroup>
883+
```
884+
752885
### Split button
753886

754887
A specialized type of the connected button group is the split button. The

‎docs/components/assets/buttons/group_arrangement_fixed.png‎

32.3 KB
Loading

‎docs/components/assets/buttons/group_arrangement_flexible.png‎

30.3 KB
Loading

‎docs/components/assets/buttons/group_arrangement_mixed.png‎

20.1 KB
Loading

0 commit comments

Comments
 (0)