Android：光沢のあるボタンをXMLで作る

もう少しカッコいいボタンが欲しくて、光沢感のあるものを作ってみました。

<layer-list>タグを使って光沢用のレイアウトを被せる手法を使いました。

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <!-- フォーカス時 --> <item android:state_focused="true"><layer-list> <item> <shape android:shape="rectangle" > <corners android:topLeftRadius="5dip" android:topRightRadius="5dip" android:bottomLeftRadius="5dip" android:bottomRightRadius="5dip" /> <gradient android:startColor="@color/btn_glass_black_1" android:endColor="@color/btn_glass_black_2" android:angle="90" /> <stroke android:width="2dip" android:color="@color/btn_glass_black_1" /> </shape> </item> <item android:top="5dip" android:bottom="14dip" android:left="10dip" android:right="10dip"> <shape android:shape="rectangle"> <corners android:topLeftRadius="3dip" android:topRightRadius="3dip" android:bottomLeftRadius="3dip" android:bottomRightRadius="3dip" /> <gradient android:startColor="@color/btn_glass_black_2" android:centerColor="@color/btn_brightness" android:endColor="@color/btn_brightness" android:angle="90" /> </shape> </item> </layer-list></item> <!-- 押下時 --> <item android:state_pressed="true"> <shape android:shape="rectangle" > <corners android:topLeftRadius="5dip" android:topRightRadius="5dip" android:bottomLeftRadius="5dip" android:bottomRightRadius="5dip" /> <gradient android:startColor="@color/btn_glass_black_2" android:endColor="@color/btn_glass_black_1" android:angle="90" /> <stroke android:width="2dip" android:color="@color/btn_glass_black_1" /> </shape> </item> <!-- 通常時 --> <item><layer-list> <item> <shape android:shape="rectangle" > <corners android:topLeftRadius="5dip" android:topRightRadius="5dip" android:bottomLeftRadius="5dip" android:bottomRightRadius="5dip" /> <gradient android:startColor="@color/btn_glass_black_1" android:endColor="@color/btn_glass_black_2" android:angle="90" /> </shape> </item> <item android:top="5dip" android:bottom="14dip" android:left="10dip" android:right="10dip"> <shape android:shape="rectangle"> <corners android:topLeftRadius="3dip" android:topRightRadius="3dip" android:bottomLeftRadius="3dip" android:bottomRightRadius="3dip" /> <gradient android:startColor="@color/btn_glass_black_2" android:centerColor="@color/btn_brightness" android:endColor="@color/btn_brightness" android:angle="90" /> </shape> </item> </layer-list></item> </selector>

どうも上に被せるitemは下に配置したitemのpaddingの影響を受けてしまうようで、自由に配置するのが難しいです。

なのでレイアウトを決める際にはボタンの高さを固定で30dipとして光沢位置を決めました。

paddingもXMLでは使わず、ボタンのプロパティとして設定しました。

大体イメージ通りのボタンになりましたが、layout_heightを30dipから変えられないという融通の利かないものになってしまったのが残念です。。。