[안드로이드] Drawable 드로어블

Drawable은 뷰에 설정할 수 있는 객체이며 그 위에 그래픽을 그릴 수 있다. 일반적으로 사용하는 자바 코드가 아닌 xml을 통해 어떻게 그려질지 정의할 수 있다. 드로어블 xml파일은 이미지를 버튼 배경으로 설정한 것처럼 app/res/drawable 폴더 안에 넣어 버튼의 배경을 설정할 수 있다.

 

Drawable 종류에는..

• 비트맵 드로어블(BitmapDrawable): 이미지 파일을 보여줄 때 사용, 비트맵 그래픽 파일을 사용해서 생성
• 상태 드로어블(StateListDrawable): 상태별로 다른 비트맵 그래픽을 참조함
• 전환 드로어블(TransitionDrawable): 두 개의 드로어블을 서로 전환할 수 있음
• 셰이프 드로어블(ShapeDrawable): 색상과 그러데이션을 포함하여 도형 모양을 정의할 수 있음
• 인셋 드로어블(InsetDrawable): 지정된 거리만큼 다른 드로어블을 들어서 보여줄 수 있음
• 클립 드로어블(ClipDrawable): 레벨 값을 기준으로 다른 드로어블을 클리핑할 수 있음
• 스케일 드로어블(ScaleDrawable): 레벨 값을 기준으로 다른 드로어블의 크기를 변경할 수 있음

가장 많이 사용되는 상태 드로어블과 셰이프 드로어블을 보도록 하겠다.

 

상태 드로어블은 바로 위에 상태별로 다른 그래픽을 참조할 수 있다고 하였다. 말그대로 상태에 따라 보여주고 싶은 것을 보여주겠다는 것이다.

 

코드

 

res -> drawable -> image1.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/ic_launcher_background"
        />

    //평소 상태
    <item
        android:drawable="@drawable/ic_launcher_foreground"
        />
</selector>

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/image1" //drawable에 만들어져있는 image1.xml 참조
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

결과

 

버튼을 누를 경우 이미지가 바뀐다.

 

다음으로,

 

셰이프 드로어블은 색상과 그라데이션을 포함하여 xml로 도형을 그릴 수 있다. 도형을 만들고 이쁘게 꾸민다고 생각하면 될 것 같다.

(상태 드로어블의 activity_main.xml 파일에서 코드를 추가한 형태로 진행)

 

코드

 

res -> drawable -> shape1.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="#0000ff"/>

    //도형의 안쪽을 채울 때 사용
    <solid
        android:color="#aaddff"/>

    //테두리 안쪽 공간을 띄고 싶을 때
    <padding
        android:bottom="1dp"/>

</shape>

 

res -> drawable -> shape2.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>

 

res -> drawable -> shape3.xml (맨 위 버튼 꾸밈)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
//여러 개의 그래픽을 하나의 xml 파일에 넣을 수 있다. (중첩시켜서 넣을 수 있다)

    <item>
        <shape
            android:shape="rectangle">
            <stroke
                android:width="1dp"
                android:color="#BE55DA"/>
            <solid
                android:color="#00000000"/>
            <size
                android:width="200dp"
                android:height="100dp"/>
        </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="#FF55DA"/>
            <solid
                android:color="#00000000"/>
        </shape>
    </item>

</layer-list>

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity"
    android:background="@drawable/shape2">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:background="@drawable/shape3"
        android:text="버튼"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/image1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button"
        android:background="@drawable/shape1"
        android:text="버튼"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

결과

 

 

 

부족한 점, 피드백 환영합니다.

 

감사합니다.

 

 

참고

정재곤, 『Do it! 안드로이드 앱 프로그래밍 - 개정 6판』, 이지스퍼블리싱(주)