android android-layout gridview android-linearlayout cardview

Not showing components following format LinearLayout inside GridLayout contains CardView in LinearLayout

I am implementing card view through GridLayout in android but my card view is not showing up. I want to display main layout is Liner Layout inside Grid Layout its contain Card View . I have tried all things but the card view is not showing up.

activity_main.xml

<?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="@drawable/bgapps"
    tools:context=".MainActivity">
     <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:alignmentMode="alignMargins"
        android:columnCount="2"
        android:columnOrderPreserved="false"
        android:rowCount="3">
        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:layout_margin="12dp"
            app:cardCornerRadius="12dp"
            app:cardElevation="6dp">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="vertical"
                android:padding="16dp">
                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:src="@drawable/bookmark" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="12dp"
                    android:text="Calendar"
                    android:textColor="#6f6f6f"
                    android:textSize="14dp" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>
    </GridLayout>
   </LinearLayout>
</ScrollView>

÷ hope any one fix this problem.

Solution

Make the height of the ScrollView as wrap_content as its height is determined at runtime. and also the same for its nested LinearLayout

To make the ImageView & TextView visible use android:gravity="center_vertical" for their surrounding LinearLayout

so change your layout to be:

<?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="wrap_content"
    android:background="@drawable/bgapps"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <GridLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:alignmentMode="alignMargins"
            android:columnCount="2"
            android:columnOrderPreserved="false"
            android:rowCount="3">

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_rowWeight="1"
                android:layout_columnWeight="1"
                android:layout_margin="12dp"
                app:cardCornerRadius="12dp"
                app:cardElevation="6dp">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:gravity="center_vertical"
                    android:orientation="vertical"
                    android:padding="16dp">

                    <ImageView
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:src="@drawable/bookmark" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="12dp"
                        android:text="Calendar"
                        android:textColor="#6f6f6f"
                        android:textSize="14dp" />
                </LinearLayout>
            </androidx.cardview.widget.CardView>
        </GridLayout>
    </LinearLayout>
</ScrollView>

Edit: Anyone explain why its not showing my GridLayout width as match_parent

I want this :

Solution:

Changes:

Making Gridlayout width to match_parent
Adding android:layout_gravity="center" to the Gridlayout
Making the width & height of all CardViews and underlying LinearLayouts to "wrap_content" >>>>>> This is the real cause to the problem.
Making android:gravity="center" to the CardViews underlying LinearLayout for symmetric purpose >> you can leave it as center_vertical if you wish.

<?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="wrap_content"
    android:background="@drawable/bgapps"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="15dp">

        <GridLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:alignmentMode="alignMargins"
            android:columnCount="2"
            android:columnOrderPreserved="false"
        android:padding="50dp"
            android:rowCount="2">
            <!--            First Row , First Column -->
            <androidx.cardview.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_rowWeight="1"
                android:layout_columnWeight="1"
                android:layout_margin="12dp"

                app:cardCornerRadius="12dp"
                app:cardElevation="6dp">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:padding="16dp">

                    <ImageView
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:src="@drawable/bookmark" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="12dp"
                        android:text="Calendar"
                        android:textColor="#6f6f6f"
                        android:textSize="14dp" />
                </LinearLayout>
            </androidx.cardview.widget.CardView>
            <!--            First Row , Second Column-->
            <androidx.cardview.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_rowWeight="1"
                android:layout_columnWeight="1"
                android:layout_margin="12dp"
                app:cardCornerRadius="12dp"
                app:cardElevation="6dp">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:padding="16dp">

                    <ImageView
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:src="@drawable/bookmark" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="12dp"
                        android:text="Calendar"
                        android:textColor="#6f6f6f"
                        android:textSize="14dp" />
                </LinearLayout>
            </androidx.cardview.widget.CardView>
            <!--            Second Row , First Column-->
            <androidx.cardview.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_rowWeight="1"
                android:layout_columnWeight="1"
                android:layout_margin="12dp"
                app:cardCornerRadius="12dp"
                app:cardElevation="6dp">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:padding="16dp">

                    <ImageView
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:src="@drawable/bookmark" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="12dp"
                        android:text="Calendar"
                        android:textColor="#6f6f6f"
                        android:textSize="14dp" />
                </LinearLayout>
            </androidx.cardview.widget.CardView>
            <!--            Second Row , Second Column-->
            <androidx.cardview.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_rowWeight="1"
                android:layout_columnWeight="1"
                android:layout_margin="12dp"
                app:cardCornerRadius="12dp"
                app:cardElevation="6dp">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:padding="16dp">

                    <ImageView
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:src="@drawable/bookmark" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="12dp"
                        android:text="Calendar"
                        android:textColor="#6f6f6f"
                        android:textSize="14dp" />
                </LinearLayout>
            </androidx.cardview.widget.CardView>
        </GridLayout>

    </LinearLayout>

</ScrollView>