[Android] 8. Drawable Resource XML 작성 : gradient, shape, drawable, layer-list

 

 

https://github.com/upcake/Class_Examples

교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. 

gif 파일은 클릭해서 보는 것이 정확합니다.

---

 - Drawable Resource XML 작성 : gradient, shape, drawable, layer-list -

▲작동 화면

▼activity_main.xml : 메인 화면

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/back_drawable">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_centerInParent="true"
        android:layout_marginTop="81dp"
        android:layout_marginEnd="143dp"
        android:layout_marginRight="143dp"
        android:background="@drawable/finger_drawable" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="260dp"
        android:background="@drawable/rect_drawable"
        android:text="Button1" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="71dp"
        android:background="@drawable/border_drawable"
        android:text="Button2" />

</RelativeLayout>

 

▲새 Drawable Resource File 만들기

 

▼back_drawable.xml : 배경 그러데이션 설정

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#FFEB3B"
        android:centerColor="#FF9800"
        android:endColor="#F44336"
        android:angle="90"
        android:centerY="0.5" />
        <!--angle : 그라데이션의 진행 각도-->
        <!--0도 : 왼쪽에서 오른쪽으로-->
        <!--90도 : 밑에서 위로-->
        <!-- centerY : 중간색의 위치 0.0 ~ 1.0 -->

    <corners android:radius="10dp" />
    <!--radius : 모서리 둥글게 해줌-->
</shape>

 

▼finger_drawable.xml : 눌렀을 때 버튼 이미지 바꾸기

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
        android:drawable="@drawable/finger_pressed" />
    <!--눌렸을때 finger_pressed.png-->
    <item android:drawable="@drawable/finger" />
    <!--안 눌렸을때 finger-->
</selector>

 

▼rect_drawable.xml : 사각형 모양 만들기

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

    <size android:width="200dp" android:height="120dp" />
    <stroke android:width="1dp" android:color="#FF9800" />
    <!--stroke : 테두리 색깔 지정-->
    <solid android:color="#FFEB3B" />
    <!--solid : 내용물 색깔 지정-->
    <padding android:bottom="1dp" />
</shape>

 

▼border_drawable : 모양 안으로 복층 표현

<?xml version="1.0" encoding="utf-8"?>
<!--layer-list : list를 쌓는 것-->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <size android:width="200dp" android:height="100dp" />
            <stroke android:width="1dp" android:color="#000000" />
            <solid android:color="#FFFFFF" />
        </shape>
    </item>

    <item
        android:top="5dp"
        android:bottom="5dp"
        android:right="5dp"
        android:left="5dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="@android:color/holo_purple"/>
        </shape>
    </item>

    <item
        android:top="10dp"
        android:bottom="10dp"
        android:right="10dp"
        android:left="10dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="@android:color/holo_blue_dark"/>
        </shape>
    </item>
</layer-list>