[Android/Kotlin/Tip] 테두리(border) 그리기 - add a border to the top and bottom

 

 

1. 설명

 

결과

 

이번 글에서는 Border(테두리)를 추가하는 방법에 관하여 기술한다. 단, 그중에서 Border를 생성할 때 위쪽 방향이 없도록 만들거나 아래 한 방향만 Border를 추가하는 방법을 알아본다.

 

 

기존에 모든 Border를 추가하거나 Style Custom 하는 방법에 관해서는 아래 이전에 작성한 글을 참조하면 될 것 같다.

 

[TIP] Android Style Background 꾸미기 - 테두리, 모서리 둥글게 등

 

 

activity_main.xml

메인 레이아웃으로서 Border를 정의한 shape 파일을 적용시킬 용으로 TextView 2개와 Button 2개로 구성하였다.

 

결과를 확인하기 위해서 레이아웃을 배치해준 것뿐이므로 살펴볼 속성은 딱히 없으며, 각 Object의 각각 다르게 정의한 Shape를 Background로 줌으로써 각각 다른 Border를 나타내도록 하였다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal">
        <!-- Top Left -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="30dp"
            android:gravity="center"
            android:background="@drawable/border_not_top"

            android:text="Test 1"
            android:textSize="24sp"/>

        <!-- Top Right -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="30dp"
            android:gravity="center"
            android:background="@drawable/border_not_left"

            android:text="Test 2"
            android:textSize="24sp"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal">

        <!-- Bottom Left -->
        <androidx.appcompat.widget.AppCompatButton
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="30dp"
            android:gravity="center"
            android:background="@drawable/border_not_horizontal"
            android:text="Test 3"
            android:textSize="24sp"/>

        <!-- Bottom Right -->
        <androidx.appcompat.widget.AppCompatButton
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="30dp"
            android:gravity="center"
            android:elevation="5dp"
            android:background="@drawable/border_only_bottom"
            android:text="Test 4"
            android:textSize="24sp"/>
    </LinearLayout>

</LinearLayout>

 

 

---

 

각각 다른 Border를 만들어내기 위해서 각 정의한 파일을 보면 크게 2개의 메커니즘을 통하여 구현하였다.

 

우선 그 첫 번째 방법을 살펴보자면 동일하게 테두리를 지정해주며 해당 item의 제외하고자 하는 방향의 Padding 값을 줌으로써 해당 방향만 Border가 보이지 않게 만드는 것이다.

 

border_not_top.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:top="-4dp" >
        <shape android:shape="rectangle">
            <stroke android:width="3dp" android:color="#FF000000" />
        </shape>
    </item>
</layer-list>

 

 

위 방법과 동일하게 여기서는 2개의 방향에 대하여 Border를 보이지 않게 하기 위해서 2개의 방향으로 Padding 값을 부여하고 있다.

 

border_not_horizontal

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:left="-4dp" android:right="-4dp">
        <shape android:shape="rectangle">
            <stroke android:width="3dp" android:color="#FF000000" />
        </shape>
    </item>
</layer-list>

 

 

---

다음으로 두 번째  방법에 관하여 말하자면 여기서는 2개의 Item을 사용한다.

 

이 중 1개의 item에서는 Border로서 적용하고자 하는 두께와 Color를 지정해 줌으로써 Border를 나타내며

 

또 다른 1개의 item에서는 Padding 값을 조절함으로써 제외하고자 하는 Border의 방향으로 배경색과 동일한 Border를 중복 적용하는 것이다.

 

이렇게 함으로써 배경색과 동일한 Border를 갖는 방향은 마치 Border가 없는 것처럼 보이게 되므로 원하는 방향만 Border를 나타낼 수 있게 되는 것이다.

 

 

border_not_left.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle">
            <stroke android:width="3dp" android:color="#FF000000" />
        </shape>
    </item>

    <item android:bottom="4dp" android:right="4dp" android:top="4dp">
        <shape android:shape="rectangle">
            <stroke android:width="4dp" android:color="#ffffff" />
        </shape>
    </item>

</layer-list>

 

border_only_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle">
            <stroke android:width="3dp" android:color="#FF000000" />
        </shape>
    </item>
    <item android:bottom="4dp" >
        <shape android:shape="rectangle">
            <stroke android:width="3dp" android:color="#ffffff" />
        </shape>
    </item>
</layer-list>

 

 

---

여담으로 말하자면 첫 번째 방법으로는 안의 Padding 값을 건드리는 것이기 때문에 Object안 Text 같은 Contents나 Background Color 같이 다른 속성과 같이 사용할 때 영향을 받을 수 있다.

 

 

또한, 두 번째 방법으로는 확대하여 자세하게 보면 제외되는 Border부분이 약간 보여 직선으로 깨끗하게 보이지 않는 것을 확인할 수 있다.

 

때문에 사용하고자 하는 상황에 따라서 맞는 방법을 선택하고 추가적인 설정을 통하여 사용해야 할 것 같다.

 

 

 

 

2. 전체 파일

 

GitHub - Notepad96/BlogExample02