How to Separate Buttons in MaterialButtonToggleGroup

You can do with your same XML just add button and shape overlay

Add these to styles.xml

<style name="ToggleStartShape"> <item name="cornerFamily">rounded</item> <item name="cornerSizeTopStart">12dp</item> <item name="cornerSizeBottomStart">12dp</item> <item name="cornerSizeTopEnd">0dp</item> <item name="cornerSizeBottomEnd">0dp</item> </style> <style name="ToggleMiddleShape"> <item name="cornerFamily">rounded</item> <item name="cornerSize">0dp</item> </style> <style name="ToggleEndShape"> <item name="cornerFamily">rounded</item> <item name="cornerSizeTopEnd">12dp</item> <item name="cornerSizeBottomEnd">12dp</item> <item name="cornerSizeTopStart">0dp</item> <item name="cornerSizeBottomStart">0dp</item> </style>

Your XML should look like

<group ... app:singleSelection="true" app:selectionRequired="true"> <B1 ... ... app:shapeAppearanceOverlay="@style/ToggleStartShape" /> <B2 ... app:shapeAppearanceOverlay="@style/ToggleMiddleShape" /> <B3 ... app:shapeAppearanceOverlay="@style/ToggleEndShape" /> </group>

Don't add cornerRadius in attributes, this will apply radius to all side, instead do following to add middle stroke lines in negative number

<B1... app:strokeWidth="1dp" android:insetLeft="-1dp" android:insetRight="-1dp" />