티스토리 뷰

반응형

스마트 디바이스을 통해 웹과 앱에서 다양한 컨텐츠(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>
view raw gistfile1.txt hosted with ❤ by GitHub


생성한 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을 만드는데 도움이 되길 바랍니다.

반응형
질문 또는 잘못된 정보는 댓글로 남겨주세요.
댓글