Im trying to make a list of products using GridLayout + CardView, it went well on the studio when i was designing Expected Results
But when i went ahead and opened the app on my phone i get this Results
this is my code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginHorizontal="15dp"
android:layout_marginTop="48dp"
android:fontFamily="sans-serif-black"
android:text="Welcome $name"
android:textSize="12sp"
android:textStyle="bold" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginHorizontal="25dp"
android:layout_marginBottom="64dp"
android:layout_marginTop="75dp">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="2"
android:rowCount="4"
android:orientation="horizontal"
android:layout_marginTop="20dp">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="0dp"
app:cardCornerRadius="8dp"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="140dp"
android:layout_height="140dp"
android:contentDescription="evoo"
android:layout_gravity="center_horizontal"
android:src="@drawable/extra_virgin_olive_oil" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textAlignment="center"
android:textStyle="bold"
android:textSize="12sp"
android:text="Extra Virgin Olive Oil" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Extra virgin olive oil (EVOO) is processed from fruit of the olive (Olea europea..."
android:textAlignment="center"
android:textSize="12sp" />
<TextView
android:layout_width="match_parent"
android:textAlignment="center"
android:layout_height="match_parent"
android:text="Rp. 100000.00"/>
</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_column="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="0dp"
app:cardCornerRadius="8dp"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="140dp"
android:layout_height="140dp"
android:src="@drawable/premium_honey" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="12sp"
android:text="Premium Honey" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Our premium honey is made from the nectar of flowers and collected by bees from..."
android:textAlignment="center"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rp. 70000.00"/>
</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_column="0"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="0dp"
app:cardCornerRadius="8dp"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="140dp"
android:layout_height="140dp"
android:src="@drawable/himalayan_pink_salt" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="12sp"
android:text="Himalayan Pink Salt" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Our Himalayan pink salt is sourced from ancient salt mines in the Himalayan..."
android:textAlignment="center"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rp.50000.00"/>
</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_column="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="0dp"
app:cardCornerRadius="8dp"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="140dp"
android:layout_height="140dp"
android:src="@drawable/peanut" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="12sp"
android:text="Peanut" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Introducing our premium quality peanuts – the perfect snack for any occasion! Our..."
android:textAlignment="center"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rp. 40000.00"/>
</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_column="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="0dp"
app:cardCornerRadius="8dp"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="140dp"
android:layout_height="140dp"
android:src="@drawable/premium_green_tea" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="12sp"
android:text="Premium Green Tea" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Our premium green tea is hand-picked and carefully selected to ensure the high..."
android:textAlignment="center"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rp. 85000.00"/>
</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_column="0"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="0dp"
app:cardCornerRadius="8dp"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="140dp"
android:layout_height="140dp"
android:src="@drawable/gourmet_popcorn" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="12sp"
android:text="Gourmet Popcorn" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Our gourmet popcorn is made from the finest kernels and popped to perfection..."
android:textAlignment="center"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rp. 35000.00"/>
</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_column="0"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="0dp"
app:cardCornerRadius="8dp"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="140dp"
android:layout_height="140dp"
android:src="@drawable/organic_dark_chocolate" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="12sp"
android:text="Organic Dark Chocolate" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Our organic dark chocolate is made from the finest cocoa beans and sweetened beans.."
android:textAlignment="center"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rp. 70000.00"/>
</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_column="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="0dp"
app:cardCornerRadius="8dp"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="140dp"
android:layout_height="140dp"
android:src="@drawable/organic_quinoa" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="12sp"
android:text="Organic Quinoa" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Our organic quinoa is a versatile and nutritious grain that is gluten-free and easy..."
android:textAlignment="center"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rp. 45000.00"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</ScrollView>
</RelativeLayout>
I have tried messing around with the layout width/height changing it to wrap_content/match_parent but it still looks like that, i also have tried another post’s answer which is changing the gridlayout orientation to horizontal but all it did was make the render worse after changing orientation to horizontal
New contributor
Adlan Al-Ghifari is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.