본문 바로가기
프로그래밍

[안드로이드] 그림자 있는 이미지를 xml로 만들기

by hansoo.labs 한수댁 2015. 1. 8.

Custom Shape Drawable for Material Design style

일명 롤리팝 버전에서 생긴 매터리얼 디자인 이라고 해야 할까? 리소스 xml로 아래 그림자 있는 버튼 이미지를 만들었다.
켜진 모양



<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <item
        android:bottom="2dp"
        android:right="2dp">
        <shape android:shape="oval" >
            <solid android:color="@color/green" />
        </shape>
    </item>

    <!-- shadow -->
    <item
        android:bottom="0dp"
        android:left="12dp"
        android:right="0dp"
        android:top="12dp">
        <shape android:shape="oval" >
            <gradient
                android:angle="135"
                android:centerColor="#3533691e"
                android:endColor="#5033691e"
                android:startColor="#0033691e"
                android:type="linear"
                android:useLevel="false" />
            
            <size
                android:height="50dp"
                android:width="50dp" />
        </shape>
    </item>

    <!-- center -->
    <item
        android:bottom="10dp"
        android:left="8dp"
        android:right="10dp"
        android:top="8dp">
        <shape android:shape="oval" >
            <size
                android:height="50dp"
                android:width="50dp" />

            <solid android:color="@color/white" />
        </shape>
    </item>

</layer-list>


그리고 꺼진 모양


<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <item
        android:bottom="2dp"
        android:right="2dp">
        <shape android:shape="oval" >
            <solid android:color="@color/gray_semi" />
        </shape>
    </item>

    <!-- shadow -->
    <item
        android:bottom="6dp"
        android:left="12dp"
        android:right="6dp"
        android:top="12dp">
        <shape android:shape="oval" >
            <gradient
                android:angle="135"
                android:centerColor="#11000000"
                android:endColor="#20000000"
                android:startColor="#00000000"
                android:type="linear"
                android:useLevel="false" />
            
            <size
                android:height="50dp"
                android:width="50dp" />
        </shape>
    </item>

    <!-- center -->
    <item
        android:bottom="10dp"
        android:left="8dp"
        android:right="10dp"
        android:top="8dp">
        <shape android:shape="oval" >
            <size
                android:height="50dp"
                android:width="50dp" />

            <solid android:color="@color/white" />
        </shape>
    </item>

</layer-list>

댓글2