MaterialButtonを使って、まるっこいボタンを難なく作る #Android

ほぼ自分用のメモです。

まえおき

Webデザイナーがアプリをデザインするとよく出てくる、やたらと丸っこいこういうボタン。（偏見ｗ）

こういうボタンは、2018年に入るまでは

「そんなのマテリアルデザインじゃない」と突っぱねる
リップル効果を諦めて、selectorのdrawableを作ってそれっぽい実装をする
カスタムビューを作って頑張る

など、実装には涙ぐましい努力が必要でした。

しかし、最近になってようやくマテリアルデザインにそれっぽい概念が組み込まれました。
従来のAppCompatButtonだけでなくMaterialButtonというUI部品が利用できるようになり、丸っこいボタンはMaterialButtonで簡単に実装ができるようになりました。

MaterialButtonを使ってまるっこいボタンを作る

        <com.google.android.material.button.MaterialButton
            style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_gravity="bottom"
            android:text="会員登録"
            android:textAppearance="@style/TextAppearance.MaterialComponents.Button"
            app:backgroundTint="@color/colorPrimary"
            app:cornerRadius="28dp" />

ポイントとしては

app:cornerRadius で高さの半分の値を指定する
style="@style/Widget.MaterialComponents.Button.UnelevatedButton" 指定で、影をつけない
android:textAppearance="@style/TextAppearance.MaterialComponents.Button" （もしくはそれを継承したTextAppearance）を指定する

の3点。1点目は簡単に想像がつきますが、2点目と3点目をしっかり指定してあげないと、正しくまるっこいボタンにはなりませんでした。（TextAppearanceの指定は、されていないとアプリがクラッシュしますｗ）

補足

ちなみに、この記事では挙げませんでしたが、角丸の枠つきテキストボックスも TextInputLayoutで簡単に利用できるようになったみたいです。

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" を指定すればいいようですが、こちらはまだ検証してないので、検証してみてから記事にしようかなと思います。