androidxmlmaterial-components-androidandroid-togglebuttonmaterialbutton

How can I change corner radius in material button toggle group?


I want make Material Button Toggle Group Like this: all rounded

But result is: half rounded

I've changed shapeAppearance (cornerSizeTopRight, ...) or cornerSize, but only the outer part of the buttons at both ends is rounded, and the inner button hasn't changed at the sharp edge.

I think the reason that never changed button's cornerSize is:

MaterialButtonToggleGroup also overrides any shapeAppearance, shapeAppearanceOverlay, or cornerRadius attribute set on MaterialButton children such that only the left-most corners of the first child and the right-most corners of the last child retain their shape appearance or corner size.

Is there really no way to adjust the corner radius within the Material Button Toggle Group?


Solution

  • I solved the problem by using Custom View Class, which inherits MaterialButtonToggleGroup.

    class MaterialButtonToggleGroupWithRadius
    @JvmOverloads
    constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) 
    : MaterialButtonToggleGroup(context, attrs, defStyleAttr) {
    
        override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec)
            for (i in 0 until childCount) {
                val button = getChildAt(i) as MaterialButton
                if (button.visibility == GONE) {
                    continue
                }
                val builder = button.shapeAppearanceModel.toBuilder()
                val radius = resources.getDimension(R.dimen.button_toggle_group_radius)
                button.shapeAppearanceModel = builder.setTopLeftCornerSize(radius)
                    .setBottomLeftCornerSize(radius)
                    .setTopRightCornerSize(radius)
                    .setBottomRightCornerSize(radius).build()
            }
        }
    }
    

    You can use this as View like MaterialButtonToggleGroup in the Layout xml file you want to use. Example:

    <com.example.util.MaterialButtonToggleGroupWithRadius
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    
        <com.google.android.material.button.MaterialButton
                    ... />
        <com.google.android.material.button.MaterialButton
                    ... />
        <com.google.android.material.button.MaterialButton
                    ... />
    
    </com.example.util.MaterialButtonToggleGroupWithRadius>