非対称な角丸

Material Design にある Connected button group の両サイドにある片方だけ、丸みがあるボタンってどうやって作るんだろうというお話です。

Connected button group
https://github.com/material-components/material-components-android/blob/master/docs/components/Button.md#connected-button-group

Web サイトから転載

非対称な角丸の設定方法

そりゃそうだろって話ですが、Style を定義して適用すれば OK です。

Style 定義

styles.xml に左側用と右側用の Style を定義します。

styles.xml

<!-- 左側 -->
<style name="ShapeAppearanceOverlay.Button.Left" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopLeft">20dp</item>
    <item name="cornerSizeBottomLeft">20dp</item>
    <item name="cornerSizeTopRight">4dp</item>
    <item name="cornerSizeBottomRight">4dp</item>
</style>

<!-- 右側 -->
<style name="ShapeAppearanceOverlay.Button.Right" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopLeft">4dp</item>
    <item name="cornerSizeBottomLeft">4dp</item>
    <item name="cornerSizeTopRight">20dp</item>
    <item name="cornerSizeBottomRight">20dp</item>
</style>

Style 適用

レイアウト xml ファイルで定義している View の app:shapeAppearanceOverlay に定義した Style を指定します。

抜粋

<!-- 左側 -->
<Button
    android:id="@+id/leftButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Button.Left"
    
    style="?attr/materialIconButtonFilledStyle"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<!-- 右側 -->
<Button
    android:id="@+id/rightButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Button.Right"

    style="?attr/materialIconButtonFilledStyle"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" /> 
    

使用例

Android の標準で用意されているスライダーと組み合わせて、一体感のある UI にできます。

さいごに

Mterial Design のドキュメントを読むとけっこう楽しい。

material-components-android/docs/components
https://github.com/material-components/material-components-android/tree/master/docs/components

スクリーンショットに使用したアプリは ↓ なので、興味があれば使ってみてください。