[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を指定するとできます。

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

1x1.trans - [Android] 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

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

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

これでビルド実行してみるとこうなります
 
1x1.trans - [Android] shapeを使ってカスタムボタン作成

 

Shapeでボタンを作成

 

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

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

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

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

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

 
プロジェクト内でのファイルはこうなります
 
1x1.trans - [Android] shapeを使ってカスタムボタン作成


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

 

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

 
文字列のリソース
strings.xml

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

 おまけ:

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

 
 

BootStrapをAndroidで使えるようにしたライブラリーがありますが、Material Designでまにあってしまうかもしれません

BootStrap ライブラリー
Android Bootstrap ライブラリー

1x1.trans - [Android] shapeを使ってカスタムボタン作成

 
関連ページ:

References:
Shape
Drawable Resources
Drawable

シェアする

  • このエントリーをはてなブックマークに追加

フォローする