imageView does not display on the preview scence but still displays on the emulator

Question

I am trying to create a game like tic tac toe by using the GridLayout. The preview screen could display the background picture for the GridLayout (the board) but could not display the imageView that I inserted in the GridLayout (the red O). There is also an error in the message box that said:

java.lang.ClassNotFoundException: android.view.View$OnUnhandledKeyEventListener

I have tried to refresh the layout and rebuild the project but still cannot fix the error.

The preview screen compare to the emulator screen where the two images are displayed

The code for the activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    tools:context=".MainActivity">

    <android.support.v7.widget.GridLayout
        android:layout_width="368dp"
        android:layout_height="368dp"
        android:background="@drawable/board"
        app:columnCount="3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:rowCount="3">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="10dp"
            app:srcCompat="@drawable/red" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="10dp"
            app:srcCompat="@drawable/red" />
    </android.support.v7.widget.GridLayout>
</android.support.constraint.ConstraintLayout>

Answer 1

Try this code and change only GridLayout take.. you can change root layout instand of constraintLayout take any layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:context=".MainActivity">

<GridLayout
    android:layout_width="368dp"
    android:layout_height="368dp"
    android:columnCount="3"
    android:rowCount="3"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:src="@drawable/user" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:src="@drawable/user" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:src="@drawable/user" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:src="@drawable/user" />

</GridLayout>