[안드로이드] 그리드레이아웃(GridLayout) 카드뷰(CardView) 디자인 꾸미는 방법

이번 시간에는 그리드 레이아웃(GridLayout)과

카드뷰(CardView)를 사용해서 대시보드 느낌의

디자인을 쉽게 만들어 보겠습니다.

---

목차

1. 실행 화면

2. 메인 화면 구성 activity_main.xml

---

1. 실행 화면

 

2. 메인 화면 구성 activity_main.xml

 - 설명 - 

1. 3행 2열의 그리드 레이아웃(GridLayout)

2. 그리드 레이아웃(GridLayout) 안에 카드뷰(CardView)

3. 카드뷰(CardView) 안에 이미지 뷰(ImageView)와 텍스트뷰(TextView)

- 속성 -

 그리드 레이아웃(GridLayout)

 columnCount: 열 개수

 rowCount: 행 개수

카드뷰(CardView)

layout_row: 행 위치

layout_column: 열 위치

layout_gravity= fiill: 부모 크기만큼 가로/세로 늘려서 맞춤

layout_margin: 간격 크기

cardCornerRadius: 모서리 라운딩 값

cardElevation: 음영처리 값

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/blue_100"
    tools:context=".MainActivity">
    
    <!-- 타이틀 -->
    <TextView
        android:id="@+id/title_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="15dp"
        android:text="CARD VIEW DESIGN"
        android:textSize="30sp"
        android:textStyle="bold" />

    <!-- 3행 2열-->
    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/title_view"
        android:layout_margin="20dp"
        android:columnCount="2"
        android:rowCount="3">

        <!-- 원숭이 -->
        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_rowWeight="1"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_margin="8dp"
            android:backgroundTint="@color/blue_500"
            app:cardCornerRadius="8dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/monkey" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="MONKEY"
                    android:textAlignment="center"
                    android:textColor="@color/white"
                    android:textStyle="bold" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <!-- 쥐 -->
        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_rowWeight="1"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_margin="8dp"
            android:backgroundTint="@color/blue_500"
            app:cardCornerRadius="8dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/mouse" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="MOUSE"
                    android:textAlignment="center"
                    android:textColor="@color/white"
                    android:textStyle="bold" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <!-- 사자 -->
        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_rowWeight="1"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_margin="8dp"
            android:backgroundTint="@color/blue_500"
            app:cardCornerRadius="8dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/lion" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="LION"
                    android:textAlignment="center"
                    android:textColor="@color/white"
                    android:textStyle="bold" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <!-- 토끼 -->
        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_rowWeight="1"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_margin="8dp"
            android:backgroundTint="@color/blue_500"
            app:cardCornerRadius="8dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/rabbit" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="RABBIT"
                    android:textAlignment="center"
                    android:textColor="@color/white"
                    android:textStyle="bold" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <!-- 코끼리 -->
        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_rowWeight="1"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_margin="8dp"
            android:backgroundTint="@color/blue_500"
            app:cardCornerRadius="8dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/elephant" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="ELEPHANT"
                    android:textAlignment="center"
                    android:textColor="@color/white"
                    android:textStyle="bold" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <!-- 개 -->
        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_rowWeight="1"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:layout_margin="8dp"
            android:backgroundTint="@color/blue_500"
            app:cardCornerRadius="8dp"
            app:cardElevation="8dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/dog" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="DOG"
                    android:textAlignment="center"
                    android:textColor="@color/white"
                    android:textStyle="bold" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>
    </GridLayout>

</RelativeLayout>

 아이콘

dog.png

0.00MB

elephant.png

0.00MB

lion.png

0.00MB

monkey.png

0.00MB

mouse.png

0.00MB

rabbit.png

0.00MB

색상

res -> values -> colors.xml

<color name="blue_100">#BBDEFB</color>
<color name="blue_500">#2196F3</color>
<color name="white">#FFFFFFFF</color>

 

2022.02.23 - [안드로이드] - [안드로이드] 원형 메뉴(CircleMenu) 쉽게 만드는 방법

[안드로이드] 원형메뉴(CircleMenu) 쉽게 만드는 방법

2022.02.22 - [안드로이드] - [안드로이드] NavigationDrawer 쉽게 꾸미는 방법

[안드로이드] NavigationDrawer 쉽게 꾸미는 방법

2022.02.21 - [안드로이드] - [안드로이드] 선택자(Selector) 체크(checked) 체크박스(checkBox) 쉽게 활성화/비활성화하는 방법 drawable.xml

[안드로이드] 선택자(Selector) 체크(checked) 체크박스(checkBox) 쉽게 활성화/비활성화 하는 방법 drawabl