android：ボタンのデザインを変える

AndroidのデフォルトButtonもいいんですが、角を丸くしたいなという時に画像を用意しなくてもデザインを変更出来る方法を紹介します。

使うのは<shape>を使ったxmlファイルです。

上がデザイン変更後のボタンです。










ボタンを押した時、フォーカスされた時、それ以外の状態のボタンを<shape>で作ります。

res/drawable/shape_button.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> android:shape="rectangle"> <item android:state_pressed="true"> <shape android:shape="rectangle"> <gradient android:startColor="#666666" android:endColor="#333333" android:angle="90" /> <corners android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" /> <stroke android:width="4px" android:color="#9F9F9F" /> <padding android:left="7dp" android:top="7dp" android:right="7dp" android:bottom="7dp" /> </shape> </item> <item android:state_focused="true"> <shape android:shape="rectangle"> <gradient android:startColor="#666666" android:endColor="#333333" android:angle="90" /> <corners android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" /> <stroke android:width="2px" android:color="#FFFF00" /> <padding android:left="7dp" android:top="7dp" android:right="7dp" android:bottom="7dp" /> </shape> </item> <item> <shape > <gradient android:startColor="#666666" android:endColor="#333333" android:angle="90" /> <corners android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" /> <stroke android:width="1px" android:color="#9F9F9F" /> <padding android:left="7dp" android:top="7dp" android:right="7dp" android:bottom="7dp" /> </shape> </item> </selector>

<shape android:shape:>はどのような形にするか指定出来ます。

• rectangle：四角
• oval：楕円
• line：線
• ring：輪

<gradient>はグラデーションの指定です。

• android:startColor：グラデーション開始色の指定
• android:endColor：グラデーション終了色の指定
• android:angle：グラデーションの傾き
  　（0：左→右／45：左下→右上／90：下→上のようになります）

<corners>はractangleのみ指定出来て、角をどれぐらい丸くするかの指定です。

• android:bottomRightRadius：右下
• android:bottomLeftRadius：左下
• android:topLeftRadius：左上
• android:topRightRadius：右上

<stroke>は枠線の指定です。点線にする事も出来ます。

• android:width：枠線の幅
• android:color：枠線の色
• android:dashWidth：点線の幅
• android:dashGap：点線の間隔

あとは出来上がったxmlをボタンのバックグラウンドに指定すれば完成です。