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

この記事からわかること

  • Android StudioButton実装する方法
  • カスタムデザイン設定するには?
  • サイズ角丸枠線などを表示させる方法
  • shapeタグ使い方
  • 丸型線型グラデーションの実装方法

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

公式:MATERIAL DESIGN-Buttons

Android StudioでButtonのサイズや角丸、枠などを変更したカスタムボタンを作成する方法をまとめていきます。

環境

Buttonのデフォルトのデザイン

おすすめ記事:【Kotlin】Android StudioでButtonの使い方!クリックイベント

Android StudioではButtonを設置するとデフォルトのデザインが適応されるようになっています。Android Studio Flamingoでは以下のような紫色で角が丸くなったボタンが実装されます。

【Android Studio】Buttonにアイコンを設定する方法!デザインやテーマのカスタマイズ

この際のButtonのXMLは以下のようになります。

<Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Button" />

これではオリジナル性がないので自分で色々とカスタマイズしたボタンを実装したいものです。ですがこのまま直感的に変えようとしてもあまりうまくいきませんでした。なのでカスタマイズ方法をまとめていきます。

カスタムボタンを実装する

カスタムボタンを実装するにはまず「drawable」フォルダを右クリックして「New」>「Drawable Resource File」をクリックしてRoot elementに「shape」を選択します。例えば角が四角で薄いグレーのボタンを作りたい場合は以下のように記述します。

【Android Studio】Buttonをカスタムデザインで作成する方法!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 Studio】Buttonをカスタムデザインで作成する方法!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" />
【Android Studio】Buttonをカスタムデザインで作成する方法!shape

これでカスタムシェイプが適応され任意に指定したデザインのボタンを実装することができました。この際になぜか適応されない時もあったので一度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つの形状を指定することができます。

ringのみうまく実装できませんでした。。

四角形の形にする

四角形の形に実装したい場合はshapeタグにandroid:shape="rectangle"を指定します。

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
【Android Studio】Buttonにアイコンを設定する方法!デザインやテーマのカスタマイズ

丸型にする

丸型の形に実装したい場合はshapeタグにandroid:shape="oval"を指定します。

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
【Android Studio】Buttonをカスタムデザインで作成する方法!shape

線型にする

丸型の形に実装したい場合は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>
【Android Studio】Buttonをカスタムデザインで作成する方法!shape

デザインやサイズ、カラーを指定する

またshapeタグの中では以下のタグを使用することでさまざまなデザインやサイズ、カラーを指定することが可能です。

グラデーションを実装する

例えばグラデーションを実装する場合は以下のようになります。

<?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>
【Android Studio】Buttonをカスタムデザインで作成する方法!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" />

あとはこれらをボタンに適応させてば任意のデザインのボタンを実装することが可能です。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index