23
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2018-08-26

ほぼ自分用のメモです。

まえおき

image.png
Webデザイナーがアプリをデザインするとよく出てくる、やたらと丸っこいこういうボタン。(偏見w)

こういうボタンは、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" />

image.png

ポイントとしては

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

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

補足

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

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

23
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?