[Android] drawable resize, customizing

 

[When to use?]

Drawable resource 

확장자 png 같은 이미지 리소스를 사용하다보면

width, height 사이즈를 임의 조정하거나

배경색 변경, 테두리 굴곡 부여등의 커스터마이징이 필요할 때가 있다.

 

이를 위한 솔루션을 정리해본다.

 

 

 

 

1. shape tag 

별도의 xml 파일을 생성하고 최상단에 이 구문을 추가한다.

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<shape> : 셰이프 드로어블, 이는 루트 요소에 배치해야함.

<xmlns:android> : 문자열. 필수. XML 네임스페이스를 정의하는 구문

안드로이드 개발시 "http://schemas.android.com/apk/res/android" << 이곳의 네임스페이스를 이용하는 것이 국룰이다.

 

 

네임스페이스?? : "모든 식별자(변수, 메소드, 형식 등의 이름)가 고유하도록 영역을 지정하는 것"

우린 이미 C++에서  'using namespace std' 를 수도 없이 쳤었다.

 

shape 드로어블에 android resource namespace에 정의된

stroke, solid 등의 태그를 지정하여 drawable resource를 커스터마이징 할 수 있다.

 

 

 

---

바로 예제로 들어가보자.

layout/battery_toast_message.xml

<?xml version="1.0" encoding="utf-8"?>

<!--Image, TextView를 감싸는 LinearLayout, Toast Message 형태로 띄워줄 레이아웃 -->
<!--포인트는 이부분이다. 'background' drawable 에 주목-->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:gravity="center"
    android:background="@drawable/custom_battery_toast"
    android:layout_marginHorizontal="80dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<!-- battery vector imageView -->
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_baseline_battery_charging_full_24"/>
        
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@color/white"
        android:textSize="20sp"
        android:text="battery is charging!"/>

</LinearLayout>

 

drawable/custom_message_toast.xml

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

<!-- stroke는 테두리 선의 너비를 결정한다.-->
<stroke
    android:width="0.7dp"/>
    <!--corners는 테두리 굴곡(둥근 모서리)을-->
<corners android:radius="3dp"/>
<!--solid는 배경색상을-->
<solid android:color="@color/lightGray"/>
<padding android:bottom="3dp"
    android:top="3dp"/>
</shape>

Image, TextView를 감싸는 LinearLayout에 background를 커스터마이징 배경 drawable resource로 지정한다.

 

이렇게 하는 이유는

 

기본 ImageView, LinearLayout에서 border, stroke 같은 속성을 갖지 않기때문이다.

 

 

 

결과 화면

이미지, 텍스트뷰를 감싸는 LinearLayout의 background에 customizing.xml 파일을 지정했다.

 

 

 

2. layer-list tag

보통 여러 그림을 겹쳐보이게 하거나 같은 layer 안에 나열하기 위해 사용하는 태그다.

 

Q. ImageView, ImageButton에도 임의의 width, height조정이 가능한데 굳이 이 태그를 사용하는 이유?

A. Button + Text 같이 텍스트형태의 제목이 가미된 이미지 버튼의 경우 이미지에 대한 width, height조정이 불가능하기 때문이다.

 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
        android:drawable="@drawable/store"
        android:width="100dp"
        android:height="60dp"
        android:id="@+id/customer_login_image" />

</layer-list>

store 이미지 파일에 대한 width, height 을 미리 지정하고

Button 에 drawabletop 태그를 지정할 경우 따로 width, height을 지정하거나

동적으로 (programatically) 크기 재조정을 하지 않아도 위에 명시한 xml파일에 지정한대로 이미지가 표현된다.

 

 

 

특정 View의 밑줄 라인 등을 추가할 때도 요긴하게 쓰인다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--    일종의 Trick 임 음수 dp 붙여서 적용 되지 않게 하는 것이. -->
    <item android:top="-2dp" android:left="-2dp" android:right="-2dp">
        <shape android:shape="rectangle">
        <!-- 이로서 밑줄만 적용된다. (top, left, right =>음수 -->
            <stroke android:width="1dp" android:color="@color/primaryTextColor"/>
        </shape>
    </item>
</layer-list>

[Reference]

https://developer.android.com/guide/topics/resources/drawable-resource?hl=ko

https://stackoverflow.com/questions/1598119/is-there-an-easy-way-to-add-a-border-to-the-top-and-bottom-of-an-android-view