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

Android7 

流行りのフラットなデザインもいいのですが、角丸にしたいとか、ボタンなので少し立体感が欲しいなど要望があると思います。ボタンに画像をを貼ることでも作れますが、shape を使えばグラデーションや丸角の矩形が簡単に作成できます。
 

Android Studio 2.2.3
Android 7.1.1

 


Shape Drawable

 

 

Shape とは

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

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

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

Value Desciption
"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°のグラデーション

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

 

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 を呼びます
 

 
プロジェクト内でのファイルはこうなります
 
custombutton3
 
ボタンをActivityで作成します
MainActivity.java

 
レイアウトは最終的にはこのようにしました
activity_main.xml

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

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

 
 

更にもっと文字とアイコンをボタンに入れ込みたいなど、
以下のライブラリーを使うと可能です。

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

device-2015-11-08-224042

 
関連ページ:

References:
Shape
Drawable Resources
Drawable