Android Studio: CardView grids +content not displaying correctly in portrait mode on Device

Question

I'm using androidx.cardview:cardview:1.0.0 on Android Studio 3.5.3. The design preview for my activity_main layout in Android Studio shows the layout perfectly

Yet, when I test it on my device(Huawei p30 lite), the design is all messed up in the portrait mode, with no content being shown at all too

When viewing the layout in landscape mode on my device , it shows the design perfectly, as shown in the Android Studio preview.

Here is my code in the layout:

    <ScrollView xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    tools:context=".MainActivity">

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="40dp"
            android:layout_marginRight="20dp">

            <ImageView
                android:id="@+id/logo"
                android:layout_centerHorizontal="true"

                android:layout_width="90dp"
                android:layout_height="90dp"
                android:src="@drawable/circle"
                />
        </RelativeLayout>

        <GridLayout
            android:id="@+id/fam"
            android:layout_marginTop="40dp"
            android:columnCount="2"
            android:rowCount="3"
            android:alignmentMode="alignMargins"
            android:columnOrderPreserved="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.cardview.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                app:cardElevation="60dp"
                app:cardCornerRadius="12dp"
                android:layout_margin="12dp"
                >
                <LinearLayout
                    android:orientation="vertical"
                    android:padding="16dp"
                    android:gravity="center"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <ImageView
                        android:src="@drawable/object"
                        android:layout_width="80dp"
                        android:layout_height="80dp">
                    </ImageView>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="12dp"
                        android:fontFamily="casual"
                        android:text="Object Detection"
                        android:textColor="#000000"
                        android:textSize="18sp">
                    </TextView>
                </LinearLayout>
                  </androidx.cardview.widget.CardView>

                  **repeat the above cardview for the remaining 5 cards**
                  .
                  </GridLayout>
        </LinearLayout>
</ScrollView>

The compilesdkversion is 28, with the minsdkversion being 23.

I have also tried setting android:screenOrientation to portraitin the AndroidManifest.xml, and then running it on my device, but still no luck.

Any help would be appreciated!

Answer 1

So I managed to solve it. In the <LinearLayout> inside each <CardView>, I changed the android:layout_width and android:layout_height to wrapcontent and now it displays everything fine in portrait mode.