CardView

 

CardView는 아래와 같이 곡선 테두리와 그림자(음영)를 표시할 수 있는 형태의 레이아웃입니다.

 

종속성

CardView는 v7 Support library에 포함된 위젯으로

CardView를 사용하기 위해서는 Bundle.gradle(Module: app)에 다음과 같은 종속성을 추가해 주어야 합니다.

dependencies {
...
implementation 'com.android.support:cardview-v7:28.0.0'

...
}

 

CardView 속성

app:cardBackgroundColor - CardView의 배경색 지정

 

app:cardCornerRadius - 코너 radius 지정

 

app:cardElevation

- 음영 elevation 지정, elevation값이 클수록 음영을 표시하기 위한 공간이 더 필요하다.

app:cardMaxElevation

- 음영표시 영역 max값 지정이라고 되어 있는데, 왜 적용이 안되지?

 

app:contentPadding - CardView 패딩 지정

 

app:cardUseCompatPadding="true"

- 음영이 표시될 자동으로 확보 합니다. cardElevation 값이 클 수록 공간이 많이 확보됩니다.

 

app:cardPreventCornerOverlap - ?

 

 

그림자(음영) 표시

그림자(음영)이 표시되기 위해서는 CardView 주변으로 추가적인 공간이 필요합니다.

그림자가 표시될 영역을 확보할 수 있는 방법은 다음의 세가지 방법이 있습니다.

 

1. cardUseCompatPadding 속성을 통해 지정

app:cardUseCompatPadding="true"로 설정하여 음영을 그릴 공간을 자동으로 확보하도록 설정 합니다.

다만 이경우, cardElevation값이 클 수로 생각보다 많은 공간이 확보되어 CardView 영역이 작아 집니다. 

app:cardElevation="40dp"으로 설정한 모습입니다.

아래의 두가지 방법을 통해 고정된 공간을 확보할 수는 있으나, 반대로 음영을 표시할 공각이 부족하면

연결부분이 약간 부자연 스럽게 표시될수 있습니다.

 

2. 상위 layout의 padding을 통해 지정

상위 layout에 padding을 지정하고, clip 속성을 false로 지정해야 합니다.

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"
    android:clipChildren="false"
    android:clipToPadding="false"
    android:orientation="vertical"
    android:padding="8dp">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cardBackgroundColor="#ff0000ff"
        app:cardCornerRadius="10dp"
        app:cardElevation="5dp"
        app:cardPreventCornerOverlap="false"
        app:contentPadding="0dp">

 

3. CardView에 layout_marging을 지정합니다.

<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardBackgroundColor="#ff0000ff"
app:cardCornerRadius="10dp"
app:cardElevation="5dp"
app:cardPreventCornerOverlap="false"
app:contentPadding="0dp"
android:layout_margin="8dp">

 

기타 속성

[parent layout]

android:clipChildren"
android:clipToPadding

 

참고URL

https://developer.android.com/guide/topics/ui/layout/cardview

https://stackoverflow.com/questions/41615468/how-to-add-shadow-on-cardview-aligned-to-bottom-of-parent/46374054

http://devstory.ibksplatform.com/2018/05/android-cardview.html

+ Recent posts