Skip to content

Commit

Permalink
[BottomAppBar] Add menu alignment attribute
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 456848323
  • Loading branch information
@imhappi @raajkumars
imhappi authored and raajkumars committed Jun 24, 2022
1 parent d320d48 commit 397e48f
Show file tree
Hide file tree
Showing 7 changed files with 104 additions and 7 deletions.
15 changes: 15 additions & 0 deletions catalog/java/io/material/catalog/bottomappbar/BottomAppBarMainDemoFragment.java
View file
Expand Up @@ -190,6 +190,21 @@ private void setUpDemoControls(@NonNull View view) {
cradleButton.setOnClickListener(
v -> bar.setFabAnchorMode(BottomAppBar.FAB_ANCHOR_MODE_CRADLE));

// Set up menu alignment toggle buttons.
MaterialButton menuAlignmentAutoButton = view.findViewById(R.id.menu_alignment_auto);
MaterialButton menuAlignmentStartButton = view.findViewById(R.id.menu_alignment_start);

if (bar.getMenuAlignmentMode() == BottomAppBar.MENU_ALIGNMENT_MODE_AUTO) {
menuAlignmentAutoButton.setChecked(true);
} else {
menuAlignmentStartButton.setChecked(true);
}

menuAlignmentAutoButton.setOnClickListener(
v -> bar.setMenuAlignmentMode(BottomAppBar.MENU_ALIGNMENT_MODE_AUTO));
menuAlignmentStartButton.setOnClickListener(
v -> bar.setMenuAlignmentMode(BottomAppBar.MENU_ALIGNMENT_MODE_START));

// Set up hide on scroll switch.
MaterialSwitch barScrollSwitch = view.findViewById(R.id.bar_scroll_switch);
barScrollSwitch.setChecked(bar.getHideOnScroll());
Expand Down
23 changes: 23 additions & 0 deletions catalog/java/io/material/catalog/bottomappbar/res/layout/cat_bottomappbar_content.xml
View file
Expand Up @@ -131,6 +131,29 @@
android:text="@string/cat_bottomappbar_button_cradle" />
</com.google.android.material.button.MaterialButtonToggleGroup>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="@string/cat_bottomappbar_menu_alignment"
android:textAppearance="?attr/textAppearanceBody1" />
<com.google.android.material.button.MaterialButtonToggleGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="@+id/menu_alignment_auto"
style="?attr/materialButtonOutlinedStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cat_bottomappbar_button_menu_alignment_auto" />
<Button
android:id="@+id/menu_alignment_start"
style="?attr/materialButtonOutlinedStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cat_bottomappbar_button_menu_alignment_start" />
</com.google.android.material.button.MaterialButtonToggleGroup>

<com.google.android.material.materialswitch.MaterialSwitch
android:id="@+id/bar_scroll_switch"
android:layout_width="wrap_content"
Expand Down
4 changes: 4 additions & 0 deletions catalog/java/io/material/catalog/bottomappbar/res/values/strings.xml
View file
Expand Up @@ -50,6 +50,10 @@ Phasellus in aliquet mi. Pellentesque habitant morbi tristique senectus et netus
<string name="cat_bottomappbar_fab_animation_mode" description="Name of the FAB Animation Mode toggle button group [CHAR_LIMIT=NONE]">Fab Animation Mode</string>
<string name="cat_bottomappbar_fab_visibility_mode" description="Name of the FAB Visibility Mode toggle button group [CHAR_LIMIT=NONE]">Fab Visibility Mode</string>
<string name="cat_bottomappbar_fab_anchor_mode" description="Name of the FAB Anchor Mode toggle button group [CHAR_LIMIT=NONE]">Fab Anchor Mode</string>
<string name="cat_bottomappbar_menu_alignment" description="Name of the Menu Alignment toggle button group [CHAR_LIMIT=NONE]">Menu Alignment Mode</string>

<string name="cat_bottomappbar_button_embed" description="Name of the option to embed the FAB inside the BottomAppBar [CHAR_LIMIT=NONE]">Embed</string>
<string name="cat_bottomappbar_button_cradle" description="Name of the option to cradle the FAB on top of the BottomAppBar [CHAR_LIMIT=NONE]">Cradle</string>
<string name="cat_bottomappbar_button_menu_alignment_auto" description="Name of the option to set the menu item alignment to be automatic [CHAR_LIMIT=NONE]">Auto</string>
<string name="cat_bottomappbar_button_menu_alignment_start" description="Name of the option to set the menu item alignment to be start-aligned [CHAR_LIMIT=NONE]">Start</string>
</resources>
9 changes: 5 additions & 4 deletions docs/components/BottomAppBar.md
View file
Expand Up @@ -245,10 +245,11 @@ for more attributes.

#### Action item(s) attributes

Element | Attribute | Related method(s) | Default value
-------------- | ---------- | -------------------------- | -------------
**Menu** | `app:menu` | `replaceMenu`<br>`getMenu` | `null`
**Icon color** | N/A | N/A | `?attr/colorControlNormal` (as `Drawable` tint)
Element | Attribute | Related method(s) | Default value
------------------ | ----------------------- | -------------------------------------------------- | -------------
**Menu** | `app:menu` | `replaceMenu`<br>`getMenu` | `null`
**Icon color** | N/A | N/A | `?attr/colorControlNormal` (as `Drawable` tint)
**Alignment mode** | `app:menuAlignmentMode` | `setMenuAlignmentMode` <br> `getMenuAlignmentMode` | `auto`

### Overflow menu attributes

Expand Down
51 changes: 48 additions & 3 deletions lib/java/com/google/android/material/bottomappbar/BottomAppBar.java
View file
Expand Up @@ -164,6 +164,21 @@ public class BottomAppBar extends Toolbar implements AttachedBehavior {
@Retention(RetentionPolicy.SOURCE)
public @interface FabAnimationMode {}

/** The menu items are aligned automatically to avoid the FAB. */
public static final int MENU_ALIGNMENT_MODE_AUTO = 0;
/** The menu items are aligned to the start. */
public static final int MENU_ALIGNMENT_MODE_START = 1;

/**
* The menuAlignmentMode determines the alignment of the menu items in the BottomAppBar.
*
* @hide
*/
@RestrictTo(LIBRARY_GROUP)
@IntDef({MENU_ALIGNMENT_MODE_AUTO, MENU_ALIGNMENT_MODE_START})
@Retention(RetentionPolicy.SOURCE)
public @interface MenuAlignmentMode {}

@Nullable private Integer navigationIconTint;
private final int fabOffsetEndMode;
private final MaterialShapeDrawable materialShapeDrawable = new MaterialShapeDrawable();
Expand All @@ -173,6 +188,7 @@ public class BottomAppBar extends Toolbar implements AttachedBehavior {
@FabAlignmentMode private int fabAlignmentMode;
@FabAnimationMode private int fabAnimationMode;
@FabAnchorMode private int fabAnchorMode;
@MenuAlignmentMode private int menuAlignmentMode;
private boolean hideOnScroll;
private final boolean paddingBottomSystemWindowInsets;
private final boolean paddingLeftSystemWindowInsets;
Expand Down Expand Up @@ -302,6 +318,8 @@ public BottomAppBar(@NonNull Context context, @Nullable AttributeSet attrs, int
fabAnimationMode =
a.getInt(R.styleable.BottomAppBar_fabAnimationMode, FAB_ANIMATION_MODE_SCALE);
fabAnchorMode = a.getInt(R.styleable.BottomAppBar_fabAnchorMode, FAB_ANCHOR_MODE_CRADLE);
menuAlignmentMode =
a.getInt(R.styleable.BottomAppBar_menuAlignmentMode, MENU_ALIGNMENT_MODE_AUTO);
hideOnScroll = a.getBoolean(R.styleable.BottomAppBar_hideOnScroll, false);
// Reading out if we are handling bottom padding, so we can apply it to the FAB.
paddingBottomSystemWindowInsets =
Expand Down Expand Up @@ -484,6 +502,32 @@ public void setFabAnimationMode(@FabAnimationMode int fabAnimationMode) {
this.fabAnimationMode = fabAnimationMode;
}

/**
* Sets the current {@code menuAlignmentMode}. Determines where the menu items in the BottomAppBar
* will be aligned.
*
* @param menuAlignmentMode the desired menuAlignmentMode, either {@link
* #MENU_ALIGNMENT_MODE_AUTO} or {@link #MENU_ALIGNMENT_MODE_START}.
*/
public void setMenuAlignmentMode(@MenuAlignmentMode int menuAlignmentMode) {
if (this.menuAlignmentMode != menuAlignmentMode) {
this.menuAlignmentMode = menuAlignmentMode;
ActionMenuView menu = getActionMenuView();
if (menu != null) {
translateActionMenuView(menu, fabAlignmentMode, isFabVisibleOrWillBeShown());
}
}
}

/**
* Returns the current menuAlignmentMode, either {@link #MENU_ALIGNMENT_MODE_AUTO} or {@link
* #MENU_ALIGNMENT_MODE_START}.
*/
@MenuAlignmentMode
public int getMenuAlignmentMode() {
return menuAlignmentMode;
}

public void setBackgroundTint(@Nullable ColorStateList backgroundTint) {
DrawableCompat.setTintList(materialShapeDrawable, backgroundTint);
}
Expand Down Expand Up @@ -1023,7 +1067,8 @@ protected int getActionMenuViewTranslationX(
@NonNull ActionMenuView actionMenuView,
@FabAlignmentMode int fabAlignmentMode,
boolean fabAttached) {
if (fabAlignmentMode != FAB_ALIGNMENT_MODE_END || !fabAttached) {
if (menuAlignmentMode != MENU_ALIGNMENT_MODE_START
&& (fabAlignmentMode != FAB_ALIGNMENT_MODE_END || !fabAttached)) {
return 0;
}

Expand All @@ -1034,8 +1079,8 @@ protected int getActionMenuViewTranslationX(
for (int i = 0; i < getChildCount(); i++) {
View view = getChildAt(i);
boolean isAlignedToStart =
view.getLayoutParams() instanceof Toolbar.LayoutParams
&& (((Toolbar.LayoutParams) view.getLayoutParams()).gravity
view.getLayoutParams() instanceof LayoutParams
&& (((LayoutParams) view.getLayoutParams()).gravity
& Gravity.RELATIVE_HORIZONTAL_GRAVITY_MASK)
== Gravity.START;
if (isAlignedToStart) {
Expand Down
1 change: 1 addition & 0 deletions lib/java/com/google/android/material/bottomappbar/res-public/values/public.xml
View file
Expand Up @@ -22,6 +22,7 @@
<public name="fabCradleMargin" type="attr"/>
<public name="fabCradleRoundedCornerRadius" type="attr"/>
<public name="fabCradleVerticalOffset" type="attr"/>
<public name="menuAlignmentMode" type="attr"/>
<public name="hideOnScroll" type="attr"/>
<public name="Widget.MaterialComponents.BottomAppBar" type="style"/>
<public name="Widget.MaterialComponents.BottomAppBar.Colored" type="style"/>
Expand Down
8 changes: 8 additions & 0 deletions lib/java/com/google/android/material/bottomappbar/res/values/attrs.xml
View file
Expand Up @@ -58,6 +58,14 @@
<attr name="paddingLeftSystemWindowInsets"/>
<!-- Whether the BottomAppBar should apply padding to be to the left of the right window insets. -->
<attr name="paddingRightSystemWindowInsets"/>
<!-- The alignment of the BottomAppBar menu items. -->
<attr name="menuAlignmentMode">
<!-- Mode that aligns the menu automatically to avoid the FAB. Menu will be aligned at the end
when the FAB is center aligned, and start when the FAB is end aligned. -->
<enum name="auto" value="0"/>
<!-- Mode that aligns the menu to the start. -->
<enum name="start" value="1"/>
</attr>
</declare-styleable>

<!-- Style to use for BottomAppBar in this theme. -->
Expand Down

0 comments on commit 397e48f

Please sign in to comment.