Skip to content

Latest commit

 

History

History
158 lines (120 loc) · 6.16 KB

OverflowLinearLayout.md

File metadata and controls

158 lines (120 loc) · 6.16 KB

Overflow linear layout

The OverflowLinearLayout is usually used with the floatingtoolbar and the dockedtoolbar. It allows for its children to be automatically hidden/shown depending on its parent's max size. The hidden children are put in an overflow menu, and an overflow button is added as the last child of its parent layout.

Note: if you'd like to hide/show children independently from this layout's decisions, you'll need to add/remove the desired view(s), instead of changing their visibility, as the OverflowLinearLayout will determine the final visibility value of its children.

Key properties

OverflowLinearLayout attributes

Element Attribute Related methods Default value
Overflow button icon app:overflowButtonIcon setOverflowButtonIcon
setOverflowButtonIconResource
getOverflowButtonIcon		 @drawable/abc_ic_menu_overflow_material

OverflowLinearLayout_Layout attributes

Attributes for the children of OverflowLinearLayout:

Element Attribute Related methods Default value
Overflow menu's item text app:layout_overflowText N/A null
Overflow menu's item icon app:layout_overflowIcon N/A null

OverflowLinearLayout styles

Element Style Theme attribute
Style Widget.Material3.OverflowLinearLayout ?attr/overflowLinearLayoutStyle
Button overflow overflowLinearLayoutOverflowButtonStyle ?attr/overflowLinearLayoutOverflowButtonStyle
Popup overflow overflowLinearLayoutPopupMenuStyle ?attr/overflowLinearLayoutPopupMenuStyle

For the full list, see styles and overflow linear layout attributes

Code implementation

Adding overflow linear layout

A common usage looks like:

<ParentLayout
 ...>
  <com.google.android.material.overflow.OverflowLinearLayout>
    <ParentLayoutItem
      ...
      app:layout_overflowText="@string/item_1_text"
      app:layout_overflowIcon="@drawable/item_1_icon" />
    <ParentLayoutItem
      ...
      app:layout_overflowText="@string/item_2_text"
      app:layout_overflowIcon="@drawable/item_2_icon" />
    ...
  </com.google.android.material.overflow.OverflowLinearLayout>
</ParentLayout>

When using OverflowLinearLayout, you should set app:layout_overflowText on on each child, as that will show as the text of the menu item that corresponds to the hidden child. Optionally, you can also set app:layout_overflowIcon.

See floatingtoolbar and dockedtoolbar for example usages with those components.

API and source code:

Making overflow linear layout accessible

As mentioned above, you should set app:layout_overflowText on each direct child of OverflowLinearLayout that may be overflowed, so that the overflow menu items have text that can be read by screen readers.

Customizing overflow linear layout

Theming overflow linear layout

Overflow linear layout supports Material theming, which can customize color, shape and typography.

Implementing overflow linear layout theming

Use theme attributes and a style in res/values/styles.xml which apply to all overflow linear layouts and affect other components:

<style name="Theme.App" parent="Theme.Material3.*">
    ...
    <item name="colorPrimary">@color/shrine_pink_100</item>
    ...
</style>

Use a default style theme attribute, styles, and a theme overlay, which apply to all overflow linear layouts but do not affect other components:

<style name="Theme.App" parent="Theme.Material3.*">
  ...
  <item name="overflowLinearLayoutStyle">@style/Widget.App.OverflowLinearLayout</item>
  <item name="floatingToolbarStyle">@style/Widget.App.FloatingToolbar</item>
</style>

<style name="Widget.App.OverflowLinearLayout" parent="Widget.Material3.OverflowLinearLayout">
  <item name="materialThemeOverlay">@style/ThemeOverlay.App.OverflowLinearLayout</item>
</style>

<style name="ThemeOverlay.App.OverflowLinearLayout" parent="ThemeOverlay.Material3.OverflowLinearLayout">
  <item name="colorPrimary">@color/shrine_theme_light_primary</item>
  <item name="overflowLinearLayoutOverflowButtonStyle">@style/Widget.App.OverflowButton</item>
  <item name="overflowLinearLayoutPopupMenuStyle">@style/Widget.App.PopupMenuStyle</item>
  ...
</style>

<style name="Widget.App.OverflowButton" parent="Widget.Material3.Button.IconButton">
  ...
</style>

<style name="Widget.App.PopupMenuStyle" parent="Widget.Material3.PopupMenuStyle">
...
</style>

Or use the style in the layout, which affects only this specific overflow linear layout:

<com.google.android.material.floatingtoolbar.FloatingToolbarLayout
  ...
  style="@style.Widget.App.FloatingToolbarLayout">
  <com.google.android.material.overflow.OverflowLinearLayout
    ...
    style="@style/Widget.App.OverflowLinearLayout"/>
</com.google.android.material.floatingtoolbar.FloatingToolbarLayout>