[Android] shapeを使ってカスタムボタン作成

shape

を使えばグラデーションや丸角の矩形が作成で着ていましたが、Android Studio 4.1からはデフォルトでMaterial Designが設定されてしまっているので、昔のやり方はそのままできません。Material Designを使えばViewのカスタマイズの自由度が上がるのですが…

Android Studio
2021.1.1

Shape Drawable

推奨されているMaterial Designはこちらを参考に
Using buttons

とりあえずShapeを使ってみたいと思います。

ボタンをカスタマイズするためには、ボタンのbackground属性で、画像やShapeを指定するとできます。

android:background="@drawable/image"

1	android:background="@drawable/image"

ここではbackgroundをshapeを使って表現する方法と、プレスされた、プレスされていないという状態により背景を変えることによりカスタマイズしてみたいと思います。

目次
1. Shape とは
2. Shape Example
3. Shape でボタンを作成

Shape とは

Bitmapなどの画像そのものを使わずにグラフィック的な画像を表現するものです。円や四角形など単純なものはShapeを使った方がメモリ使用量が少なくなります。
　
Shape Drawable

Shape Drawable でxmlに記述して使います。
　

Element	Description
`"shape"`	root element
`"corners"`	矩形での角丸
`"gradient"`	グラデーション
`"padding"`	余白
`"size"`	shapeの縦横サイズ
`"solid"`	色
`"stroke"`	ラインの色、太さ、点線

shapeでは以下のような形状を作りだせます。

Value	Description
`"rectangle"`	矩形
`"oval"`	楕円形
`"line"`	水平直線
`"ring"`	円形

Shape Example

　Reference

にあるExampleを試してみます。
　
レイアウトファイルからshapeを画像のように呼び出します
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <ImageView
        android:src="@drawable/shape_sample"
        android:layout_width="200dp"
        android:layout_height="200dp" />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:gravity="center"

tools:context=".MainActivity">

<ImageView

android:src="@drawable/shape_sample"

android:layout_width="200dp"

android:layout_height="200dp" />

</LinearLayout>

..\res￥drawable にshape_sample.xmlとして作成

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FFFF0000"
        android:endColor="#80FF00FF"
        android:angle="45"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="8dp" />
</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<gradient

android:startColor="#FFFF0000"

android:endColor="#80FF00FF"

android:angle="45"/>

<padding android:left="7dp"

android:top="7dp"

android:right="7dp"

android:bottom="7dp" />

</shape>

全体のサイズは200dpx200dp
shapeはrectangle
paddingは7dp
8dpの半径で角を丸める
FFFF0000から80FF00FFまで45°のグラデーション

これでビルド実行してみるとこうなります
　

Shapeでボタンを作成

このshapeを使ってボタン形状を作ります。ボタンを１種類だけでもいいのですが、プレスしたかどうかわからないので、プレス時に色が変わるように同じ形状で色違いのボタンも作ります。この切り替えも同じくxmlで作成

drawableを選択して「New」「File」からbutton_1.xmlを作成
　
button_1.xml (通常)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <corners
    android:radius="15dip" />
  <gradient
    android:angle="90"
    android:startColor="#8888ff"
    android:endColor="#aaaaff" />
  <padding
    android:left="15dip"
    android:top="15dip"
    android:right="15dip"
    android:bottom="15dip" />
</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<corners

android:radius="15dip" />

<gradient

android:angle="90"

android:startColor="#8888ff"

android:endColor="#aaaaff" />

<padding

android:left="15dip"

android:top="15dip"

android:right="15dip"

android:bottom="15dip" />

</shape>

　
button_2.xml (プレスされた)
少しダークな色合いにします

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <corners
    android:radius="15dip" />
  <gradient
    android:angle="90"
    android:startColor="#4444ff"
    android:endColor="#8888ff" />
  <padding
    android:left="15dip"
    android:top="15dip"
    android:right="15dip"
    android:bottom="15dip" />
</shape>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<corners

android:radius="15dip" />

<gradient

android:angle="90"

android:startColor="#4444ff"

android:endColor="#8888ff" />

<padding

android:left="15dip"

android:top="15dip"

android:right="15dip"

android:bottom="15dip" />

</shape>

coners：角丸
gradient：グラデーション
padding：空き間隔
をそれぞれ設定できます
　
以上のファイルを ..\res\drawable\ の下に置きそれらを選択するファイル
button_state.xml
を作り、以下の定義を入れます
　

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_1"
          android:state_pressed="false" />
    <item android:drawable="@drawable/button_2"
          android:state_pressed="true" />
</selector>

<?xml version="1.0" encoding="utf-8"?>

<selector

xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/button_1"

android:state_pressed="false" />

<item android:drawable="@drawable/button_2"

android:state_pressed="true" />

</selector>

　
ボタンの background で button_state.xml を呼びます
　

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/button_state" />

<Button

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@drawable/button_state" />

　
プロジェクト内でのファイルはこうなります
　

　
ボタンをActivityで作成します
MainActivity.java

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TextView textView;
    private int count = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textView = findViewById(R.id.text_view);
        textView.setText(R.string.custom_button);

        // Custom Button
        Button customButton = findViewById(R.id.custom_button);
        // lambda
        customButton.setOnClickListener( v -> {
            count++;
            String cnt = getString(R.string.tapped) +
                    " " + count;
            textView.setText(cnt);
        });
    }
}

//package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.widget.Button;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

private TextView textView;

private int count = 0;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

textView = findViewById(R.id.text_view);

textView.setText(R.string.custom_button);

// Custom Button

Button customButton = findViewById(R.id.custom_button);

// lambda

customButton.setOnClickListener( v -> {

count++;

String cnt = getString(R.string.tapped) +

" " + count;

textView.setText(cnt);

});

}

Button背景をカスタマイズに変更するためbackgroundTintをnullにします。
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#dfe"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text_view"
        android:textSize="40sp"
        android:textColor="#00f"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="40dp"
        app:layout_constraintBottom_toTopOf="@+id/custom_button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <Button
        android:id="@+id/custom_button"
        android:text="@string/custom_button"
        android:textSize="24sp"
        android:textColor="#000"
        android:layout_margin="40dp"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        app:backgroundTint="@null"
        android:background="@drawable/button_state"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#dfe"

tools:context=".MainActivity">

<TextView

android:id="@+id/text_view"

android:textSize="40sp"

android:textColor="#00f"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="40dp"

app:layout_constraintBottom_toTopOf="@+id/custom_button"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent" />

<Button

android:id="@+id/custom_button"

android:text="@string/custom_button"

android:textSize="24sp"

android:textColor="#000"

android:layout_margin="40dp"

android:layout_width="match_parent"

android:layout_height="100dp"

app:backgroundTint="@null"

android:background="@drawable/button_state"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

　
文字列のリソース
strings.xml

<resources>
    <string name="app_name">Your App Name</string>
    <string name="custom_button">Custom Button</string>
    <string name="tapped">Tapped:</string>
</resources>

<string name="custom_button">Custom Button</string>

<string name="tapped">Tapped:</string>

</resources>

　
これでちょっとしたボタンのカスタマイズが簡単にできます。
　

　おまけ：

また、selectorからitemとして２つのshapeを呼び出していますが１つにすることもできます。ついでに枠線を入れてみました。
　
button_state_2.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:radius="15dip" />
    <gradient
        android:angle="90"
        android:startColor="#4444ff"
        android:endColor="#8888ff" />
    <padding
        android:left="15dip"
        android:top="15dip"
        android:right="15dip"
        android:bottom="15dip" />
</shape>