【Android Studio】Buttonをカスタムデザインで作成する方法!shape

この記事からわかること
- Android StudioでButtonを実装する方法
- カスタムデザインを設定するには?
- サイズや角丸、枠線などを表示させる方法
- shapeタグの使い方
- 丸型や線型、グラデーションの実装方法
index
[open]
\ アプリをリリースしました /
Android StudioでButtonのサイズや角丸、枠などを変更したカスタムボタンを作成する方法をまとめていきます。
環境
- Android Studio:Flamingo
- Kotlin:1.8.20
Buttonのデフォルトのデザイン
おすすめ記事:【Kotlin】Android StudioでButtonの使い方!クリックイベント
Android StudioではButtonを設置するとデフォルトのデザインが適応されるようになっています。Android Studio Flamingoでは以下のような紫色で角が丸くなったボタンが実装されます。

この際のButtonのXMLは以下のようになります。
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
これではオリジナル性がないので自分で色々とカスタマイズしたボタンを実装したいものです。ですがこのまま直感的に変えようとしてもあまりうまくいきませんでした。なのでカスタマイズ方法をまとめていきます。
カスタムボタンを実装する
カスタムボタンを実装するにはまず「drawable」フォルダを右クリックして「New」>「Drawable Resource File」をクリックしてRoot element
に「shape」を選択します。例えば角が四角で薄いグレーのボタンを作りたい場合は以下のように記述します。

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#e7e7e7" />
<corners
android:radius="10px" />
</shape>

続いてレイアウト側ではandroid:background
属性に先ほど作成してカスタムシェイプを渡し、app:backgroundTint
に@null
を渡します。
<Button
android:layout_width="160dp"
android:layout_height="30dp"
android:background="@drawable/custom_button_shape"
android:text="Button"
app:backgroundTint="@null"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

これでカスタムシェイプが適応され任意に指定したデザインのボタンを実装することができました。この際になぜか適応されない時もあったので一度Button
を削除して新規で追加してから試してみると正常にデザインが変更されていました。
shapeファイルの設定方法
先ほどのshapeファイルでは以下のように指定していました。中身を見ていきます。
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#e7e7e7" />
<corners
android:radius="10px" />
</shape>
shape
タグの属性から以下の4つの形状を指定することができます。
- rectangle:矩形
- oval:楕円形
- line:線型
- ring:円環?
ring
のみうまく実装できませんでした。。
四角形の形にする
四角形の形に実装したい場合はshape
タグにandroid:shape="rectangle"
を指定します。
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

丸型にする
丸型の形に実装したい場合はshape
タグにandroid:shape="oval"
を指定します。
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

線型にする
丸型の形に実装したい場合はshape
タグにandroid:shape="line"
を指定します。
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:color="#22FF44"
android:width="20dp" />
</shape>

デザインやサイズ、カラーを指定する
またshape
タグの中では以下のタグを使用することでさまざまなデザインやサイズ、カラーを指定することが可能です。
- corners:角丸
- solid:色
- gradient:グラデーション
- stroke:ラインの色、太さ、デザイン(点線など)
- size:サイズ
- padding:余白
グラデーションを実装する
例えばグラデーションを実装する場合は以下のようになります。
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:color="@color/white"
android:width="4dp" />
<gradient
android:angle="180"
android:startColor="#7F52FF"
android:endColor="#CD4060" />
<size
android:width="100dp"
android:height="100dp" />
</shape>

角を丸くする
角を丸くするにはcorners
タグに以下のように指定することで角丸を実装することが可能です。
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/white" />
<corners
android:topLeftRadius="5dp"
android:bottomLeftRadius="5dp"
android:topRightRadius="5dp"
android:bottomRightRadius="5dp"/>
</shape>
全部に指定する場合はandroid:radius
属性でもいけます。
<corners
android:radius="5dp" />
あとはこれらをボタンに適応させてば任意のデザインのボタンを実装することが可能です。
枠線を実装する
枠線を実装するにはstroke
タグを使用します。ダッシュ線にしたい場合はdashWidth
でダッシュのサイズをdashGap
でダッシュ間の余白のサイズを指定します。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="5dp" />
<stroke
android:color="@color/white"
android:width="3dp"
android:dashWidth="5dp"
android:dashGap="5dp"/>
</shape>
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。