[Android] 丸角Buttonを簡単に作ってみる

はじめに

丸ボタンを作るときに、XMLを自分で作成してStyleを適応する方法などいろいろとあり、悩むときもあると思います。
そんな中、結構前になりますが、スタイルがparent="Theme.MaterialComponents.DayNight.DarkActionBar"に変えたことにより、より便利なボタンの設定項目を使えるようになったらしい。
それを使ってみようと思う。

Styleを自分で作らなくて見やすいコードを書こう！！

丸角ボタンを作る

内容

<Button
        android:id="@+id/tellButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:backgroundTint="#FCDDEC"

        android:text="TELL"
        android:textColor="#EF5DA8"
        android:textSize="20sp"

        app:cornerRadius="25dp"
        app:strokeColor="#EF5DA8"
        app:strokeWidth="2dp"

        app:icon="@android:drawable/stat_sys_phone_call"
        app:iconTint="#EF5DA8"

        app:layout_constraintBottom_toTopOf="@+id/tellButton3"
        app:layout_constraintEnd_toStartOf="@+id/tellButton2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
         />

分解して見てみる

コードの部分にコメントをかけなかったので下で解説

最初の部分

・IDの指定

android:id="@+id/tellButton1"

・その要素の大きさを指定

android:layout_width="wrap_content"
android:layout_height="wrap_content"

背景のいろ

・背景の色を指定　※今回は薄ピンクを指定

android:backgroundTint="#FCDDEC"

文字の設定

・表示する文字の内容の指定

android:text="TELL"

・文字の色の指定　※今回は濃いピンクを指定

android:textColor="#EF5DA8"

・文字の大きさを指定

android:textSize="20sp"

アイコンをつける

・アイコンの指定　※今回は自分がインターネットから落とした電話マークを指定

app:icon="@android:drawable/stat_sys_phone_call"

・アイコンの色を指定 ※今回は濃いピンクで設定

app:iconTint="#EF5DA8"

ConstrainLayoutにおける設定

・この要素をどこと結びついているかを教えるための部分。

app:layout_constraintBottom_toTopOf="@+id/tellButton3"
app:layout_constraintEnd_toStartOf="@+id/tellButton2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"