Develop Reference

GridLayout cardview getting out of screen Android

I am trying to make an app using GridLayout, CardView and LinearLayout so everything works fine on the emulator but when I test my app on real devices the card view goes out of the screen I have tested it on different devices but the problem still occurs please help!
This is how it looks inside the emulator
This is how it looks on a real device
XML CODE
<?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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/logo_img"
android:src="#drawable/logo"
android:layout_gravity="center"
android:layout_width="250dp"
android:layout_height="wrap_content"/>
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_margin="5dp"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="false"
android:rowCount="4">
<androidx.cardview.widget.CardView
android:id="#+id/view1"
android:layout_width="170dp"
android:layout_height="170dp"
android:layout_margin="15dp"
app:cardBackgroundColor="#DE773C"
app:cardCornerRadius="12dp"
app:cardElevation="5dp">
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="10dp"
android:src="#drawable/img1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:text="TEST"
android:textAlignment="center"
android:textColor="#272932"
android:textSize="25sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/view2"
android:layout_width="170dp"
android:layout_height="170dp"
android:layout_margin="15dp"
app:cardBackgroundColor="#DE773C"
app:cardCornerRadius="12dp"
app:cardElevation="5dp">
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="10dp"
android:src="#drawable/img2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:text="TEST"
android:textAlignment="center"
android:textColor="#272932"
android:textSize="25sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</LinearLayout>
</ScrollView>

A lot of your widths and heights are hard coded: 170dp, 80dp, etc. What you have done is to design a layout that works for the layout and size of the designer screen. The layout breaks when the screen width/height changes as it does when you move to an emulator or real device.
Take a look at Support different screen sizes about how to approach layout that work on different screen sizes. It takes some doing, but is necessary unless your app will only run on one configuration.

If you want width of both CardViews same in all devices then try to add below in your GridLayout
Add android:columnCount="2" and android:orientation="horizontal" to GridLayout
Add android:layout_width="0dp" and android:layout_columnWeight="1" to CardViews
Example Code:
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_margin="5dp"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:orientation="horizontal"
android:columnOrderPreserved="false"
android:rowCount="4">
<androidx.cardview.widget.CardView
android:id="#+id/view1"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_height="170dp"
android:layout_margin="15dp"
app:cardBackgroundColor="#DE773C"
app:cardCornerRadius="12dp"
app:cardElevation="5dp">
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="10dp"
android:src="#drawable/img1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:text="TEST"
android:textAlignment="center"
android:textColor="#272932"
android:textSize="25sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_height="170dp"
android:layout_margin="15dp"
app:cardBackgroundColor="#DE773C"
app:cardCornerRadius="12dp"
app:cardElevation="5dp">
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="10dp"
android:src="#drawable/img2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:text="TEST"
android:textAlignment="center"
android:textColor="#272932"
android:textSize="25sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>

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.

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>

you can ConstrainLayout
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.constraintlayout.widget.ConstraintLayout>

Thanks #Zain your answer is work well , but i have a one more mistake in GridLayout when i try to make GridLayout width as match_parent its not showing anything so i change as Layout_Width ,
<?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="wrap_content" // here i want to match_parent
android:layout_height="wrap_content"
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="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>
<!-- First Row , Second Column-->
<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>
<!-- Second Row , First Column-->
<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>
<!-- Second Row , Second Column-->
<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>
Anyone explain why its not showing my GridLayout width as match_parent
I want this :

CardView inside GridLayout going off screen

I am using a GridLayout with CardViews inside of it to display a set of objects for users to click on and use to navigate around the app.
Everything appears to be fine on my tablet that I am testing on, but when I sent the APK to a friend, 2/3 of it runs off the screen and just doesn't seem to work.
Example screenshot:
The "Games" section here seems to work just fine. Unable to find any errors, I copy and pasted this section into the "Community" section and just re-named the icons so that the code would be identical except for a few strings.
I don't understand why one section will work and the others do not.
Layout.xml File
<?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/gradient_background"
tools:context=".Dashboard">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_marginTop="32dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="Dashboard"
android:id="#+id/dashTextMain"
android:textSize="34sp"
android:textColor="#FFF"
android:fontFamily="sans-serif-black"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/dashTextSub"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/dashTextMain"
android:layout_marginTop="-2dp"
android:text="Welcome to RoCodes.io,"
android:textColor="#E8E8E8"
android:textSize="20sp" />
<TextView
android:id="#+id/dashTextSub2"
android:textSize="20sp"
android:textColor="#E8E8E8"
android:text="what would you like to find?"
android:paddingBottom="50dp"
android:layout_below="#id/dashTextSub"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
//---------------------- START FIRST GRID LAYOUT -------------------------------------
<TextView
android:text="Music"
android:layout_marginLeft="20dp"
android:textSize="34sp"
android:textColor="#FFFFFF"
android:fontFamily="sans-serif-black"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<GridLayout
android:rowCount="1"
android:columnCount="2"
android:alignmentMode="alignMargins"
android:columnOrderPreserved="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="30dp"
>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:id="#+id/musicCodesButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF"
android:gravity="center"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/ic_music" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Music Codes"
android:textColor="#000000"
android:textSize="18dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:id="#+id/artistSearchButton"
android:orientation="vertical"
android:background="#FFF"
android:gravity="center"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/ic_artist"
android:layout_width="80dp"
android:layout_height="80dp" />
<TextView
android:layout_marginTop="12dp"
android:textColor="#000000"
android:textSize="18dp"
android:text="Search Artists"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:id="#+id/categorySearchButton"
android:orientation="vertical"
android:background="#FFF"
android:gravity="center"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/ic_categories"
android:layout_width="80dp"
android:layout_height="80dp" />
<TextView
android:layout_marginTop="12dp"
android:textColor="#000000"
android:textSize="18dp"
android:text="Music Categories"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
</GridLayout>
//---------------------- END FIRST GRID LAYOUT -------------------------------------
//---------------------- START SECOND GRID LAYOUT -------------------------------------
<TextView
android:text="Games"
android:layout_marginLeft="20dp"
android:textSize="34sp"
android:textColor="#FFFFFF"
android:fontFamily="sans-serif-black"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<GridLayout
android:rowCount="1"
android:columnCount="2"
android:layout_marginBottom="30dp"
android:alignmentMode="alignMargins"
android:columnOrderPreserved="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:id="#+id/twitterCodesButton"
android:orientation="vertical"
android:gravity="center"
android:background="#FFFFFF"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/ic_newcodes"
android:layout_width="80dp"
android:layout_height="80dp" />
<TextView
android:layout_marginTop="12dp"
android:textColor="#000000"
android:textSize="18dp"
android:text="New Codes"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:orientation="vertical"
android:gravity="center"
android:background="#FFFFFF"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/ic_gamecodes"
android:layout_width="80dp"
android:layout_height="80dp" />
<TextView
android:layout_marginTop="12dp"
android:textColor="#000000"
android:textSize="18dp"
android:text="Coming Soon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
</GridLayout>
//---------------------- END SECOND GRID LAYOUT -------------------------------------
//---------------------- START THIRD GRID LAYOUT -------------------------------------
<TextView
android:text="Community"
android:layout_marginLeft="20dp"
android:textSize="34sp"
android:textColor="#FFFFFF"
android:fontFamily="sans-serif-black"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<GridLayout
android:rowCount="1"
android:columnCount="2"
android:layout_marginBottom="30dp"
android:alignmentMode="alignMargins"
android:columnOrderPreserved="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:id="#+id/discordServerButton"
android:orientation="vertical"
android:gravity="center"
android:background="#FFFFFF"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/ic_discord"
android:layout_width="80dp"
android:layout_height="80dp" />
<TextView
android:layout_marginTop="12dp"
android:textColor="#000000"
android:textSize="18dp"
android:text="RoCodes Discord"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:id="#+id/websiteButton"
android:orientation="vertical"
android:gravity="center"
android:background="#FFFFFF"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/ic_website"
android:layout_width="80dp"
android:layout_height="80dp" />
<TextView
android:layout_marginTop="12dp"
android:textColor="#000000"
android:textSize="18dp"
android:text="RoCodes Website"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>
</GridLayout>
//---------------------- END THIRD GRID LAYOUT -------------------------------------
</LinearLayout>
</ScrollView>```

I had the same problem trying to align my GridLayout children (especially when using a CardView). I solved it by setting the following attributes for each child:
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
Like for example:
<GridLayout
android:id="#+id/grLayout_HelloWorld"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:columnCount="2"
android:rowCount="1"
android:useDefaultMargins="true">
<androidx.cardview.widget.CardView
android:id="#+id/crdView_simple_Card00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
app:cardBackgroundColor="#color/color_lime_shade1">
<TextView
android:id="#+id/txtView_TestCard00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="My First Card" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/crdView_simple_Card01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill_horizontal"
app:cardBackgroundColor="#color/color_lime_shade1">
<TextView
android:id="#+id/txtView_TestCard01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="My Second Card" />
</androidx.cardview.widget.CardView>
</GridLayout>
You will notice that i did not use the rowWeight attribute.
Disclaimer:
To be honest, I have no idea WHY this works... All I know is that it bothered me for some time, and I spent a lot of time on Google and StackOverflow until I found some info saying that fill_horizontal might be the solution... Then I just hacked my way from there, trying different layout attributes until I found columnWeight as well.
Hope this helps... Let me know if it works for you.
Good luck, brother (or sister) ✊

Issues trying to create GridLayout with elements of different size

I'm trying to create a static grid-like layout in Android so I'm using GridLayout instead of GridView.
This is the layout I'm trying to achieve
Using the code from here as a base. I'm also a little confused about specifying layout_{weight, margin} on every element inside the grid, since it's my understanding that the rowSpan and colSpan parameters should take care of that. Is this not incorrect?
Any pointers?
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/GridLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="2"
tools:context=".MainActivity" >
<android.support.v7.widget.CardView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/card_view"
android:layout_column="0"
android:layout_gravity="fill"
android:layout_row="0"
android:layout_columnSpan="1">
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/button3"
android:text="Button" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/card_view1"
android:layout_column="0"
android:layout_gravity="fill"
android:layout_row="1"
android:layout_columnSpan="1">
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/button1"
android:text="Button" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/card_view3"
android:layout_column="1"
android:layout_gravity="fill"
android:layout_row="1">
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/button2"
android:text="Button" />
</android.support.v7.widget.CardView>
</GridLayout>

You were so close, try this instead:
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/GridLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="2"
tools:context=".MainActivity" >
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_column="0"
android:layout_gravity="fill_horizontal"
android:layout_row="0"
android:layout_columnSpan="2">
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/button3"
android:text="Button" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/card_view1"
android:layout_column="0"
android:layout_row="1"
android:layout_columnSpan="1"
android:layout_columnWeight="1">
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/button1"
android:text="Button" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/card_view3"
android:layout_column="1"
android:layout_row="1"
android:layout_columnWeight="1">
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/button2"
android:text="Button" />
</android.support.v7.widget.CardView>
</GridLayout>
You need to use layout_gravity="fill_horizontal" for the first item, to stretch the whole row. And play with layout_columnWeight for the 2nd and 3rd item.

How do I make a scorecard type layout CardView?

I have been battling with GridLayout and TableLayout for the past couple of hours and for the life of me can't figure out a way to make a CardView that looks like the following:
Currently I have a CardView parent with this GridLayout is its child:
<GridLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:rowCount="3"
android:columnCount="3"
android:orientation="horizontal"
android:padding="20dp">
<!--FirstRow-->
<ImageView
android:id="#+id/away_logo"
android:layout_row="1"
android:layout_column="0"
android:layout_columnWeight="0.3"
android:layout_gravity="start"
android:gravity="center_vertical"
android:src="#android:drawable/btn_star_big_on"/>
<LinearLayout
android:id="#+id/scores_layout"
android:layout_row="1"
android:layout_rowWeight="0.5"
android:layout_column="1"
android:layout_columnWeight="0.4"
android:layout_gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/away_score_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="10"
android:gravity="center_vertical|start"
android:layout_weight="0.5"/>
<TextView
android:id="#+id/home_score_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|center_vertical"
android:text="11"
android:gravity="center_vertical|end"
android:layout_weight="0.5"/>
</LinearLayout>
<ImageView
android:id="#+id/home_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_rowWeight="0.33"
android:layout_column="2"
android:layout_columnWeight="0.3"
android:layout_gravity="start"
android:gravity="center_vertical"
android:src="#android:drawable/btn_star_big_on"/>
<!--SecondRow-->
<TextView
android:id="#+id/away_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_rowWeight="0.3"
android:layout_column="0"
android:layout_columnWeight="0.33"
android:layout_gravity="start"
android:text="Team"
android:gravity="center_vertical"/>
<TextView
android:id="#+id/home_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_rowWeight="0.3"
android:layout_column="2"
android:layout_columnWeight="0.33"
android:layout_gravity="end"
android:text="Team"
android:gravity="center_vertical"/>
<!--LastRow-->
<TextView
android:id="#+id/time_rink_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_rowWeight="0.3"
android:layout_column="0"
android:layout_columnSpan="3"
android:layout_columnWeight="1"
android:text="7:00P.M.atBotany"
android:layout_gravity="center_horizontal"/>
</GridLayout>
Which gives this layout where the stars are placeholders to visualise where the ImageViews are and the scores are 1 - 13:

Try this layout
<?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="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
tools:text="7:00 P.M. at Venue"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="vertical"
android:padding="5dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
tools:src="#drawable/team_1_image"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="8dp"
tools:text="Team 1"/>
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
tools:text="1 - 3"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="vertical"
android:padding="5dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
tools:src="#drawable/team_2_image"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="8dp"
tools:text="Team 2"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

Why not try using relative layout to contain the inner content (also can do it for the title too), and align the views according to the parents, left, right, and center portions and it should work for you.