[Android] - 뷰의 테두리 와 색상을 변경하는 방법

안녕하세요 오늘은 뷰의 테두리와 색상을 변경하는 몇가지의 방법에 대해서 포스팅 해보겟습니다.

기본적으로 뷰는 직사각형으로 이루어져 있습니다. 하지만 이러한 직사각형 뷰는 이쁘지 않습니다...!

이런 모양의 뷰는 자주 보셧을거라 생각합니다. 이러한 뷰를 만들 수 잇는 몇가지의 방법입니다.

1. XML을 이용한 방법

가장 흔하게 쓰는 방법 중 하나로 단순한 모양(사각형,원)등을 만드는데 좋고 한번 생성해놓으면 여러뷰에서 쓸 수 잇는 장점이 잇습니다.

저는 회색 배경에 흰색 바탕색상을 가지고 둥근 모서리를 가진 xml을 만들어보겠습니다.

res/drawable/gray_white_corner

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

    <solid android:color="@color/white"/> <!--배경색-->

    <stroke
        android:width="1dp"
        android:color="#e3e3e3"/>  <!--선 색-->

    <corners
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp"
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"/> <!--선 휘는 각도-->
</shape>

주석을 보시면 3가지의 속성이 존재합니다.
배경색, 선의 색, 선이 휘는 각도 3가지를 잘 조절해서 원하시는 뷰의 모양을 만듭니다.

   <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/cancel_button"
            android:layout_width="136dp"
            android:layout_height="48dp"
            android:layout_weight="1"
            android:backgroundTint="#ececec"
            android:layout_marginLeft="20dp"
            android:background="@drawable/gray_white_corner"  <-- background 속성에 자신이 만든 xml파일을 적용
            android:backgroundTint="#14c2a3" <-- 배경색 변경
            android:textColor="#363636"
            android:textSize="14sp"
            android:text="닫기"/>

이렇게 background 속성에 자신이 만들어놓은 xml을 적용하면 됩니다.

저도 이방법을 가장 많이 사용하는거 같습니다. 하나의 공통 xml을 만들어놓으면 여러가지 뷰에서 적용할 수 있어 편리합니다.
하지만 코드로 백그라운드의 색상을 변경하거나 하는 경우 backgroudTint가 변경되는 것이 아닌 background 속성이 변경되 둥근 테두리가 적용이 안되는 경우가 있습니다. -> 4번 방법 확인!!!

2. Layer-list를 사용한 복합적인 배경

layer-list는 여러 개의 아이템을 쌓아서 복합적인 배경을 만드는 데 사용됩니다. 각 아이템이 순차적으로 쌓이게 되며, 가장 먼저 정의된 아이템이 맨 아래에 위치하게 됩니다.

예를 들어, 버튼에 내부에 흰색 배경과 그 주변에 녹색 테두리를 원한다면 다음과 같이 작성할 수 있습니다

res/drawable/button_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 첫 번째 레이어: 전체적인 녹색 테두리 -->
    <item>
        <shape>
            <solid android:color="#4CAF50"/>  <!-- 녹색 배경 -->
        </shape>
    </item>
    
    <!-- 두 번째 레이어: 흰색 배경. 테두리만큼의 여백을 주어 녹색 테두리가 보이게 합니다. -->
    <item android:right="2dp" android:top="2dp" android:left="2dp" android:bottom="2dp">
        <shape>
            <solid android:color="#FFFFFF"/>  <!-- 흰색 배경 -->
        </shape>
    </item>
</layer-list>

적용 방법

<Button
    android:background="@drawable/button_background"  <!-- layer-list 배경 적용 -->
    ... />

background 속성에 적용해주면 됩니다.

3. State List Drawable

뷰의 상태에 따라 다양한 배경을 보여줄 수 있게 해주는 Drawble입니다.
주로 버튼이나 이미지 뷰 등에서 사용자 상호작용에 따라 그래픽을 변경할 때 사용됩니다.

예를 들어, 버튼을 눌렀을 때와 누르지 않았을 때의 배경색을 다르게 표시하려면 State List Drawable을 사용할 수 있습니다.

button_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 버튼이 눌렸을 때의 배경색 -->
    <item android:drawable="@color/colorPressed" android:state_pressed="true" />

    <!-- 버튼에 포커스가 있을 때의 배경색 -->
    <item android:drawable="@color/colorFocused" android:state_focused="true" />

    <!-- 버튼의 기본 배경색 -->
    <item android:drawable="@color/colorDefault" />
</selector>

state List Drawable의 주요 상태 목록

android:state_pressed: 뷰가 눌렸을 때
android:state_focused: 뷰에 포커스가 있을 때
android:state_checked: 체크박스나 라디오 버튼 같은 뷰가 체크되었을 때
android:state_selected: 뷰가 선택되었을 때
android:state_activated: 뷰가 활성화 되었을 때 (주로 리스트 뷰에서 사용)
android:state_enabled: 뷰가 활성화 되어 있을 때 (비활성화된 상태에서는 이 상태가 false입니다)

적용 방법

<Button
    android:background="@drawable/button_background"
    ... />

다른 배경 적용방식과 동일하게 원하는 뷰의 background 속성에 적용해주면 됩니다.

4. 코드를 이용한 방법

xml에서 적용 방식의 한계점을 극복할 수 있는 방법입니다.

		 //둥근 모서리와 인자값으로 전달 받은 색상값 적용하기 위해 GradientDrawable사용
 
   GradientDrawable gradientDrawable = new GradientDrawable();
   gradientDrawable.setShape(GradientDrawable.RECTANGLE); //둥근 모서리
   int color = Color.parseColor(item.getColor());
   gradientDrawable.setColor(color); // 원하는 색상
   gradientDrawable.setCornerRadius(12); //휘는 각도
   popupItem.setBackground(gradientDrawable); //적용

위 코드의 경우 데이터로 전달받은 속성을 리사이클러뷰의 아이템에 적용하기 위해 onBind에 작성햇던 코드입니다.

이 방법을 이용하면 뷰에 둥근 모서리와 전달받은 색상을 적용이 가능합니다.
프로젝트를 하다보면 멀티뷰 리사이클러뷰와 같이 하나의 리사이클러뷰에 여러개의 아이템이 들어갈 때가 잇는대 뷰 마다 백그라운드 속성이 다를 때 사용하면 좋은 것 같습니다.

---

프로젝트를 진행하다보면 코드를 작성하는 것 만큼 xml을 구성하는게 어려울 때가 잇는것 같습니다.
가장 좋은 방법은 몸으로 익히는거라 생각이 들기 때문에 자주 자주 만들어 봐야할 것 같습니다...!