[Android] ImageView에 테두리(border line) 넣기

ImageView는 기본적으로 src 속성에 지정된 이미지만을 뷰로 표시한다. 그렇기 때문에 아래와 같이 일부 색상이 흰색인 이미지를 출력하면 이미지 경계를 파악하기 어렵게 된다. 이미지에 테두리 효과를 줘서 경계를 한눈에 알아보도록 해보자. 테두리 효과를 준다고는 했지만, 실제로 ImageView에 isBorderLine=true과 같은 편리한 속성은 존재하지 않기 때문에 인위적으로 '테두리가 그려진 drawable 리소스'를 background로 지정하는 방법을 사용해야 한다.

사각 테두리

1. drawable 디렉터리에 XML 파일 작성 (square_backgroud_border_black.xml)

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

 

2. ImageView의 background 속성을 설정하고, <stroke> 너비 만큼의 padding을 준다. (activity_main.xml)

<ImageView
    android:id="@+id/imageView"
    android:background="@drawable/square_background_border_black"
    android:padding="1dp"
    android:scaleType="centerCrop"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:layout_gravity="center"
    android:contentDescription="Quiz Image"
    tools:src="@drawable/ic_flag_of_finland"
    />

*background 속성은 말그대로 배경을 지정하는 것인데, 이미지의 width, height 속성이 ‘wrap_content’일 경우 이미지 크기대로 View 크기가 정해진다. 이러면 src에 지정한 이미지 파일이 전체 영역을 다 차지하기 때문에 배경에 그려져 있는 1dp 테두리가 가려지게 된다. 테두리를 보이게 하기 위해서 padding 속성을 1dp만큼 지정하자.

 

둥근 테두리

1. drawable 디렉터리에 XML 파일 작성 (round_backgroud_border_black.xml)

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

 

2. 메인 코드에서 ImageView.setClipToOutline(true) 를 사용한다. (MainActivity.kt)

• setClipToOutline : 이미지를 배경에 맞게 자른다.

binding.imageView.clipToOutline = true

 

3. 다만 이렇게 하면 테두리가 보이지 않기 때문에, 같은 background를 가지는 레이아웃으로 감싸고 padding을 넣어준다. (activity_main.xml)

<LinearLayout
    android:id="@+id/imageBorder"
    android:background="@drawable/round_background_border_black"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:padding="1dp"
    android:layout_margin="10dp">

    <ImageView
        android:id="@+id/imageView"
        android:background="@drawable/round_background_border_black"
        android:scaleType="centerCrop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_flag_of_argentina" />
</LinearLayout>​