Cardview inside GridLayout in Android Studio

  • Post comments:0 Comments

In this tutorial, you will learn how to create a CardView inside a GridLayout.

We are showing image and text in GridLayout style cardview. It means we are using a GridLayout to display the component.

Using gridLayout with cardView you can easily place both photo and text.

CardView makes UI extremely awesome. Because cardView provides properties such as shadow, elevation, radius, and more that make the UI look even more beautiful.

Why does grid layout matter?

There are several advantages to using gridlayout. It’s especially easy to manage the number of column and row.
Now, let’s create GridLayout with Cardview in the Android Studio.

How to create cardview inside GridLayout in android?

Step 1:

Create a new project in Android.

Step 2:

Select an empty activity.

Step 3:

Modify activity_main.xml

The below code uses GridLayout along with a Card View.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
    android:background="#03A9F4"
    tools:context=".MainActivity">

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        android:alignmentMode="alignMargins"
        android:columnCount="2"
        android:columnOrderPreserved="true"
        android:padding="25dp"
        android:rowCount="5">

        <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"
            app:cardCornerRadius="8dp"
            app:cardElevation="4dp"
            app:cardPreventCornerOverlap="false"
            app:cardUseCompatPadding="true">

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

                <ImageView
                    android:id="@+id/img1"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    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"
            app:cardCornerRadius="8dp"
            app:cardElevation="4dp"
            app:cardUseCompatPadding="true">

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

                <ImageView
                    android:id="@+id/img2"
                    android:layout_width="120dp"
                    android:layout_height="116dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    android:textStyle="bold" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/findperscore"
            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"
            app:cardCornerRadius="8dp"
            app:cardElevation="4dp"
            app:cardPreventCornerOverlap="false"
            app:cardUseCompatPadding="true">

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

                <ImageView
                    android:id="@+id/img3"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    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"
            app:cardCornerRadius="8dp"
            app:cardElevation="4dp"
            app:cardPreventCornerOverlap="false"
            app:cardUseCompatPadding="true">

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

                <ImageView
                    android:id="@+id/img4"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    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"
            app:cardCornerRadius="8dp"
            app:cardElevation="4dp"
            app:cardPreventCornerOverlap="false"
            app:cardUseCompatPadding="true">

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

                <ImageView
                    android:id="@+id/img5"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    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"
            app:cardCornerRadius="8dp"
            app:cardElevation="4dp"
            app:cardPreventCornerOverlap="false"
            app:cardUseCompatPadding="true">

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

                <ImageView
                    android:id="@+id/img"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    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="3"
            android:layout_rowWeight="1"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            app:cardCornerRadius="8dp"
            app:cardElevation="4dp"
            app:cardPreventCornerOverlap="false"
            app:cardUseCompatPadding="true">

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

                <ImageView
                    android:id="@+id/img6"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    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="3"
            android:layout_rowWeight="1"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            app:cardCornerRadius="8dp"
            app:cardElevation="4dp"
            app:cardPreventCornerOverlap="false"
            app:cardUseCompatPadding="true">

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

                <ImageView
                    android:id="@+id/img7"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    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="4"
            android:layout_rowWeight="1"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            app:cardCornerRadius="8dp"
            app:cardElevation="4dp"
            app:cardPreventCornerOverlap="false"
            app:cardUseCompatPadding="true">

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

                <ImageView
                    android:id="@+id/img8"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    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="4"
            android:layout_rowWeight="1"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            app:cardCornerRadius="8dp"
            app:cardElevation="4dp"
            app:cardPreventCornerOverlap="false"
            app:cardUseCompatPadding="true">

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

                <ImageView
                    android:id="@+id/img9"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    android:textStyle="bold" />
            </LinearLayout>

        </androidx.cardview.widget.CardView>

    </GridLayout>
</ScrollView>

In the above code, you can use the cardview widget in a gridlayout to set the image and text. The cardview will become more beautiful.

Cardview inside GridLayout in Android

Here in GridLayout took 2 columns and 5 rows because of row indices mustn’t exceed the row count. You can also specify the layout row and column in the cardview.

You can also change the background color and card view layout, as well as the grid layout, according to your requirements.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#D8CFCE"
    android:orientation="vertical"
    tools:context=".MainActivity">
<ScrollView
    android:layout_width="match_parent"
   android:layout_marginEnd="20dp"
    android:layout_marginStart="20dp"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:layout_height="wrap_content">
    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        android:alignmentMode="alignMargins"
        android:columnCount="2"
        android:columnOrderPreserved="true"
        android:rowCount="5">

        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="120dp"
            android:layout_row="0"
            android:layout_rowWeight="1"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            app:cardCornerRadius="5dp"
            android:padding="25dp"
              app:cardElevation="2dp"
            app:cardUseCompatPadding="true"
            app:cardPreventCornerOverlap="false">

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

                <ImageView
                    android:id="@+id/img1"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    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"
            app:cardUseCompatPadding="true"
            android:layout_rowWeight="1"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            app:cardCornerRadius="5dp"
              app:cardElevation="2dp"
            app:cardPreventCornerOverlap="false">

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

                <ImageView
                    android:id="@+id/img2"
                    android:layout_width="120dp"
                    android:layout_height="116dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    android:textStyle="bold" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/findperscore"
            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"
            app:cardCornerRadius="5dp"
              app:cardElevation="2dp"
            app:cardUseCompatPadding="true"
            app:cardPreventCornerOverlap="false"
           >

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

                <ImageView
                    android:id="@+id/img3"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    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"
            app:cardCornerRadius="5dp"
              app:cardElevation="2dp"
            app:cardUseCompatPadding="true"
            app:cardPreventCornerOverlap="false"
           >

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

                <ImageView
                    android:id="@+id/img4"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    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"
            app:cardCornerRadius="5dp"
              app:cardElevation="2dp"
            app:cardUseCompatPadding="true"
            app:cardPreventCornerOverlap="false"
           >

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

                <ImageView
                    android:id="@+id/img5"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    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"
            app:cardCornerRadius="5dp"
              app:cardElevation="2dp"
            app:cardUseCompatPadding="true"
            app:cardPreventCornerOverlap="false"
           >

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

                <ImageView
                    android:id="@+id/img"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    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="3"
            android:layout_rowWeight="1"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            app:cardCornerRadius="5dp"
              app:cardElevation="2dp"
            app:cardUseCompatPadding="true"
            app:cardPreventCornerOverlap="false"
           >

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

                <ImageView
                    android:id="@+id/img6"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    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="3"
            android:layout_rowWeight="1"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            app:cardCornerRadius="5dp"
              app:cardElevation="2dp"
            app:cardUseCompatPadding="true"
            app:cardPreventCornerOverlap="false"
           >

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

                <ImageView
                    android:id="@+id/img7"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    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="4"
            android:layout_rowWeight="1"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            app:cardCornerRadius="5dp"
              app:cardElevation="2dp"
            app:cardUseCompatPadding="true"
            app:cardPreventCornerOverlap="false"
           >

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

                <ImageView
                    android:id="@+id/img8"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    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="4"
            android:layout_rowWeight="1"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            app:cardCornerRadius="5dp"
              app:cardElevation="2dp"
            app:cardUseCompatPadding="true"
            app:cardPreventCornerOverlap="false"
           >

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

                <ImageView
                    android:id="@+id/img9"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:src="@drawable/ic_baseline_laptop_24" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF9800"
                    android:fontFamily="casual"
                    android:gravity="center"
                    android:padding="4dp"
                    android:text="text"
                    android:textColor="@color/white"
                    android:textSize="20dp"
                    android:textStyle="bold" />
            </LinearLayout>

        </androidx.cardview.widget.CardView>

    </GridLayout>
</ScrollView>
</RelativeLayout>

After changing gridlayout and cardview the UI will look like below.

Android UI gridLayout with cardLayout
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments