쉐이프 드로어블 예제

쉐이프 드로어블 : 간단히 말해 XML로 도형을 그릴 수 있도록 하는 것

/res/drawable 폴더 안에 XML 파일을 만들고 최상위 태그를 <shape>로 바꾸면 도형 하나를 정의할 수 있다.

- <shape>의 속성 ) rectangle, oval, line, ring 등

- <stroke> : shape 태그 안에 넣어서 테두리 선의 속성 지정

- <solid> : 도형의 안쪽 채울 때

- <gradient> : 배경 그라데이션 주기

 

 

<layer-list> : 하나의 XML 파일에 여러 그래픽 넣기

 

 

저세상 디자인

 

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#4CAF50"
    android:orientation="vertical">

    <Button
        android:id="@+id/button"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/goodplace" />

    <View
        android:id="@+id/button2"
        android:layout_width="200dp"
        android:layout_height="120dp"
        android:background="@drawable/rect_shape"
        />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@drawable/thumbnail_base">

    </FrameLayout>

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/linear_border"
        android:text="Button" />
</LinearLayout>

linear_border.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#BE55DA" />
            <solid android:color="#00000000" />
        </shape>
    </item>

    <item android:top="1dp" android:bottom="1dp" android:right="1dp" android:left="1dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#BE55DA" />
            <solid android:color="#00000000"/>
        </shape>
    </item>

</layer-list>

thumbnail_base.xml

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

    <gradient
        android:startColor="#7288DB"
        android:centerColor="#3250B4"
        android:endColor="#254095"
        android:angle="90"
        android:centerY="0.5"
        />
    <corners android:radius="2dp"/>


</shape>

rect_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:width="200dp" android:height="120dp"/>
    <stroke android:width="1dp" android:color="#0000ff"/>
    <solid android:color="#aaddff" />
    <padding android:bottom="1dp" />

</shape>