[안드로이드/Radius] 레이아웃 둥글게 만들기

 

 

안드로이드 스튜디오에서 디자인을 할 때 내가 사용할 이미지 또는 TextView등 원하는 모양으로 바꾸고 싶으실 겁니다.

그래서 간단하게 예제를 들고 왔습니다.

필요하실때 수정해서 쓰세요!.

 

Radius 만들기

res -> drawable 우클릭 -> New -> Drawable Resource File 클릭

 

위 과정을 하시면 밑에 창이 뜰 겁니다. 그럼 밑에 사항만 변경해 줍니다.

 

File name: 원하는 이름

Root element: shape

 

이렇게 설정하고 OK 클릭

 

OK 클릭했으면 아래 코드 복사 붙여 넣기 

 

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding = "10dp">
    <solid
        android:color="#ffffff">
    </solid>
    <corners
        android:bottomLeftRadius="45dp"
        android:bottomRightRadius="45dp"
        android:topLeftRadius="45dp"
        android:topRightRadius="45dp">
    </corners>
    <stroke
        android:width="2dp"
        android:color="#BDBDBD">
    </stroke>
</shape>

 

위 코드 설명을 볼려면?  [ 밑에 더보기+ 클릭 ]

<shape> = 도형 드로어블로 이 요소는 무조건 루트 요소여야 합니다.

 

android:padding = 뷰 요소에 적용할 패딩으로, 도형이 아닌 뷰 콘텐츠의 위치가 패딩이 됩니다.

 

android:shape = 도형의 유형(모양)을 변경할 수 있습니다.

"rectangle" = 직사각형

 

<solid> = 도형을 채울 단색 입니다. 이 안에다가 색깔을 지정합니다

android:color = #ffffff

 

<corners> = 도형의 각 모서리를 둥글게 해줍니다. shape가 rectangle인 경우에만 사용 가능합니다.

android:bottomLeftRadius = 왼쪽 하단 모서리 조절

android:bottomRightRadius = 오른쪽 하단 모서리 조절

android:topLeftRadius = 왼쪽 상단 모서리 조절

android:topRightRadius = 오른쪽 상단 모서리 조절

 

<stroke> = 도형의 테두리에 대한 설정 값을 변경할 수 있습니다.

android:width = 테두리에 대한 선의 두께, 크기 값을 정할 수 있습니다.

android:color = #BDBDBD

 

 

 

그다음 activity_main.xml에 아래 코드 복사 붙여 넣기

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/radius"
        android:padding="10dp"
        android:text="Radius Sample"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

background를 통해 만들어둔 radius를 불러오고

 

padding으로 텍스트 크기에 맞게 크기를 늘려줬습니다.

 

 

Radius 코드 적용 전 / 후

 

 

변경 전 코드는 background와 padding을 제거했고 나머지 코드는 똑같습니다!

 

관련 속성은 아래링크를 참고하세요!

https://developer.android.com/guide/topics/resources/drawable-resource?hl=ko#Shape

드로어블 리소스  |  Android 개발자  |  Android Developers