모서리가 둥근 ImageView, Button, TextView 만들기

 

모서리가 둥근 버튼, 텍스트뷰, 이미지뷰(맨 아래)

뷰의 모서리를 둥그렇게 만드는 방법 2가지는

1. 둥그런 효과를 주는 xml을 만들어 뷰의 background 속성에 넣는다.

2. CardView를 사용한다.

 

버튼이랑, 텍스트 뷰의 경우 1번으로도 충분히 위 이미지 같이 모서리가 둥그래진다.

하지만 이미지 뷰의 경우 메인 이미지 때문에 백그라운드 속성이 적용이 안돼 모서리가 직각으로 나온다.

그래서 이미지뷰의 경우 카드뷰를 사용해 둥그런 효과를 준다.

 

1. 둥그런 효과를 주는 xml을 만들어 뷰의 background 속성에 넣는다. (버튼, 텍스트뷰)

- activity_main.xml

<TextView
        android:id="@+id/text"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView"
        android:background="@drawable/round"
        android:gravity="center"
        android:textColor="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

<Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="160dp"
        android:background="@drawable/round"
        android:text="Button"
        android:textColor="#FFFFFF"
        app:layout_constraintBottom_toTopOf="@+id/text"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.835" />

 

- round.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#0f40DB"/>
    <corners
        android:topLeftRadius="18dp"
        android:topRightRadius="18dp"
        android:bottomLeftRadius="18dp"
        android:bottomRightRadius="18dp"/>
</shape>

Radius 속성을 통해 원하는 모서리만 둥그렇게 만들 수 있다.

 

2. CardView를 사용한다.

implementation 'com.android.support:design:29.0.0'

카드뷰 사용을 위해 Gradle에 디자인 서포트 라이브러리를 추가합니다.

 

- activity_main.xml

<androidx.cardview.widget.CardView
        android:id="@+id/cardBackgroundView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="156dp"
        android:layout_marginTop="44dp"
        app:cardCornerRadius="25dp"
        app:cardElevation="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text">

	<ImageView
          android:id="@+id/imageView"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@drawable/round"
          android:src="@drawable/ic_launcher_background" />
</androidx.cardview.widget.CardView>

이미지 뷰를 다음과 같이 카드뷰 안에 배치를 시킵니다.

카드뷰의 app:cardCornerRadius 속성으로 둥그런 정도를 나타냅니다.

 

app:cardElevation="0dp" 값을 통해 붕 뜨지 않는 이미지를 만든다고 하내요..

 

참고 

가장 쉽게 이미지에 rounded corner 처리하기(with CardView)

https://2-pa.tistory.com/31