Skip to content

Commit ebcfcd1

Browse files
imhappikendrickumstattd
imhappi
authored and
kendrickumstattd
committed
[NavigationRail][BottomNavigation] Add horizontal spacing attribute for space in between the icon and the text when the item is in the start icon gravity configuration
PiperOrigin-RevId: 688222363
1 parent 7f4413d commit ebcfcd1

File tree

10 files changed

+104
-18
lines changed

10 files changed

+104
-18
lines changed

‎docs/components/BottomNavigation.md

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -300,13 +300,14 @@ expands to wrap the content of the Bottom Navigation item when the
300300

301301
#### Icon attributes
302302

303-
**Element** | **Attribute** | **Related methods** | **Default value**
304-
-------------------- | ------------------------------------- | ---------------------------------------------------------------- | -----------------
305-
**Icon** | `android:icon` in the `menu` resource | N/A | N/A
306-
**Size** | `app:itemIconSize` | `setItemIconSize`<br/>`setItemIconSizeRes`<br/>`getItemIconSize` | `24dp`
307-
**Color (inactive)** | `app:itemIconTint` | `setItemIconTintList`<br/>`getItemIconTintList` | `?attr/colorOnSurfaceVariant` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomnavigation/res/color/m3_navigation_bar_item_with_indicator_icon_tint.xml))
308-
**Color (active)** | " | " | `?attr/colorOnSecondaryContainer` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomnavigation/res/color/m3_navigation_bar_item_with_indicator_icon_tint.xml))
309-
**Gravity** | `app:itemIconGravity` | `setItemIconGravity`<br/>`getItemIconGravity` | `TOP`
303+
**Element** | **Attribute** | **Related methods** | **Default value**
304+
--------------------------------- | ------------------------------------- | ------------------------------------------------------------------- | -----------------
305+
**Icon** | `android:icon` in the `menu` resource | N/A | N/A
306+
**Size** | `app:itemIconSize` | `setItemIconSize`<br/>`setItemIconSizeRes`<br/>`getItemIconSize` | `24dp`
307+
**Color (inactive)** | `app:itemIconTint` | `setItemIconTintList`<br/>`getItemIconTintList` | `?attr/colorOnSurfaceVariant` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomnavigation/res/color/m3_navigation_bar_item_with_indicator_icon_tint.xml))
308+
**Color (active)** | " | " | `?attr/colorOnSecondaryContainer` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomnavigation/res/color/m3_navigation_bar_item_with_indicator_icon_tint.xml))
309+
**Gravity** | `app:itemIconGravity` | `setItemIconGravity`<br/>`getItemIconGravity` | `TOP`
310+
**Icon label horizontal padding** | `app:iconLabelHorizontalSpacing` | `setIconLabelHorizontalSpacing`<br/>`getIconLabelHorizontalSpacing` | `4dp`
310311

311312
#### Text label attributes
312313

‎docs/components/NavigationRail.md

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -348,13 +348,14 @@ expands to wrap the content of the Navigation Rail item when the
348348

349349
#### Icon attributes
350350

351-
**Element** | **Attribute** | **Related methods** | **Default value**
352-
-------------------- | ------------------------------------- | ---------------------------------------------------------------- | -----------------
353-
**Icon** | `android:icon` in the `menu` resource | N/A | N/A
354-
**Size** | `app:itemIconSize` | `setItemIconSize`<br/>`setItemIconSizeRes`<br/>`getItemIconSize` | `24dp`
355-
**Color (inactive)** | `app:itemIconTint` | `setItemIconTintList`<br/>`getItemIconTintList` | `?attr/colorOnSurfaceVariant`
356-
**Color (active)** | `app:itemIconTint` | `setItemIconTintList`<br/>`getItemIconTintList` | `?attr/colorOnSecondaryContainer`
357-
**Gravity** | `app:itemIconGravity` | `setItemIconGravity`<br/>`getItemIconGravity` | `TOP`
351+
**Element** | **Attribute** | **Related methods** | **Default value**
352+
--------------------------------- | ------------------------------------- | ------------------------------------------------------------------- | -----------------
353+
**Icon** | `android:icon` in the `menu` resource | N/A | N/A
354+
**Size** | `app:itemIconSize` | `setItemIconSize`<br/>`setItemIconSizeRes`<br/>`getItemIconSize` | `24dp`
355+
**Color (inactive)** | `app:itemIconTint` | `setItemIconTintList`<br/>`getItemIconTintList` | `?attr/colorOnSurfaceVariant`
356+
**Color (active)** | `app:itemIconTint` | `setItemIconTintList`<br/>`getItemIconTintList` | `?attr/colorOnSecondaryContainer`
357+
**Gravity** | `app:itemIconGravity` | `setItemIconGravity`<br/>`getItemIconGravity` | `TOP`
358+
**Icon label horizontal padding** | `app:iconLabelHorizontalSpacing` | `setIconLabelHorizontalSpacing`<br/>`getIconLabelHorizontalSpacing` | `8dp`
358359

359360
#### Text label attributes
360361

‎lib/java/com/google/android/material/bottomnavigation/res/values/styles.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.BottomNavigationView</item>
8585
<item name="shapeAppearance">@style/ShapeAppearance.M3.Comp.NavigationBar.Container.Shape</item>
8686
<item name="activeIndicatorLabelPadding">@dimen/m3_navigation_item_active_indicator_label_padding</item>
87+
<item name="iconLabelHorizontalSpacing">@dimen/m3_navigation_item_active_indicator_label_padding</item>
8788
</style>
8889

8990
<style name="Widget.Material3.BottomNavigationView" parent="Base.Widget.Material3.BottomNavigationView"/>

‎lib/java/com/google/android/material/navigation/NavigationBarItemView.java

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ public abstract class NavigationBarItemView extends FrameLayout
9494
private int itemPaddingTop;
9595
private int itemPaddingBottom;
9696
private int activeIndicatorLabelPadding;
97+
private int iconLabelHorizontalSpacing;
9798
private float shiftAmountY;
9899
private float scaleUpFactor;
99100
private float scaleDownFactor;
@@ -187,6 +188,7 @@ public NavigationBarItemView(@NonNull Context context) {
187188
itemPaddingTop = getResources().getDimensionPixelSize(getItemDefaultMarginResId());
188189
itemPaddingBottom = labelGroup.getPaddingBottom();
189190
activeIndicatorLabelPadding = 0;
191+
iconLabelHorizontalSpacing = 0;
190192

191193

192194
// The labels used aren't always visible, so they are unreliable for accessibility. Instead,
@@ -356,11 +358,8 @@ private void addDefaultExpandedLabelGroupViews() {
356358
LinearLayout.LayoutParams expandedLabelGroupLp = new LinearLayout.LayoutParams(
357359
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
358360
expandedLabelGroupLp.gravity = Gravity.CENTER;
359-
expandedLabelGroupLp.rightMargin =
360-
getLayoutDirection() == LAYOUT_DIRECTION_RTL ? activeIndicatorLabelPadding : 0;
361-
expandedLabelGroupLp.leftMargin =
362-
getLayoutDirection() == LAYOUT_DIRECTION_RTL ? 0 : activeIndicatorLabelPadding;
363361
innerContentContainer.addView(expandedLabelGroup, expandedLabelGroupLp);
362+
setExpandedLabelGroupMargins();
364363
}
365364

366365
private void updateItemIconGravity() {
@@ -785,6 +784,17 @@ public void setIconSize(int iconSize) {
785784
iconParams.width = iconSize;
786785
iconParams.height = iconSize;
787786
icon.setLayoutParams(iconParams);
787+
// Reset expanded label group margins, in case the icon width is now 0
788+
setExpandedLabelGroupMargins();
789+
}
790+
791+
private void setExpandedLabelGroupMargins() {
792+
int margin = icon.getLayoutParams().width > 0 ? iconLabelHorizontalSpacing : 0;
793+
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) expandedLabelGroup.getLayoutParams();
794+
if (lp != null) {
795+
lp.rightMargin = getLayoutDirection() == LAYOUT_DIRECTION_RTL ? margin : 0;
796+
lp.leftMargin = getLayoutDirection() == LAYOUT_DIRECTION_RTL ? 0 : margin;
797+
}
788798
}
789799

790800
// TODO(b/338647654): We can remove this once navigation rail is updated
@@ -1020,6 +1030,18 @@ public void setActiveIndicatorLabelPadding(int activeIndicatorLabelPadding) {
10201030
}
10211031
}
10221032

1033+
/**
1034+
* Set the horizontal distance between the icon and the item label which shows when the item is in
1035+
* the {@link NavigationBarView#ITEM_ICON_GRAVITY_START} configuration.
1036+
*/
1037+
public void setIconLabelHorizontalSpacing(int iconLabelHorizontalSpacing) {
1038+
if (this.iconLabelHorizontalSpacing != iconLabelHorizontalSpacing) {
1039+
this.iconLabelHorizontalSpacing = iconLabelHorizontalSpacing;
1040+
setExpandedLabelGroupMargins();
1041+
requestLayout();
1042+
}
1043+
}
1044+
10231045
/** Set whether or not this item should show an active indicator when checked. */
10241046
public void setActiveIndicatorEnabled(boolean enabled) {
10251047
this.activeIndicatorEnabled = enabled;

‎lib/java/com/google/android/material/navigation/NavigationBarMenuView.java

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ public abstract class NavigationBarMenuView extends ViewGroup implements MenuVie
103103
private int itemPaddingTop = NO_PADDING;
104104
private int itemPaddingBottom = NO_PADDING;
105105
private int itemActiveIndicatorLabelPadding = NO_PADDING;
106+
private int iconLabelHorizontalSpacing = NO_PADDING;
106107
private boolean itemActiveIndicatorEnabled;
107108
private int itemActiveIndicatorWidth;
108109
private int itemActiveIndicatorHeight;
@@ -522,6 +523,33 @@ public void setActiveIndicatorLabelPadding(@Px int activeIndicatorLabelPadding)
522523
}
523524
}
524525

526+
/**
527+
* Get the horizontal distance between the item's icon and the label which
528+
* is shown when the item is in the {@link NavigationBarView#ITEM_ICON_GRAVITY_START}
529+
* configuration.
530+
*/
531+
@Px
532+
public int getIconLabelHorizontalSpacing() {
533+
return iconLabelHorizontalSpacing;
534+
}
535+
536+
/**
537+
* Set the horizontal distance between the icon and the label which is shown when the item is in
538+
* the {@link NavigationBarView#ITEM_ICON_GRAVITY_START} configuration.
539+
*/
540+
public void setIconLabelHorizontalSpacing(
541+
@Px int iconLabelHorizontalSpacing) {
542+
this.iconLabelHorizontalSpacing = iconLabelHorizontalSpacing;
543+
if (buttons != null) {
544+
for (NavigationBarMenuItemView item : buttons) {
545+
if (item instanceof NavigationBarItemView) {
546+
((NavigationBarItemView) item)
547+
.setIconLabelHorizontalSpacing(iconLabelHorizontalSpacing);
548+
}
549+
}
550+
}
551+
}
552+
525553
/**
526554
* Returns whether or not an active indicator is enabled for the navigation bar.
527555
*
@@ -1052,6 +1080,9 @@ private NavigationBarItemView createMenuItem(
10521080
if (itemActiveIndicatorLabelPadding != NO_PADDING) {
10531081
child.setActiveIndicatorLabelPadding(itemActiveIndicatorLabelPadding);
10541082
}
1083+
if (iconLabelHorizontalSpacing != NO_PADDING) {
1084+
child.setIconLabelHorizontalSpacing(iconLabelHorizontalSpacing);
1085+
}
10551086
child.setActiveIndicatorWidth(itemActiveIndicatorWidth);
10561087
child.setActiveIndicatorHeight(itemActiveIndicatorHeight);
10571088
child.setActiveIndicatorExpandedWidth(itemActiveIndicatorExpandedWidth);

‎lib/java/com/google/android/material/navigation/NavigationBarView.java

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -289,6 +289,11 @@ public NavigationBarView(
289289
attributes.getDimensionPixelSize(R.styleable.NavigationBarView_activeIndicatorLabelPadding, 0));
290290
}
291291

292+
if (attributes.hasValue(R.styleable.NavigationBarView_iconLabelHorizontalSpacing)) {
293+
setIconLabelHorizontalSpacing(
294+
attributes.getDimensionPixelSize(R.styleable.NavigationBarView_iconLabelHorizontalSpacing, 0));
295+
}
296+
292297
if (attributes.hasValue(R.styleable.NavigationBarView_elevation)) {
293298
setElevation(attributes.getDimensionPixelSize(R.styleable.NavigationBarView_elevation, 0));
294299
}
@@ -718,6 +723,24 @@ public int getActiveIndicatorLabelPadding() {
718723
return menuView.getActiveIndicatorLabelPadding();
719724
}
720725

726+
/**
727+
* Set the horizontal distance between the icon and the item's label when the item is in the
728+
* {@link NavigationBarView#ITEM_ICON_GRAVITY_START} configuration.
729+
*/
730+
public void setIconLabelHorizontalSpacing(@Px int iconLabelSpacing) {
731+
menuView.setIconLabelHorizontalSpacing(iconLabelSpacing);
732+
}
733+
734+
/**
735+
* Get the horizontal distance between the icon and the item's label when the item is in the
736+
* {@link NavigationBarView#ITEM_ICON_GRAVITY_START} configuration.
737+
*/
738+
@Px
739+
public int getIconLabelHorizontalSpacing() {
740+
return menuView.getIconLabelHorizontalSpacing();
741+
}
742+
743+
721744
/**
722745
* Get whether or not a selected item should show an active indicator.
723746
*

‎lib/java/com/google/android/material/navigation/res-public/values/public.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
<public name="Widget.Material3.DrawerLayout" type="style"/>
5757

5858
<public name="activeIndicatorLabelPadding" type="attr"/>
59+
<public name="iconLabelHorizontalSpacing" type="attr"/>
5960
<public name="itemPaddingTop" type="attr"/>
6061
<public name="itemPaddingBottom" type="attr"/>
6162
<public name="itemActiveIndicatorStyle" type="attr"/>

‎lib/java/com/google/android/material/navigation/res/values/attrs.xml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,10 @@
8787
<attr name="itemPaddingBottom" format="dimension"/>
8888
<!-- Padding between the active indicator container and label. -->
8989
<attr name="activeIndicatorLabelPadding" format="dimension"/>
90+
<!-- The horizontal spacing between the icon and label which will show when
91+
the item is in its horizontal configuration (ie. the start icon gravity
92+
configuration). -->
93+
<attr name="iconLabelHorizontalSpacing" format="dimension"/>
9094

9195
<!-- The style used for each navigation item's active indicator-->
9296
<attr name="itemActiveIndicatorStyle" format="reference"/>

‎lib/java/com/google/android/material/navigationrail/res/values/dimens.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
<dimen name="m3_navigation_rail_item_active_indicator_margin_horizontal">4dp</dimen>
4040
<dimen name="m3_navigation_rail_label_padding_horizontal">2dp</dimen>
4141
<dimen name="m3_navigation_rail_icon_label_padding">4dp</dimen>
42+
<dimen name="m3_navigation_rail_icon_label_horizontal_padding">8dp</dimen>
4243

4344
<dimen name="m3_navigation_rail_expanded_active_indicator_height">56dp</dimen>
4445
<dimen name="m3_navigation_rail_expanded_leading_trailing_space">20dp</dimen>

‎lib/java/com/google/android/material/navigationrail/res/values/styles.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@
8787
<item name="itemTextAppearanceActive">@macro/m3_comp_navigation_rail_label_text_type</item>
8888
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.NavigationRailView</item>
8989
<item name="activeIndicatorLabelPadding">@dimen/m3_navigation_rail_icon_label_padding</item>
90+
<item name="iconLabelHorizontalSpacing">@dimen/m3_navigation_rail_icon_label_horizontal_padding</item>
9091
</style>
9192

9293
<style name="Widget.Material3.NavigationRailView.ActiveIndicator" parent="">

0 commit comments

Comments
 (0)