ボタンやviewに影を付ける

マテリアルデザインが徐々に一般的になり、影付きのボタンやらビューを実装しなきゃいけない!

よし、 android:elevation ってのがあるから、それを使えば良さそうだ!と思いきや、APILevel21〜とのことで、心折れる。 デザイナーさんに影の画像をもらうのもなんか嫌だし、自分でxml書くにはどうすれば。。

そんなときのテンプレート。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- drop shadow -->
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#00cccccc" />
            <corners
                android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#10cccccc" />
            <corners
                android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#20cccccc" />
            <corners
                android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#30cccccc" />
            <corners
                android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#50cccccc" />
            <corners
                android:radius="5dp" />
        </shape>
    </item>

    <!-- background -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/lightgray"/>
            <corners
                android:radius="5dp" />
            <size
                android:height="100dp"/>
        </shape>
    </item>
</layer-list>

rectangle を例に取り上げていますが、ovalとかでもこれでいける。

Related Posts