밑그림 그리기 Soild, Stroke, Corner, Gradient

안드로이드 상에서 배경이 될 만한 밑그림 제작이 가능합니다.

 

디자이너로부터 밑그림 디자인 시안을 받는 것보다 직접 그려서 진행하는 부분이 좋습니다. 그 이유는 디자인 시안의 경우, 깨지는 경우도 있고 해상도에 따라서 갈라져 보일 수 있기 때문입니다.

 

밑그림을 제작할 때는 다음의 속성을 사용하며, res - drawable 폴더 내에서 생성하여 작업합니다.

 

Solid: 면을 그립니다.

Stroke: 선을 그립니다.

Corner: 모서리를 디자인합니다.

Gradient: 그라데이션을 그립니다.

 

하나씩 코드와 결과를 살펴봅니다.

 

1. 전체가 채워진 배경.

 

밑그림을 제작 시에 <selector> 부분은 shape으로 바꿔준 후, shape=" " 부분에서 속성을 지정해야 합니다.

지정 가능한 속성 값은 단 4가지로, “rectangle” (사각형), “oval” (타원), “line” (선), “ring” (링)입니다.

 

이렇게 배경색만 넣어진 그림을 만들고 싶다면, solid 뷰를 사용하면 됩니다.

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

    <solid
        android:color="#F44336"/>

</shape>

이미지 결과

 

2. 테두리만 채워진 밑그림

 

테두리만 채우고 싶다면, stroke 뷰를 사용합니다. width 속성을 이용해, 선의 두께를 결정할 수 있습니다.

안 쪽이 원래 검은색이 아닌 투명색의 png파일로 저장됩니다.

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

    <stroke
        android:width="20dp"
        android:color="#E91E63" />

</shape>

이미지 결과

3. 테두리와 배경이 합쳐진 밑그림

 

soild와 stroke를 동시에 사용해서 밑그림을 만들 수 있습니다.

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


    <solid
        android:color="#FFEB3B"/>
    <stroke
        android:width="30dp"
        android:color="#E91E63"/>

</shape>

이미지 결과

4. 모서리가 디자인된 밑그림

 

corner 뷰를 이용하면, 모서리 디자인이 가능합니다.

모서리의 경사를 설정하는 부분은 Radius에 값을 지정해주면 됩니다. 상단, 하단, 왼쪽, 오른쪽 각기 다른 경사를 줄 수도 있습니다.

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

    <solid android:color="#4CAF50" />
    <corners
        android:bottomLeftRadius="30dp"
        android:bottomRightRadius="30dp"
        android:topLeftRadius="30dp"
        android:topRightRadius="30dp"/>
</shape>

이미지 결과

5. 그라데이션 밑그림

 

gradient 뷰를 이용해 밑그림 자체에 그라데이션을 줄 수 있습니다.

gradient를 사용하면, start, center, end 부분에 컬러를 지정할 수 있으며, angle을 통해서 90도, 180도 등 원하는 각도로 회전도 가능합니다.

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

    <gradient
        android:angle="180"
        android:centerColor="#9C27B0"
        android:endColor="#2196F3"
        android:startColor="#FFC107" />
    
</shape>

이미지 결과