Android Gradient Background 구현 방식

drawable xml 방식으로 Gradient background를 표현 할 수 있다.

 

gradient type은 linear, radial, sweep이 있음. 그중 Linear, Radial 만 기술 하려고 한다.

 

 

Linear Type

---

리니어 타입으로 일직선으로 그라디언트 표현

startColor, centerColor, endColor 를 정할 수 있있다.

angle : 기준 방향은 오른쪽에서 왼쪽 방향이며 시계 반대 방향으로 돌아감

예) 아래 사진

ex)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <gradient
                android:type="linear"
                android:angle="90"
                android:endColor="#e99c78"
                android:startColor="#df7877" />
        </shape>
    </item>
</layer-list>

 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <gradient
                android:type="linear"
                android:angle="45"
                android:endColor="#00FF00"
                android:centerColor="#00FFFF"
                android:startColor="@color/transparent" />
        </shape>
    </item>
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <gradient
                android:type="linear"
                android:angle="225"
                android:endColor="@color/transparent"
                android:centerColor="#FFFFFF"
                android:startColor="#FF0000" />
        </shape>
    </item>
</layer-list>

 

Radial Type

---

Radial 타입으로 원으로 퍼짐 그라디언트 표현한다

startColor, centerColor, endColor 를 정할 수 있다.

gradientRadius : 원의 크기 % 값을 정할 수 있음. 기준이 어떻게 되는지 잘 모르겠음

아래는 90% 했을때 아래와 같음. 가로세로 중 짦은 부분에 대한 퍼센트 값 인것 같다.

 

 

 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <gradient
                android:centerColor="#e99c00"
                android:endColor="#e99c78"
                android:gradientRadius="90%p"
                android:startColor="#df7877"
                android:type="radial" />
        </shape>
    </item>
</layer-list>