読者です 読者をやめる 読者になる 読者になる

kojiko-android’s blog

開発中にハマった時の解決策や、忘れがちなことを残しておきます。

Shapeでアクアボタン風リソース

Android Studio Androidアプリ 備忘録 開発

Shapeで作ってみた

f:id:kentaro198477:20170206235029p:plain

前回記事と同様に、こんどは横長のアクアボタン風リソースを作ってみました。
ちょっと違うけど、なんとなくそれっぽいのではないかと思います。
緑のボタンはテキストシャドウを設定しています。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>

        <layer-list>

            <item>
                <shape android:shape="rectangle" >
                    <corners android:radius="100dp" />
                    <gradient
                        android:endColor="#15000000"
                        android:startColor="#23000000"
                        android:angle="90"/>
                    <padding android:top="3dp" android:bottom="3dp" android:left="3dp" android:right="3dp"/>
                </shape>
            </item>

            <item >
                <shape android:shape="rectangle" >
                    <corners android:radius="100dp" />
                    <solid android:color="#00bfff"/>
                </shape>
            </item>

            <item>
                <shape android:shape="rectangle" >
                    <corners android:radius="100dp" />
                    <gradient
                        android:startColor="#b7000000"
                        android:endColor="#00ffffff"
                        android:angle="270" />
                </shape>
            </item>

            <item android:top="3dp" android:left="3dp" android:right="3dp" android:bottom="3dp">
                <shape android:shape="rectangle" >
                    <corners android:radius="100dp"/>
                    <gradient
                        android:centerY="0.7"
                        android:startColor="#b0ffffff"
                        android:centerColor="#3b8b8b8b"
                        android:endColor="#d0ffffff"
                        android:angle="90" />
                </shape>
            </item>

        </layer-list>
    </item>
</selector>

今回も、レイヤーリストでいくつかの画像を重ねています。
を指定して調整して作ると、もっとそれっぽい画像になったんですが、
Buttonのバックグラウンドとして使うと、が無視されてしまうため、
一部が伸びてしまったりしてバランスが変になります。
(ImageViewだと綺麗に表示されるが、テキストも表示したい)

また、Shapeはボカした感じの表現が難しいので、
ふちがくっきりしすぎています。
少しでも雰囲気をプラスするために、
グリーンのボタンには
テキストにシャドウを施してみました。


AQUAなボタン、なんか押したくなりますよね♪