[Android] 카드뷰(CardView) 레이아웃 사용 속성 및 예시

안드로이드 레이아웃 중에 CardView가 있습니다. 카드뷰(CardView)는 포커 게임을 할 때 사용하는 카드를 생각하면 이해가 빠릅니다. 카드의 코너 4군데의 코너를 라운드 처리하며, 그림자(음영)을 쉽게 표현할 수 있는 레이아웃입니다. 보통 리사이클러뷰(RecyclerView)의 아이템을 표시하는 용도로 많이 사용되고 있습니다. 

■card_view 속성

card_view:cardElevation 값을 크게 지정할수록 그림자(음영)을 표시하기위해 하단영역의 공간이 필요합니다.

그래서 보통 카드뷰 레이아웃의 layout_marginBottom 값을 10dp로 주었다면, cardElevation값은 5dp를 주면 적당합니다.

간격을 늘려서 테스트해보시면 아 이런거구나 하는 감이 옵니다.

또 다른 방법으로는 card_view:cardUseCompatPadding=”true”로 설정을 합니다.

그럼 별도의 layout_marginBottom값을 지정할 필요가 없습니다. card_view:cardElevation값을 크게 하면 할수록 카드뷰의 크기는 작아집니다. 그림자를 표시해야하는 공간을 확보하기 때문입니다.

카드뷰 레이아웃 샘플 코드는 아래와 같습니다.

[item_container.xml]

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_marginBottom="10dp"
    card_view:cardCornerRadius="10dp"
    card_view:contentPadding="10dp"
    card_view:cardElevation="5dp">

    <LinearLayout
        android:id="@+id/intromainLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal">
        <LinearLayout
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:gravity="center"
            android:orientation="horizontal">
            <TextView
                android:id="@+id/pyeong_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAlignment="center"
                android:textStyle="bold"
                android:gravity="center"
                android:textColor="@color/colorContent"
                android:text=""
                android:textSize="20sp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAlignment="center"
                    android:textStyle="bold"
                    android:gravity="center"
                    android:textColor="@color/colorContent"
                    android:text="IU"
                    android:textSize="20sp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:gravity="center"
            android:orientation="horizontal">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_marginLeft="5dp"
                android:gravity="center|left"
                android:orientation="vertical">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">
                    <TextView
                        android:id="@+id/squareMeter_text"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textAlignment="center"
                        android:textColor="@color/colorContent"
                        android:gravity="center"
                        android:layout_marginLeft="5dp"
                        android:text="#"
                        android:textSize="18sp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textAlignment="center"
                        android:textColor="@color/colorContentForB"
                        android:gravity="center"
                        android:layout_marginLeft="5dp"
                        android:text="오늘은 금요일입니다."
                        android:textSize="15sp"/>
                </LinearLayout>
                 
            </LinearLayout>
        </LinearLayout>



    </LinearLayout>

</androidx.cardview.widget.CardView>

■종속성 추가 

레이아웃 구성시 오류가 발생한다면 아래 라이브러리를 build.gradle에 추가합니다. 

dependencies {
        implementation “androidx.cardview:cardview:1.0.0”
}
   

[build.gradle(:app)] 

apply plugin: 'com.android.application'

android {
    compileSdkVersion 29

    defaultConfig {
        applicationId "com.test.sample"
        minSdkVersion 23
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'com.google.android.material:material:1.2.1'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    implementation 'androidx.navigation:navigation-fragment:2.3.1'
    implementation 'androidx.navigation:navigation-ui:2.3.1'

    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

}

[REFERENCE]

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

[연관 글 더 보기]

[프로그래밍/Android] – 안드로이드 리사이클러뷰(RecyclerView)에 아이템 추가 및 삭제하기

[프로그래밍/Android] – 안드로이드 Cursor를 사용하여 데이터 가져오기(AsyncTask 활용)

[프로그래밍/Android] – 안드로이드 리사이클러뷰(RecyclerView)를 사용하자. ListView는 버린다!!

[프로그래밍/Kotlin] – [android : kotlin] 코틀린 RecyclerView 사용방법 및 예제