Develop Reference

Layout stretched when setting GridLayout in a ScrollView

I'm trying to put a grid layout in a scroll view but when i put the grid layout in the scrollview all the card inside the grid are stretched like the scroll doesnt get the match parent..
How could i fix that problem?
When i set it normally in the ConstraintLayout all is shown properly.
Here is how it looks like:
While my XML code is the following:
<androidx.constraintlayout.widget.ConstraintLayout 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/triangle_background"
tools:context=".HomeActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="10">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2">
<TextView
android:id="#+id/textBenvenuto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Benvenuto"
android:textColor="#ffffff"
android:textSize="34sp" />
</RelativeLayout>
<GridLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="false"
android:padding="14dp"
android:rowCount="3">
<!-- Row 1 -->
<!-- Column 1 -->
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
app:cardBackgroundColor="#FFFFFF"
app:cardCornerRadius="3dp"
app:cardElevation="8dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="16dp"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_gravity="center_horizontal"
app:srcCompat="#drawable/ic_inventory" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Inventario"
android:textAlignment="center"
android:textColor="#3D5AFE"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- Column 2 -->
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
app:cardBackgroundColor="#FFFFFF"
app:cardCornerRadius="3dp"
app:cardElevation="8dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="16dp"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_gravity="center_horizontal"
app:srcCompat="#drawable/ic_price_tag" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Verifica Prezzo"
android:textAlignment="center"
android:textColor="#3D5AFE"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- Row 2 -->
<!-- Column 1 -->
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
app:cardBackgroundColor="#FFFFFF"
app:cardCornerRadius="3dp"
app:cardElevation="8dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="16dp"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_gravity="center_horizontal"
app:srcCompat="#drawable/ic_warehouse" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Lotti"
android:textAlignment="center"
android:textColor="#3D5AFE"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- Column 2 -->
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
app:cardBackgroundColor="#FFFFFF"
app:cardCornerRadius="3dp"
app:cardElevation="8dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="16dp"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_gravity="center_horizontal"
app:srcCompat="#drawable/ic_delivery_truck" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ordini"
android:textAlignment="center"
android:textColor="#3D5AFE"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- Row 3 -->
<!-- Column 1 -->
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
app:cardBackgroundColor="#FFFFFF"
app:cardCornerRadius="3dp"
app:cardElevation="8dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="16dp"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_gravity="center_horizontal"
app:srcCompat="#drawable/ic_check_list" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Riepilogo Oridni"
android:textAlignment="center"
android:textColor="#3D5AFE"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- Column 2 -->
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
app:cardBackgroundColor="#FFFFFF"
app:cardCornerRadius="3dp"
app:cardElevation="8dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="16dp"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_gravity="center_horizontal"
app:srcCompat="#drawable/ic_timing_belt" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Impostazioni"
android:textAlignment="center"
android:textColor="#3D5AFE"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

Okay you need to add this line android:fillViewport="true" in you scrollview
ScrollView should be like this
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

How to implement Gridlayout/cardview on API 22 and lower?

My program works perfectly find on Api 23 and above. but for some reason when I run it on lower api [22 or lower ], it sometimes display blank page and sometimes the cardviews are all over the place.
here are some screenshots of my program on api 16 and 23 respectively.
Note: I misspelled "Unknown" on the screenshot lol.
<LinearLayout 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:orientation="vertical"
android:weightSum="10"
tools:context=".MainActivity"
android:background="#ffff">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.5"
android:layout_marginTop="0dp"
>
<TextView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="App Name goes here"
android:autoSizeTextType="uniform"
android:textStyle="bold"
android:textColor="#fbe9e7"
android:background="#B32EC1"
android:padding="10dp"/>
</RelativeLayout>
<GridLayout
android:columnCount="2"
android:rowCount="3"
android:alignmentMode="alignMargins"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8"
android:padding="14dp"
android:alpha="0.8">
<!-- card view -->
<androidx.cardview.widget.CardView
android:id="#+id/pra"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
app:cardCornerRadius="8dp"
app:cardMaxElevation="8dp"
android:background="#ffff">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_margin="16dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Unkown"
android:textAlignment="center"
android:textSize="20sp"
android:textColor="#000"
android:textStyle="bold"
/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:src="#ffff"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- card view -->
<androidx.cardview.widget.CardView
android:id="#+id/flash_card"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
app:cardCornerRadius="8dp"
app:cardMaxElevation="8dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_margin="16dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Unkown"
android:textAlignment="center"
android:textSize="20dp"
android:textStyle="bold"
android:textColor="#000"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:src="#ffff"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- card view-->
<androidx.cardview.widget.CardView
android:id="#+id/allInOne"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
app:cardCornerRadius="8dp"
app:cardMaxElevation="8dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_margin="16dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Unkown"
android:textAlignment="center"
android:textSize="20dp"
android:textStyle="bold"
android:textColor="#000"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:src="#fff"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<!--card view -->
<androidx.cardview.widget.CardView
android:id="#+id/prog"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
app:cardCornerRadius="8dp"
app:cardMaxElevation="8dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_margin="16dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Unkown"
android:textAlignment="center"
android:textSize="20dp"
android:textStyle="bold"
android:textColor="#000"
/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:src="#fff"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- card view -->
<androidx.cardview.widget.CardView
android:id="#+id/officials"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
app:cardCornerRadius="8dp"
app:cardMaxElevation="8dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="16dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Unkown"
android:textAlignment="center"
android:textColor="#000"
android:textSize="20dp"
android:textStyle="bold" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:src="#ffff"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- card view -->
<androidx.cardview.widget.CardView
android:id="#+id/setting"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
app:cardCornerRadius="8dp"
app:cardMaxElevation="8dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_margin="16dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Unknown"
android:textAlignment="center"
android:textSize="20dp"
android:textStyle="bold"
android:textColor="#000" />
<ImageView
android:id="#+id/practice_tv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:src="#ffff"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</LinearLayout>

Why are the drawables not appearing in card view for grid layout?

I started learning grid view recently, but I cannot find the images from the drawable appearing on the cards. A white background is appearing on these cards instead. How can I make the drawable images appear ? I will also attach the screen shot of the activity right now.enter image description here This is my XML Code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:weightSum="10"
tools:context=".Main2Activity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="#+id/textGrid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:fontFamily="serif-monospace"
android:text="#string/grid"
android:textAlignment="center"
android:textAllCaps="false"
android:textColor="#android:color/black"
android:textSize="34sp"
android:textStyle="bold" />
</RelativeLayout>
<GridLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="false"
android:padding="14dp"
android:rowCount="3">
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_rowWeight="1"
android:elevation="8dp"
app:cardCornerRadius="8dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_margin="16dp"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/name1"
android:src="#drawable/mechanic" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/mechanic"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_rowWeight="1"
android:elevation="8dp"
app:cardCornerRadius="8dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_margin="16dp"
android:orientation="vertical">
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/name2"
android:src="#drawable/doctor" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/doctor"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:elevation="8dp"
app:cardCornerRadius="8dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_margin="16dp"
android:layout_gravity="center_horizontal|center_vertical">
<ImageView
android:layout_height="0dp"
android:layout_width="0dp"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/name3"
android:src="#drawable/electrician" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/electrician"
android:textAlignment="center"
android:textSize="18sp"
android:textColor="#android:color/black"
android:textStyle="bold"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:elevation="8dp"
app:cardCornerRadius="8dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_margin="16dp"
android:layout_gravity="center_horizontal|center_vertical">
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:src="#drawable/plumber"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/name4" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/plumber"
android:textAlignment="center"
android:textSize="18sp"
android:textColor="#android:color/black"
android:textStyle="bold"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:elevation="8dp"
app:cardCornerRadius="8dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_margin="16dp"
android:layout_gravity="center_horizontal|center_vertical">
<ImageView
android:layout_height="0dp"
android:layout_width="0dp"
android:src="#drawable/driver"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/name5"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/driver"
android:textAlignment="center"
android:textSize="18sp"
android:textColor="#android:color/black"
android:textStyle="bold"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:elevation="8dp"
app:cardCornerRadius="8dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_margin="16dp"
android:layout_gravity="center_horizontal|center_vertical">
<ImageView
android:layout_height="0dp"
android:layout_width="0dp"
android:src="#drawable/hospital"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/name6"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hospital"
android:textAlignment="center"
android:textSize="18sp"
android:textColor="#android:color/black"
android:textStyle="bold"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</GridLayout>
</LinearLayout>

It's because of setting ImageView height and width to 0dp. Set them to wrap_content or size that you want. Also set the LinearLayout height and width to match_parent.

android cardview on lollipop not render

I have try with the following code. It works well in android 6(marshmallow) and above, but only it doesn't work in android 5(lollipop). Can anyone please help?
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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/drawerLayoutSetting"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bgred"
android:orientation="vertical"
tools:context="com.example.heng.fyp_recompile.SettingActivity">
<android.support.constraint.ConstraintLayout
android:id="#+id/linearLayoutCompatSetting"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/testSetting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="44dp"
android:fontFamily="serif-monospace"
android:text="Setting"
android:textColor="#ffffff"
android:textSize="50sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<GridLayout
android:id="#+id/mainGrid"
android:layout_width="344dp"
android:layout_height="398dp"
android:layout_weight="8"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="false"
android:padding="14dp"
android:rowCount="3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/testSetting">
<!-- Row 1 -->
<!-- Column 1 -->
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_rowWeight="1"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_margin="16dp"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_my_location_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Set Home"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</android.support.v7.widget.CardView>
<!-- Column 2 -->
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_rowWeight="1"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_margin="16dp"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_lock_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Reset Pin"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</android.support.v7.widget.CardView>
<!-- Row 2 -->
<!-- Column 1 -->
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_rowWeight="1"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_margin="16dp"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_contact_phone_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Set Contact"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</android.support.v7.widget.CardView>
<!-- Column 2 -->
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_rowWeight="1"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_margin="16dp"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_lock_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Reset Password"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</android.support.v7.widget.CardView>
</GridLayout>
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view_setting"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#D0312D"
app:itemTextColor="#ffffff"
app:menu="#menu/navigation_menu"
app:headerLayout="#layout/navigation_header"
app:theme="#style/NavigationViewTextSize">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
The image attach was the appropriate layout with android 6(Marshmallow)
This image show none cardview is render in android 5(lollipop)
This image show appropriate layout on android 6(marshmallow)

Cardview is ok in preview but does not appear on mobile

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:weightSum="10"
tools:context="com.example.taksi.cardview.MainActivity">
<RelativeLayout
android:layout_weight="2"
android:layout_width="match_parent"
android:layout_height="0dp">
<TextView
android:id="#+id/textGrid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:layout_centerInParent="true"
android:text="GRID LAYOUT"
android:textSize="34sp" />
</RelativeLayout>
<GridLayout
android:columnCount="2"
android:rowCount="3"
android:layout_weight="8"
android:columnOrderPreserved="false"
android:alignmentMode="alignMargins"
android:padding="14dp"
android:layout_width="match_parent"
android:layout_height="0dp">
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
app:cardElevation="8dp"
app:cardCornerRadius="8dp"
>
<LinearLayout
android:layout_gravity="center_horizontal|center_vertical"
android:layout_margin="16dp"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:src="#drawable/me_time"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Me"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
app:cardElevation="8dp"
app:cardCornerRadius="8dp"
>
<LinearLayout
android:layout_gravity="center_horizontal|center_vertical"
android:layout_margin="16dp"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:src="#drawable/family_time"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Family"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
app:cardElevation="8dp"
app:cardCornerRadius="8dp"
>
<LinearLayout
android:layout_gravity="center_horizontal|center_vertical"
android:layout_margin="16dp"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:src="#drawable/lovely_time"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Lovely"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
app:cardElevation="8dp"
app:cardCornerRadius="8dp"
>
<LinearLayout
android:layout_gravity="center_horizontal|center_vertical"
android:layout_margin="16dp"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:src="#drawable/team_time"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Team"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
</GridLayout>
</LinearLayout>
In the preview it is like:
But when it runs on mobile it is like:
When I run it my mobile, it's look like the second picture. But I want to get the same output like the preview window. But it doesn't appear on my mobile. I make some changes ,but nothing is changed. The output remains same as before. What can do now? Please Help. Thanks in advance.

You can try this.
<LinearLayout
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"
tools:context=".MainActivity"
android:orientation="vertical"
android:weightSum="1"
android:padding="10dp"
android:background="#fcfcfc"
android:gravity="center"
android:id="#+id/ll">
<LinearLayout
android:clipToPadding="false"
android:gravity="center"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
android:id="#+id/bankcardId"
android:layout_width="130dp"
android:layout_height="150dp"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:src="#drawable/your_image"
android:padding="10dp"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/lightgray"
android:layout_margin="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="12sp"
android:text="Me"
android:padding="2dp"
android:textColor="#android:color/darker_gray"/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
android:layout_width="130dp"
android:layout_height="150dp"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:src="#drawable/your_image"
android:padding="10dp"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/lightgray"
android:layout_margin="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="12sp"
android:text="Family"
android:padding="2dp"
android:textColor="#android:color/darker_gray"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>

try to remove grid layout and use Linear layout than place your cardviews