EditText 테두리 둥글게 - EditText teduli dung-geulge

 안녕하세요. 이번 포스트에선 밑에 사진과 같이 ListView를 사용할 때 저렇게 모서리가 둥글둥글하고 이쁜 리스트뷰를 만들어 볼 겁니다.

EditText 테두리 둥글게 - EditText teduli dung-geulge
둥글둥글한 모서리

 자 먼저 res/drawable 폴더에 가셔서 layout_background.xml을 만들어 줍시다.

EditText 테두리 둥글게 - EditText teduli dung-geulge
res/drawable/layout_background.xml 생성

 그리고 밑에 있는 코드들을 layout_background.xml에 작성해주세요.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#EEEEEE" />
    <stroke android:color="#CCCCCC" android:width="1dp" />
    <corners android:radius="7dp" />
</shape>

 그 다음 res/layout에 round_theme.xml을 만들어 줍시다.

EditText 테두리 둥글게 - EditText teduli dung-geulge
res/layout/round_theme.xml 생성

그리고 다음 코드를 삽입해 봅니다.

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent">

            <TextView
                android:id="@+id/time_month"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="몇월"
                android:layout_toLeftOf="@+id/time_day"
                android:paddingRight="10dp"
                android:textAppearance="@style/TextAppearance.AppCompat.Large"/>

            <TextView
                android:id="@+id/time_day"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="몇일"
                android:layout_toLeftOf="@+id/switchBtn"
                android:paddingRight="10dp"
                android:textAppearance="@style/TextAppearance.AppCompat.Large"/>

            <Switch
                android:id="@+id/switchBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:focusable="false"
                android:focusableInTouchMode="false"/>

        </RelativeLayout>
EditText 테두리 둥글게 - EditText teduli dung-geulge
결과

 그럼 이제 이런 결과가 나타날 것인데요, 이는 예를 들기 위해 잠시 작성한 코드이지, 이제 여러분들이 직접 레이아웃을 꾸미시면 됩니다. 마지막으로 activity_main.xml에 리스트뷰를 생성해보면 

EditText 테두리 둥글게 - EditText teduli dung-geulge
둥글둥글한 모서리

 이렇게 처음에 나왔던 사진과 같이 이런 형태로 리스트뷰가 변해있을 것입니다. 

 지금까지 모서리가 둥글둥글한 리스트뷰를 만들어 보았는데요, 이제 이것을 사용하려면 Adapter란 것이 필요합니다. 이건 다음 포스트에서 다뤄보겠습니다. 감사합니다.

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

<item android:state_pressed="true" android:state_focused="true">

    <shape>

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

        <stroke

            android:width="2.3dp"

            android:color="#FF8000" />

         <corners

            android:radius="15dp" />

    </shape>

</item>

<item android:state_pressed="true" android:state_focused="false">

    <shape>

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

        <stroke

            android:width="2.3dp"

            android:color="#FF8000" />      

        <corners

            android:radius="15dp" />       

    </shape>

</item>

<item android:state_pressed="false" android:state_focused="true">

    <shape>

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

        <stroke

            android:width="2.3dp"

            android:color="#FF8000" />  

        <corners

            android:radius="15dp" />                          

    </shape>

</item>

<item android:state_pressed="false" android:state_focused="false">

    <shape>

        <gradient 

            android:startColor="#F2F2F2"

            android:centerColor="#FFFFFF"

            android:endColor="#FFFFFF"

            android:angle="270"

        />

        <stroke

            android:width="0.7dp"                

            android:color="#BDBDBD" /

        <corners

            android:radius="15dp" />            

    </shape>

</item>

<item android:state_enabled="true">

    <shape>

        <padding 

                android:left="4dp"

                android:top="4dp"

                android:right="4dp"

                android:bottom="4dp"

            />

    </shape>

</item>

</selector>