I am using cardview with gridview and in design panel my coding output is ok but when i run it on any android phone it is not working

Question

This is my XML code for gridview with cardview and it is appearing alright in the design panel but when I run it on my phone that has android oreo go edition it is showing like this

This is an image of how it appears on my phone

This is an image of how it appears in my android studio's design panel

    <androidx.appcompat.widget.LinearLayoutCompat 
    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">
        
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:background="@android:color/holo_orange_light">
        
            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/first"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="16sp"
                android:text="Android Based Attendance Management System"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.125">
        
            </androidx.appcompat.widget.AppCompatTextView>
        
            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/second"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Integrated With"
                android:textSize="16sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.498"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.50">
        
            </androidx.appcompat.widget.AppCompatTextView>
        
            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/third"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="QR"
                android:textSize="16sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.50"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.80">
            </androidx.appcompat.widget.AppCompatTextView>
        
        </androidx.constraintlayout.widget.ConstraintLayout>
        
        <androidx.gridlayout.widget.GridLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="8"
            android:padding="14dp"
            app:alignmentMode="alignMargins"
            app:columnOrderPreserved="true"
            app:rowCount="2"
            app:columnCount="2">
        
            <!-- Row1 starts !-->
        
            <!-- Column1 starts !-->
        
            <androidx.cardview.widget.CardView
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="16dp"
                app:cardCornerRadius="10dp"
                app:cardElevation="8dp"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1">
        
                <androidx.appcompat.widget.LinearLayoutCompat
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal|center_vertical"
                    android:orientation="vertical"
                    android:layout_margin="16dp">
        
                    <androidx.appcompat.widget.AppCompatImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:src="@drawable/admin_home_page_logo">
        
                    </androidx.appcompat.widget.AppCompatImageView>
        
                    <androidx.appcompat.widget.AppCompatTextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">
        
                    </androidx.appcompat.widget.AppCompatTextView>
        
                </androidx.appcompat.widget.LinearLayoutCompat>
        
            </androidx.cardview.widget.CardView>
        
            <!-- Column1 ends !-->
        
        
            <!-- Column2 starts !-->
        
            <androidx.cardview.widget.CardView
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="16dp"
                app:cardCornerRadius="10dp"
                app:cardElevation="8dp"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1">
        
        
                <androidx.appcompat.widget.LinearLayoutCompat
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal|center_vertical"
                    android:orientation="vertical"
                    android:layout_margin="16dp">
        
                    <androidx.appcompat.widget.AppCompatImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:src="@drawable/teacher_logo">
        
                    </androidx.appcompat.widget.AppCompatImageView>
        
                    <androidx.appcompat.widget.AppCompatTextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">
        
                    </androidx.appcompat.widget.AppCompatTextView>
        
                </androidx.appcompat.widget.LinearLayoutCompat>
        
        
            </androidx.cardview.widget.CardView>
        
            <!-- Column2 ends !-->
        
            <!-- Row1 ends !-->
        
        
        
            <!-- Row2 starts !-->
        
            <!-- Column1 starts !-->
        
            <androidx.cardview.widget.CardView
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="16dp"
                app:cardCornerRadius="10dp"
                app:cardElevation="8dp"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1">
        
        
                <androidx.appcompat.widget.LinearLayoutCompat
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal|center_vertical"
                    android:orientation="vertical"
                    android:layout_margin="16dp">
        
                    <androidx.appcompat.widget.AppCompatImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:src="@drawable/students_logo">
        
                    </androidx.appcompat.widget.AppCompatImageView>
        
                    <androidx.appcompat.widget.AppCompatTextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">
        
                    </androidx.appcompat.widget.AppCompatTextView>
        
                </androidx.appcompat.widget.LinearLayoutCompat>
        
        
            </androidx.cardview.widget.CardView>
        
            <!-- Column1 ends !-->
        
        
            <!-- Column2 starts !-->
        
            <androidx.cardview.widget.CardView
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="16dp"
                app:cardCornerRadius="10dp"
                app:cardElevation="8dp"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1">
        
        
                <androidx.appcompat.widget.LinearLayoutCompat
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal|center_vertical"
                    android:orientation="vertical"
                    android:layout_margin="16dp">
        
                    <androidx.appcompat.widget.AppCompatImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:src="@drawable/parents_logo2">
        
                    </androidx.appcompat.widget.AppCompatImageView>
        
                    <androidx.appcompat.widget.AppCompatTextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">
        
                    </androidx.appcompat.widget.AppCompatTextView>
        
                </androidx.appcompat.widget.LinearLayoutCompat>
        
        
            </androidx.cardview.widget.CardView>
        
            <!-- Column2 ends !-->
        
            <!-- Row2 ends !-->
        
        </androidx.gridlayout.widget.GridLayout>
        </androidx.appcompat.widget.LinearLayoutCompat>

And this is how my Gradle build is:

    
plugins { id 'com.android.application' }
    
    android { compileSdkVersion 30 buildToolsVersion "30.0.3"
    
    defaultConfig {
        applicationId "com.example.androidbasedattendancemanagementsystemusingqr"
        minSdkVersion 16
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"
    
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}
    
    dependencies {
    
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'com.google.android.material:material:1.2.1'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    implementation 'androidx.cardview:cardview:1.0.0'
    implementation 'androidx.gridlayout:gridlayout:1.0.0'
    testImplementation 'junit:junit:4.13.1'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
    }

Answer 1

The picture on your phone is showing a Toolbar. If you do not want it to have a Toolbar then make sure you are using .NoActionBar in your Theme.