본문 바로가기

Android/UI

[안드로이드] (둥근/사각) 테두리 있는 ImageView 간단히 만들기

728x90
반응형

 

 

안드로이드에서 이미지를 테두리안에 집어넣고 싶을 때가 있는데요.

구현해 보았습니다.

 

먼저 drawable폴더에 (둥근 테두리)round_backgroud_border_black 혹은

(사각 테두리)square_background_border_black 파일을 추가하겠습니다.

하얀 바탕에 검은색 테두리로 하였습니다.

 

  • 둥근 테두리
<?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" />
    <corners
        android:radius="10dp"/>
    <stroke
        android:width="1dp"
        android:color="@color/black" />
</shape>

 

  • 사각 테두리
<?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" />
    <corners
        android:radius="0dp"/>
    <stroke
        android:width="1dp"
        android:color="@color/black" />
</shape>

 

파일을 만들었으면, 이미지뷰를 수정합니다.

 

  • 사각 테두리

사각테두리의 경우 ImageView layout에 background 설정을하고, padding을 약간 집어넣어주면 됩니다.

   <ImageView
        android:background="@drawable/square_background_border_black"
        android:padding="2dp"
        android:scaleType="centerCrop"
        android:layout_margin="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"/>

 

  • 둥근 테두리

ImageView.setClipToOutline(true) 를 이용합니다.

setClipToOutline을 이용하면 이미지를 배경에 맞게 자를 수 있습니다.

다만, 테두리가 보이지 않으므로 같은 background를 가지는 레이아웃으로 감싸고 패딩을 주었습니다.

    <LinearLayout
        android:background="@drawable/round_background_border_black"
        android:id="@+id/layout_img_border"
        android:padding="1dp"
        android:layout_margin="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:background="@drawable/round_background_border_black"
            android:scaleType="centerCrop"
            android:id="@+id/img_part_dialog"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/tmp" />
    </LinearLayout>

 

val partImg: ImageView = findViewById(R.id.img_part_dialog)
partImg.clipToOutline = true

 

 

둥근 테두리를 간단히 만드는 방법에대해 고민하였는데 성공적으로 되었습니다 ^^ 굿!

 

 

 

728x90
반응형