[ButtonToggleGroup] Added APIs to customize inside spacing and corner…

… size between buttons.

PiperOrigin-RevId: 628469557

catalog/androidTest/javatests/io/material/catalog/button/ButtonToggleGroupDemoFragmentTest.java

@@ -18,6 +18,7 @@
 
 import static androidx.test.espresso.Espresso.onView;
 import static androidx.test.espresso.action.ViewActions.click;
+import static androidx.test.espresso.action.ViewActions.scrollTo;
 import static androidx.test.espresso.assertion.ViewAssertions.matches;
 import static androidx.test.espresso.matcher.ViewMatchers.isDisplayed;
 import static androidx.test.espresso.matcher.ViewMatchers.isNotChecked;
@@ -70,7 +71,7 @@ public void testSelectionRequiredToggle() {
 
  @Test
  public void testSelectionRequiredToggle_afterClicking() {
- onView(withId(io.material.catalog.button.R.id.switch_toggle)).perform(click());
+ onView(withId(io.material.catalog.button.R.id.switch_toggle)).perform(scrollTo()).perform(click());
 
  onView(withId(io.material.catalog.button.R.id.icon_only_group))
  .check(matches(checkSelectionRequired(true)));

catalog/java/io/material/catalog/button/ButtonToggleGroupDemoFragment.java

@@ -30,8 +30,8 @@
 import androidx.annotation.Nullable;
 import com.google.android.material.button.MaterialButton;
 import com.google.android.material.button.MaterialButtonToggleGroup;
-import com.google.android.material.button.MaterialButtonToggleGroup.OnButtonCheckedListener;
 import com.google.android.material.materialswitch.MaterialSwitch;
+import com.google.android.material.slider.Slider;
 import com.google.android.material.snackbar.Snackbar;
 import io.material.catalog.feature.DemoFragment;
 import io.material.catalog.feature.DemoUtils;
@@ -92,15 +92,28 @@ public View onCreateDemoView(
 
  for (MaterialButtonToggleGroup toggleGroup : toggleGroups) {
  toggleGroup.addOnButtonCheckedListener(
- new OnButtonCheckedListener() {
- @Override
- public void onButtonChecked(
- MaterialButtonToggleGroup group, int checkedId, boolean isChecked) {
- String message = "button" + (isChecked ? " checked" : " unchecked");
- Snackbar.make(view, message, Snackbar.LENGTH_SHORT).show();
- }
+ (group, checkedId, isChecked) -> {
+ String message = "button" + (isChecked ? " checked" : " unchecked");
+ Snackbar.make(view, message, Snackbar.LENGTH_SHORT).show();
  });
  }
+
+ Slider insideCornerSizeSlider = view.findViewById(R.id.insideCornerSizeSlider);
+ insideCornerSizeSlider.addOnChangeListener(
+ (slider, value, fromUser) -> {
+ for (MaterialButtonToggleGroup toggleGroup : toggleGroups) {
+ toggleGroup.setInsideCornerSizeInFraction(value / 100f);
+ }
+ });
+
+ Slider spacingSlider = view.findViewById(R.id.spacingSlider);
+ spacingSlider.addOnChangeListener(
+ (slider, value, fromUser) -> {
+ float pixelsInDp = view.getResources().getDisplayMetrics().density;
+ for (MaterialButtonToggleGroup toggleGroup : toggleGroups) {
+ toggleGroup.setSpacing((int) (value * pixelsInDp));
+ }
+ });
  return view;
  }
 
@@ -109,9 +122,8 @@ private int getInsetForOrientation(int orientation) {
  }
 
  private static void adjustParams(LayoutParams layoutParams, int orientation) {
- layoutParams.width = orientation == VERTICAL
- ? LayoutParams.MATCH_PARENT
- : LayoutParams.WRAP_CONTENT;
+ layoutParams.width =
+ orientation == VERTICAL ? LayoutParams.MATCH_PARENT : LayoutParams.WRAP_CONTENT;
  }
 
  @LayoutRes

catalog/java/io/material/catalog/button/res/layout/cat_buttons_toggle_group_fragment.xml

@@ -147,6 +147,30 @@
  app:iconPadding="0dp"/>
  </com.google.android.material.button.MaterialButtonToggleGroup>
 
+ <TextView
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:text="@string/cat_inside_corner_size_label"/>
+
+ <com.google.android.material.slider.Slider
+ android:id="@+id/insideCornerSizeSlider"
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ android:valueFrom="0"
+ android:valueTo="50"/>
+
+ <TextView
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:text="@string/cat_spacing_label"/>
+
+ <com.google.android.material.slider.Slider
+ android:id="@+id/spacingSlider"
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ android:valueFrom="0"
+ android:valueTo="20"/>
+
  <com.google.android.material.materialswitch.MaterialSwitch
  android:id="@+id/switch_toggle"
  android:paddingTop="16dp"

catalog/java/io/material/catalog/button/res/values/strings.xml

@@ -58,6 +58,10 @@
  <string name="cat_single_select">Single-select</string>
  <string name="cat_multi_select">Multi-select</string>
  <string name="cat_icon_only">Icon only</string>
+ <string description="A label for a spacing slider [CHAR LIMIT=NONE]"
+ name="cat_spacing_label">Spacing (dp)</string>
+ <string description="A label for an inside corner size slider [CHAR LIMIT=NONE]"
+ name="cat_inside_corner_size_label">Inside corners size (0 – 50%)</string>
  <string name="cat_button_label_private">Private</string>
  <string name="cat_button_label_team">Team</string>
  <string name="cat_button_label_everyone">Everyone</string>

docs/components/Button.md

@@ -746,11 +746,13 @@ A toggle button has a shared stroked container, icons and/or text labels.
 
 #### Selection attributes
 
-Element | Attribute | Related method(s) | Default value
------------------------------------ | ----------------------- | ------------------------------------------------ | -------------
-**Single selection** | `app:singleSelection` | `setSingleSelection`<br/>`isSingleSelection` | `false`
-**Selection required** | `app:selectionRequired` | `setSelectionRequired`<br/>`isSelectionRequired` | `false`
-**Enable the group and all children | `android:enabled` | `setEnabled`<br/>`isEnabled` | `true`
+Element | Attribute | Related method(s) | Default value
+------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------- | -------------
+**Single selection** | `app:singleSelection` | `setSingleSelection`<br/>`isSingleSelection` | `false`
+**Selection required** | `app:selectionRequired` | `setSelectionRequired`<br/>`isSelectionRequired` | `false`
+**Enable the group and all children** | `android:enabled` | `setEnabled`<br/>`isEnabled` | `true`
+**Radius of inside corners** | `app:insideCornerSize` | `setInsideCornerSizeByPx`<br/>`setInsideCornerSizeByFraction`<br/>`getInsideCornerSize` | `0dp`
+**Spacing between buttons** | `android:spacing` | `setSpacing`<br/>`getSpacing` | `0dp`
 
 #### Styles
 

lib/java/com/google/android/material/button/MaterialButtonToggleGroup.java

@@ -19,6 +19,7 @@
 import com.google.android.material.R;
 
 import static com.google.android.material.theme.overlay.MaterialThemeOverlay.wrap;
+import static java.lang.Math.min;
 
 import android.content.Context;
 import android.content.res.TypedArray;
@@ -36,6 +37,7 @@
 import androidx.annotation.IdRes;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
+import androidx.annotation.Px;
 import androidx.annotation.VisibleForTesting;
 import androidx.core.view.AccessibilityDelegateCompat;
 import androidx.core.view.MarginLayoutParamsCompat;
@@ -48,6 +50,7 @@
 import com.google.android.material.internal.ViewUtils;
 import com.google.android.material.shape.AbsoluteCornerSize;
 import com.google.android.material.shape.CornerSize;
+import com.google.android.material.shape.RelativeCornerSize;
 import com.google.android.material.shape.ShapeAppearanceModel;
 import java.util.ArrayList;
 import java.util.Collections;
@@ -107,9 +110,9 @@
  *
  * <p>Any {@link MaterialButton}s added to this view group are automatically marked as {@code
  * checkable}, and by default multiple buttons within the same group can be checked. To enforce that
- * only one button can be checked at a time, set the {@code
- * app:singleSelection} attribute to {@code true} on the MaterialButtonToggleGroup or call {@link
- * #setSingleSelection(boolean) setSingleSelection(true)}.
+ * only one button can be checked at a time, set the {@code app:singleSelection} attribute to {@code
+ * true} on the MaterialButtonToggleGroup or call {@link #setSingleSelection(boolean)
+ * setSingleSelection(true)}.
  *
  * <p>MaterialButtonToggleGroup is a {@link LinearLayout}. Using {@code
  * android:layout_width="MATCH_PARENT"} and removing {@code android:insetBottom} {@code
@@ -179,8 +182,10 @@ public int compare(MaterialButton v1, MaterialButton v2) {
  private boolean singleSelection;
  private boolean selectionRequired;
 
- @IdRes
- private final int defaultCheckId;
+ @NonNull private CornerSize insideCornerSize;
+ @Px private int spacing;
+
+ @IdRes private final int defaultCheckId;
  private Set<Integer> checkedIds = new HashSet<>();
 
  public MaterialButtonToggleGroup(@NonNull Context context) {
@@ -203,10 +208,16 @@ public MaterialButtonToggleGroup(
  setSingleSelection(
  attributes.getBoolean(R.styleable.MaterialButtonToggleGroup_singleSelection, false));
  defaultCheckId =
- attributes.getResourceId(
- R.styleable.MaterialButtonToggleGroup_checkedButton, View.NO_ID);
+ attributes.getResourceId(R.styleable.MaterialButtonToggleGroup_checkedButton, View.NO_ID);
  selectionRequired =
  attributes.getBoolean(R.styleable.MaterialButtonToggleGroup_selectionRequired, false);
+ insideCornerSize =
+ ShapeAppearanceModel.getCornerSize(
+ attributes,
+ R.styleable.MaterialButtonToggleGroup_insideCornerSize,
+ new AbsoluteCornerSize(0));
+ spacing =
+ attributes.getDimensionPixelSize(R.styleable.MaterialButtonToggleGroup_android_spacing, 0);
  setChildrenDrawingOrderEnabled(true);
  setEnabled(attributes.getBoolean(R.styleable.MaterialButtonToggleGroup_android_enabled, true));
  attributes.recycle();
@@ -313,7 +324,7 @@ public void onInitializeAccessibilityNodeInfo(@NonNull AccessibilityNodeInfo inf
  /* rowCount= */ 1,
  /* columnCount= */ getVisibleButtonCount(),
  /* hierarchical= */ false,
- /* selectionMode = */ isSingleSelection()
+ /* selectionMode= */ isSingleSelection()
  ? CollectionInfoCompat.SELECTION_MODE_SINGLE
  : CollectionInfoCompat.SELECTION_MODE_MULTIPLE));
  }
@@ -496,6 +507,29 @@ public void setSingleSelection(@BoolRes int id) {
  setSingleSelection(getResources().getBoolean(id));
  }
 
+ @Px
+ public int getSpacing() {
+ return spacing;
+ }
+
+ public void setSpacing(@Px int spacing) {
+ this.spacing = spacing;
+ invalidate();
+ requestLayout();
+ }
+
+ public void setInsideCornerSizeInPx(@Px int px) {
+ insideCornerSize = new AbsoluteCornerSize(px);
+ updateChildShapes();
+ invalidate();
+ }
+
+ public void setInsideCornerSizeInFraction(float fraction) {
+ insideCornerSize = new RelativeCornerSize(fraction);
+ updateChildShapes();
+ invalidate();
+ }
+
  private void setCheckedStateForView(@IdRes int viewId, boolean checked) {
  View checkedView = findViewById(viewId);
  if (checkedView instanceof MaterialButton) {
@@ -528,18 +562,20 @@ private void adjustChildMarginsAndUpdateLayout() {
  MaterialButton previousButton = getChildButton(i - 1);
 
  // Calculates the margin adjustment to be the smaller of the two adjacent stroke widths
- int smallestStrokeWidth =
- Math.min(currentButton.getStrokeWidth(), previousButton.getStrokeWidth());
+ int smallestStrokeWidth = 0;
+ if (spacing <= 0) {
+ smallestStrokeWidth = min(currentButton.getStrokeWidth(), previousButton.getStrokeWidth());
+ }
 
  LayoutParams params = buildLayoutParams(currentButton);
  if (getOrientation() == HORIZONTAL) {
  MarginLayoutParamsCompat.setMarginEnd(params, 0);
- MarginLayoutParamsCompat.setMarginStart(params, -smallestStrokeWidth);
+ MarginLayoutParamsCompat.setMarginStart(params, spacing - smallestStrokeWidth);
  params.topMargin = 0;
  } else {
  params.bottomMargin = 0;
- params.topMargin = -smallestStrokeWidth;
- MarginLayoutParamsCompat.setMarginStart(params, 0);
+ params.topMargin = spacing - smallestStrokeWidth;
+ MarginLayoutParamsCompat.setMarginEnd(params, 0);
  }
 
  currentButton.setLayoutParams(params);
@@ -648,6 +684,7 @@ private int getIndexWithinVisibleButtons(@Nullable View child) {
  private CornerData getNewCornerData(
  int index, int firstVisibleChildIndex, int lastVisibleChildIndex) {
  CornerData cornerData = originalCornerData.get(index);
+ CornerData insideCornerData = new CornerData(insideCornerSize);
 
  // If only one (visible) child exists, use its original corners
  if (firstVisibleChildIndex == lastVisibleChildIndex) {
@@ -656,14 +693,18 @@ private CornerData getNewCornerData(
 
  boolean isHorizontal = getOrientation() == HORIZONTAL;
  if (index == firstVisibleChildIndex) {
- return isHorizontal ? CornerData.start(cornerData, this) : CornerData.top(cornerData);
+ return isHorizontal
+ ? CornerData.start(cornerData, insideCornerData, this)
+ : CornerData.top(cornerData, insideCornerData);
  }
 
  if (index == lastVisibleChildIndex) {
- return isHorizontal ? CornerData.end(cornerData, this) : CornerData.bottom(cornerData);
+ return isHorizontal
+ ? CornerData.end(cornerData, insideCornerData, this)
+ : CornerData.bottom(cornerData, insideCornerData);
  }
 
- return null;
+ return insideCornerData;
  }
 
  private static void updateBuilderWithCornerData(
@@ -782,11 +823,11 @@ private void updateChildOrder() {
  }
 
  void onButtonCheckedStateChanged(@NonNull MaterialButton button, boolean isChecked) {
-  // Checked state change is triggered by the button group, do not update checked ids again.
-  if (skipCheckedStateTracker) {
-  return;
-  }
-  checkInternal(button.getId(), isChecked);
+ // Checked state change is triggered by the button group, do not update checked ids again.
+ if (skipCheckedStateTracker) {
+ return;
+ }
+ checkInternal(button.getId(), isChecked);
  }
 
  /**
@@ -814,49 +855,56 @@ public void onPressedChanged(@NonNull MaterialButton button, boolean isPressed)
 
  private static class CornerData {
 
- private static final CornerSize noCorner = new AbsoluteCornerSize(0);
+ @NonNull CornerSize topLeft;
+ @NonNull CornerSize topRight;
+ @NonNull CornerSize bottomRight;
+ @NonNull CornerSize bottomLeft;
 
- CornerSize topLeft;
- CornerSize topRight;
- CornerSize bottomRight;
- CornerSize bottomLeft;
+ CornerData(@NonNull CornerSize cornerSize) {
+ this(cornerSize, cornerSize, cornerSize, cornerSize);
+ }
 
  CornerData(
- CornerSize topLeft, CornerSize bottomLeft, CornerSize topRight, CornerSize bottomRight) {
+ @NonNull CornerSize topLeft,
+ @NonNull CornerSize bottomLeft,
+ @NonNull CornerSize topRight,
+ @NonNull CornerSize bottomRight) {
  this.topLeft = topLeft;
  this.topRight = topRight;
  this.bottomRight = bottomRight;
  this.bottomLeft = bottomLeft;
  }
 
  /** Keep the start side of the corner original data */
- public static CornerData start(CornerData orig, View view) {
- return ViewUtils.isLayoutRtl(view) ? right(orig) : left(orig);
+ public static CornerData start(
+ @NonNull CornerData orig, @NonNull CornerData other, @NonNull View view) {
+ return ViewUtils.isLayoutRtl(view) ? right(orig, other) : left(orig, other);
  }
 
  /** Keep the end side of the corner original data */
- public static CornerData end(CornerData orig, View view) {
- return ViewUtils.isLayoutRtl(view) ? left(orig) : right(orig);
+ public static CornerData end(
+ @NonNull CornerData orig, @NonNull CornerData other, @NonNull View view) {
+ return ViewUtils.isLayoutRtl(view) ? left(orig, other) : right(orig, other);
  }
 
  /** Keep the left side of the corner original data */
- public static CornerData left(CornerData orig) {
- return new CornerData(orig.topLeft, orig.bottomLeft, noCorner, noCorner);
+ public static CornerData left(@NonNull CornerData orig, @NonNull CornerData other) {
+ return new CornerData(orig.topLeft, orig.bottomLeft, other.topRight, other.bottomRight);
  }
 
  /** Keep the right side of the corner original data */
- public static CornerData right(CornerData orig) {
- return new CornerData(noCorner, noCorner, orig.topRight, orig.bottomRight);
+ public static CornerData right(@NonNull CornerData orig, @NonNull CornerData other) {
+ return new CornerData(other.topLeft, other.bottomLeft, orig.topRight, orig.bottomRight);
  }
 
  /** Keep the top side of the corner original data */
- public static CornerData top(CornerData orig) {
- return new CornerData(orig.topLeft, noCorner, orig.topRight, noCorner);
+ public static CornerData top(@NonNull CornerData orig, @NonNull CornerData other) {
+ return new CornerData(orig.topLeft, other.bottomLeft, orig.topRight, other.bottomRight);
  }
 
  /** Keep the bottom side of the corner original data */
- public static CornerData bottom(CornerData orig) {
- return new CornerData(noCorner, orig.bottomLeft, noCorner, orig.bottomRight);
+ public static CornerData bottom(@NonNull CornerData orig, @NonNull CornerData other) {
+ return new CornerData(other.topLeft, orig.bottomLeft, other.topRight, orig.bottomRight);
  }
  }
 }

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

@@ -24,6 +24,7 @@
  <public name="iconTint" type="attr"/>
  <public name="iconTintMode" type="attr"/>
  <public name="toggleCheckedStateOnClick" type="attr"/>
+ <public name="insideCornerSize" type="attr"/>
  <public name="materialButtonStyle" type="attr"/>
  <public name="materialIconButtonStyle" type="attr"/>
  <public name="materialIconButtonFilledStyle" type="attr"/>