[Android] Layout 테두리 설정 및 모서리 둥글게 만들기

안녕하세요 초보개발자 시아아빠입니다.

저가 요즘따라 굉장히 많이 사용하게 되는 것 중에 하나인데요.

 

레이아웃이나 버튼을 커스텀하여 테두리를 주거나 모서리를 둥글게 만들어주는 겁니다.

 

기본 EditText

회원가입을 구현 중 EditText를 구현하면 위 그림과 같이 하단에 밑줄이 생겨서 입력을 할 수 있게되어 있죠.

 

저가 원하는 그림은 이것이 아니기에 커스텀하여 사용하기로 하였습니다. 

 

<android.support.constraint.ConstraintLayout
                android:id="@+id/id_first_floor"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintVertical_weight="1"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toTopOf="@+id/pwd_second_floor">

                <android.support.constraint.ConstraintLayout
                    android:id="@+id/txt_id_layout"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    app:layout_constraintHorizontal_weight="0.4"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toStartOf="@+id/edit_id_layout"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="20dp"
                        android:text="아이디"
                        android:textSize="14dp"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintBottom_toBottomOf="parent"/>

                </android.support.constraint.ConstraintLayout>

                <android.support.constraint.ConstraintLayout
                    android:id="@+id/edit_id_layout"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    app:layout_constraintHorizontal_weight="1"
                    app:layout_constraintStart_toEndOf="@+id/txt_id_layout"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent">

                    <EditText
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:hint="4~15자 영문, 숫자"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintBottom_toBottomOf="parent"/>

                </android.support.constraint.ConstraintLayout>

            </android.support.constraint.ConstraintLayout>

짧게(?) 아이디부분만 보겠습니다. 레이아웃을 세분화하여 좀 길어보이기는 하지만 별 내용없습니다.

EditText에 준 특별한(?) 설정이라고는 hint밖에 없는데요.

이 기본 EditText를 둥글게 만들고 테두리까지 주고 싶으신 분은 저 뿐만이 아니라고 생각됩니다 ㅎ(원하는 그림에따라)

 

둥글게 그리고 테두리를 주려면 해당 EditText(해당 사용자가 원하는 뷰 여기서는 EditText)에

 

android:background="@drawable/제작한 drawable"을 주게되면 그림이 바뀌게 됩니다.

이 background속성에 해당 drawable을 주기위해서는 background에 첨부해줄 xml을 만들어줘야하는데요.

 

1. 레이아웃테두리 만들기

drawable에서 마우스 오른쪽을 클릭하여 New -> Drawable Resource File을 눌러줍니다.

 

 

위 그림에서 File Name에 작명센스를 발휘하시면 됩니다.

저는 border_layout.xml로 지어보겠습니다.

 

<border_layout.xml>

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:start="2dp"  //----------------------- 왼쪽 테두리
        android:end="2dp"    //----------------------- 오른쪽 테두리
        android:top="2dp"    //----------------------- 위쪽 테두리
        android:bottom="2dp">  //--------------------- 아래쪽 테두리
        <shape android:shape="rectangle">  //--------- 사각형모양으로 테두리를 주겠다함 
            <stroke android:width="2dp"    //--------- 테두리의 두께
                android:color="@color/main_theme"/>  //테두리 색 설정
            <solid android:color="#ffffff"/>         //내부 색 설정
        </shape>
    </item>
</layer-list>

레이아웃 테두리 설정은 위와 같습니다.

 

 

2. 버튼을 둥글게 만들기

위에서 xml을 만들어 준것과 같이 New -> Drawable Resource File을 하여 버튼 둥글게 만들어줄 xml을 만듭니다.

저는 button_round.xml로 만들겠습니다.

 

<button_round.xml>

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"         //10dp만큼
    android:shape="rectangle">     //각모서리에

    <solid android:color="#FFFFFF"/>  // 내부 색 설정
    <corners
        android:topLeftRadius="12dp"        //좌측 상단에 12dp에 해당하는만큼 둥글게 만들겠다
        android:topRightRadius="12dp"       //우측 상단 
        android:bottomLeftRadius="12dp"     //좌측 하단
        android:bottomRightRadius="12dp"/>  //우측 하단

</shape>

이렇게 주어 내부는 하얗고 모서리는 둥글게 만들어주는 xml을 만들어 보았습니다.

 

이어서 모서리가 둥글며 테두리가 있는 xml을 만들어 처음에 보여드린 EditText에 적용해보겠습니다.

 

<edit_round.xml>

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle">

    <stroke android:width="2dp"
        android:color="@color/main_theme"/>

    <solid android:color="#FFFFFF"/>
    <corners
        android:topLeftRadius="12dp"
        android:topRightRadius="12dp"
        android:bottomLeftRadius="12dp"
        android:bottomRightRadius="12dp"/>

</shape>

(2020-04-02 추가 포스팅) [포스팅 읽어본 후 내용이 많이 부족한 듯 하여 추가]

 

3. 적용하기

 

 

적용하기 원하는 뷰에 background속성에 만들어준 drawable을 넣어줍니다.

<EditText
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:hint="4~15자 영문, 숫자"
   android:backgroud="@drawable/edit_round"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintTop_toTopOf="parent"
   app:layout_constraintBottom_toBottomOf="parent"/>

---

적용전                                                                                                 적용후

 

궁금하신 점은 댓글이나 카카오톡 wkd13927로 물어주시면 감사하겠습니다!

 

여러분의 하트 하나 구독하나가 저에게 큰 힘이 됩니다.