안드로이드 둥근 모서리 레이아웃 만드는 방법(@drawable)

안드로이드 둥근 모서리 레이아웃 만드는 방법(@drawable)

안드로이드에서 UI를 개발하는건 아이폰에 비해 확실히 번잡스럽고 수고스럽다.(내 생각에) 

얼마전 아이폰에서 주소록 가져오기 기능을 개발하고 이제 안드로이드 주소록 가져오기 기능을 개발하려고 하는데 아이폰과 UI를 맞추려고 하니 인터넷 검색을 많이 해야하는 상황이다. (잘 모르니까) 

이러면서 하나 하나 경험하고 생산속도도 높아지고 흥미도 생길 것이라 믿고 있다. 수고스럽지만 의외로 재미도 있다. 아이폰 개발과 또 다른 매력이 있는 것 같다. 

우선 하나의 Activity를 추가하고 레이아웃을 그리는 작업을 하고 있다.
워낙 새로운걸 추가하고 만드는 경험이 없어서 하나 하나 차근차근 진행하는 중이고 새로운 기능을 알아갈 때마다 반갑고 재미있고 신난다.

상단 타이틀바 아래 검색 영역은 LinearLayout안에 또 하나의 LinearLayout을 넣고 그 레이아웃안에 ImageView와 EditText를 넣은 뒤 화살표 그림처럼 모서리를 둥글게 만드는 것이 목적이다. 

Layout을 만든 xml코드는 다음과 같다 

<!-- 검색영역 -->

<LinearLayout

    android:layout_width="match_parent"

    android:layout_height="50dp" android:background="#eee">

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="40dp"

        android:layout_gravity="center_vertical"

        android:layout_marginLeft="5dp"

        android:layout_marginRight="5dp"

        android:background="@drawable/round_corner" android:orientation="horizontal"

        android:focusableInTouchMode="true">

        <ImageView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:src="@drawable/exchange_main_serch_off"

            android:layout_gravity="center_vertical"

            android:layout_marginLeft="5dp"/>

        <EditText

            android:layout_width="match_parent"

            android:layout_height="34dp"

            android:lines="1"

            android:inputType="text"

            android:hint="검색"

            android:textSize="16dp"

            android:background="@android:color/transparent"

            android:layout_gravity="center_vertical"

            android:layout_marginLeft="3dp"

            android:layout_marginRight="3dp"

            android:textColor="@color/common_google_signin_btn_text_dark_focused"

            android:textCursorDrawable="@drawable/edit_text_cursor_color"

            />

    </LinearLayout>

</LinearLayout>

코드 상에 빨간 밑줄 부분이 둥글게 만들어주는 부분, @drawable/round_corner 로 background를 지정했기 때문이다. 

@drawable/round_corner 작성법은 다음과 같다. 

우선 res/drawable에서 New > Drawable Resource file 을 선택 한 뒤 round_corner로 이름을 입력해서 생성한다. 

다음 round_corner.xml 파일에는 다음과 같이 작성해주면 된다. 

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

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

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

    <corners android:radius="5dp"/>

    <padding

        android:left="2dp"

        android:top="2dp"

        android:right="2dp"

        android:bottom="2dp" />

</shape>

역시 빨갛게 표시된 부분이 모서리 둥글기의 크기다. padding은 넣어도 되고 없어도 된다. 

별건 없지만, 아직 안드로이드 UI개발에 대해 잘 모르는 입장이라 원하는 스타일로 하나 하나 만들어질 때마다 재미가 느껴진다. 늦게나마 안드로이드 개발에 뛰어든 보람이 있다. 위의 소스 상에 다음 포스팅 소재가 있는데 바로 EditText 란 녀석이다. 저 녀석도 꽤 기능이 많고 개발하는 기능에 따라 중추적인 역활을 하는 녀석이기도 하기 때문에 별도의 포스팅에서 한번 다뤄 보도록 하겠다.