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

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

cutombutton_1

通常の状態

cutombutton_2

プレスされた状態

Android Studio 2.2
Android 7.0

 

sponsored link

Shape Drawable

 
Drawable Resourcesというscreenに画像、グラフィックスを表示するconceptが定義されています。例えばdrawableフォルダーに置いてbitmap画像を画面に表示させるようなことです。

画像そのものではなく、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

drawableにshape_sample.xmlとして作成

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

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

Shapeでボタンを作成

 
このshapeを使ってボタン形状を作ります。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

 

これでちょっとしたボタンのカスタマイズが簡単にできます。
更にもっと文字とアイコンをボタンに入れ込みたいなど、以下のライブラリーを使うと可能です。

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

device-2015-11-08-224042

 
関連ページ: