androidのデザインパーツは結構良いと思うけど、デザインをカスタマイズしてさらに違いを出したくなってくる。アプリ背景やボタン背景をグラデーションにする方法があればよいと思って探した。
アプリ背景やボタン背景の両方とも基本的には「drowable」フォルダにshape「形状」をxmlで作って保存して、それを「linerlayout」「button」などのパーツのbackgroundに指定するという流れです。
１、「drowable」フォルダに「形状」をxmlで作って保存
■背景■
shapeタグ 基本形状
rectangle 四角形
oval 楕円形
line 線形
ring 同心円形
gradientタグ グラデーション
android:angle 角度。
android:centerX 中心X座標位置（0 – 1.0）
android:centerY 中心Y座標位置（0 – 1.0）
android:centerColor 中間色
android:gradientRadius グラデーションの半径
android:type グラデーションの種類
linear 線形
radial 放射線状
sweep 走査線
<?xml version=”1.0″ encoding=”utf-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”
android:shape=”rectangle”>//基本形状
<gradient
android:startColor=”#ffffff” //グラデーション開始色
android:endColor=”#1c1c70″ //グラデーション終了色
android:type=”linear” //グラデーションの種類
android:angle=”270″/> //グラデーションの向き：270度から90度へ（45の倍数）
</shape>
■ボタン背景■
- まず「selector」「<item android:state_pressed=”true”>」で押した時と何もしていないときで分ける。
- 「shape」で形を決める。
- 「<corners android:radius=”30dip” />」で角の丸まり具合を調節する。
- グラデーションを設定。
- 「stroke」で枠線の太さと色を指定する。
<?xml version=”1.0″ encoding=”utf-8″ ?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”>//押された時の状態
<item android:state_pressed=”true”>
<shape android:shape =”rectangle”>
<corners android:radius=”30dip” />
<gradient
android:angle=”90″
android:startColor=”#00c9c7c7″
android:endColor=”#00eae8e8″ />
<padding
android:top=”2dip”
android:bottom=”2dip”
android:left=”0dip”
android:right=”0dip” />
<stroke
android:width=”2dip”
android:color=”#000000″ />
</shape>
</item>//クリック状態
<item android:state_focused=”true”>
<shape android:shape =”rectangle”>
<corners android:radius=”30dip” />
<gradient
android:angle=”90″
android:startColor=”#00c9c7c7″
android:endColor=”#00eae8e8″ />
<padding
android:top=”2dip”
android:bottom=”2dip”
android:left=”0dip”
android:right=”0dip” />
<stroke
android:width=”2dip”
android:color=”#000000″ />
</shape>
</item><item>
//デフォルト状態
<shape android:shape =”rectangle”>
<corners android:radius=”30dip” />
<gradient
android:angle=”90″
android:startColor=”#00c9c7c7″
android:endColor=”#00eae8e8″ />
<padding
android:top=”5dip”
android:bottom=”5dip”
android:left=”0dip”
android:right=”0dip” />
<stroke
android:width=”2dip”
android:color=”#969494″ />
</shape>
</item>
</selector>
