티스토리 뷰
스마트 디바이스을 통해 웹과 앱에서 다양한 컨텐츠(Content)을 접하고 있습니다.
다양한 컨텐츠에서도 UI 가 Nice 한 컨텐츠에 더 눈이 가서 진입율도 높은 편입니다.
가장 많이 사용하는 디자인 중 하나는 Corner Round 처리라고 할 정도로 디자인에서 사용하고 있는데요.
이번 포스트에서는 Corner Round 하는 방법에 대해서 알아보겠습니다.
SHAPE 을 활용한 방법
Corner Round 하는 방법 중 하나는 shape 을 활용하는 방법입니다.
Shape 는 xml을 통하여 만들 수 있으며 아래와 같이 <shape/> 안에 <corners/> 을 두어 Corner에 Radius을 설정할 수 있습니다.
<?xml version="1.0" encoding="utf-8"?> | |
<shape xmlns:android="http://schemas.android.com/apk/res/android"> | |
<solid android:color="@android:color/transparent" /> | |
<stroke | |
android:width="1dp" | |
android:color="@color/color1_1_a60" /> | |
<corners android:radius="3dp" /> | |
</shape> |
생성한 Shape을 Layout Background 로 설정하여 Corner Round View을 설정할 수 있습니다.
<?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"> | |
<LinearLayout | |
android:layout_width="match_parent" | |
android:layout_height="100dp" | |
android:layout_marginLeft="50dp" | |
android:layout_marginRight="50dp" | |
android:background="@drawable/view_card" | |
android:gravity="center" | |
android:padding="10dp" | |
app:layout_constraintBottom_toBottomOf="parent" | |
app:layout_constraintLeft_toLeftOf="parent" | |
app:layout_constraintRight_toRightOf="parent" | |
app:layout_constraintTop_toTopOf="parent"> | |
<TextView | |
android:layout_width="wrap_content" | |
android:layout_height="wrap_content" | |
android:text="Hello KYU" /> | |
</LinearLayout> | |
</androidx.constraintlayout.widget.ConstraintLayout> |

CARD VIEW 을 활용한 방법
Corner Round 하는 방법 중 다른 하나는 CARD VIEW을 활용하는 방법입니다.
Android CardView 를 활용하면 쉽게 Round 처리를 할 수 있습니다.
<androidx.cardview.widget.CardView | |
android:id="@+id/image_layout" | |
android:layout_width="wrap_content" | |
android:layout_height="wrap_content" | |
app:cardCornerRadius="4dp"> | |
<RelativeLayout | |
android:layout_width="match_parent" | |
android:layout_height="match_parent"> | |
<!-- todo --> | |
</RelativeLayout> | |
</androidx.cardview.widget.CardView> |
AndroidX 에서 제공하는 CardView을 활용하면 쉽게 Round View을 할 수 있으나 stoke 을 설정하는 것은 어려움이 있습니다.
Material 에서 제공하는 MaterialCardView 을 활용하면 stoke width와 color를 설정할 수 있습니다.
implementtion 'com.google.android.material:material:1.0.0'
<?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"> | |
<com.google.android.material.card.MaterialCardView | |
android:layout_width="match_parent" | |
android:layout_height="100dp" | |
android:layout_marginLeft="50dp" | |
android:layout_marginRight="50dp" | |
app:cardCornerRadius="10dp" | |
app:cardElevation="0dp" | |
app:layout_constraintBottom_toBottomOf="parent" | |
app:layout_constraintLeft_toLeftOf="parent" | |
app:layout_constraintRight_toRightOf="parent" | |
app:layout_constraintTop_toTopOf="parent" | |
app:strokeColor="@android:color/holo_red_dark" | |
app:strokeWidth="1dp"> | |
<TextView | |
android:layout_width="match_parent" | |
android:layout_height="match_parent" | |
android:background="@android:color/holo_blue_bright" | |
android:gravity="center" | |
android:text="Hello KYU" /> | |
</com.google.android.material.card.MaterialCardView> | |
</androidx.constraintlayout.widget.ConstraintLayout> |

마무리
RoundView 처리하는 2가지 방법 공유하였습니다.
Shape, CardView 외 다양한 방법으로 Corner View 를 설정할 수 있습니다.
원하는 UI을 만드는데 도움이 되길 바랍니다.
'프로그래밍 > Android' 카테고리의 다른 글
[이슈] sing WebView from more than one process at once with the same data directory... (2) | 2021.04.09 |
---|---|
왜 코틀린을 쓰는가? (0) | 2021.03.28 |
접근성(Voice Assistant) (0) | 2021.01.03 |
kapt 증분 빌드 에러 (0) | 2020.12.08 |
Stetho Library 를 사용해 보자 (0) | 2020.06.11 |
- IT
- 탁구
- 고시문헬퍼
- missionchina
- Android
- 알고리즘
- flutter
- IOS
- missioon
- view
- 임용고시
- 점수판
- 선교
- 미션차이나센터
- MCC
- 디자인패턴
- Android Studio
- java
- 고시문
- 스코어헬퍼
- 패턴
- RXjava
- issue
- DI
- swift
- push
- 코틀린
- Kotlin
- 안드로이드
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |