Equally spaced four images using constraint layout

i want to equally spaced four images using constraint layout...i have used guidelines but it is giving me a lot of space between the images and right corner images are going out of the screen

i want something like this -->

but from following code im getting this -->

from another device i tried running it is not giving desired result

following is the code:--

<androidx.drawerlayout.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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">


<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/holder"
    android:layout_width="match_parent"
    android:background="#000000"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:background="#ffffff"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/toolbar"
            app:titleTextColor="#ffffff"
            app:title="@string/app_name"
            android:background="@color/colorPrimary"
            tools:ignore="MissingConstraints" />
       <androidx.constraintlayout.widget.ConstraintLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:id="@+id/cvcxv"
      android:layout_below="@id/toolbar"
     app:layout_constraintTop_toBottomOf="@id/toolbar"


tools:ignore="MissingConstraints">
        <androidx.viewpager.widget.ViewPager
            android:layout_width="match_parent"
            android:layout_height="687px"
            android:id="@+id/viewpagerhome"
            tools:ignore="MissingConstraints" />

        <com.viewpagerindicator.CirclePageIndicator
            android:id="@+id/indicator"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="-30dp"
            android:layout_marginBottom="-3dp"
            android:gravity="bottom"
            app:layout_constraintBottom_toBottomOf="parent"
            android:padding="10dip"
            app:centered="true"
            app:fillColor="@color/colorPrimary"
            app:pageColor="#FFFFFF"
            app:snap="false"
            tools:ignore="MissingConstraints" />
     </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="bottom"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:gravity="bottom"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent">

            <Button
                android:id="@+id/image1"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginEnd="4dp"
                android:layout_marginRight="4dp"
                android:background="@drawable/chairsicon"
                app:layout_constraintDimensionRatio="h,1:1"
                app:layout_constraintEnd_toStartOf="@id/image2"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <Button
                android:id="@+id/image2"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginStart="4dp"
                android:layout_marginLeft="4dp"
                android:background="@drawable/chairsicon"
                app:layout_constraintDimensionRatio="h,1:1"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/image1"
                app:layout_constraintTop_toTopOf="parent" />

            <Button
                android:id="@+id/image3"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="4dp"
                android:layout_marginRight="4dp"
                android:background="@drawable/chairsicon"
                app:layout_constraintDimensionRatio="h,1:1"
                app:layout_constraintEnd_toStartOf="@id/image4"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/image1" />

            <Button
                android:id="@+id/image4"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginStart="4dp"
                android:layout_marginLeft="4dp"
                android:layout_marginTop="8dp"
                android:background="@drawable/chairsicon"
                app:layout_constraintDimensionRatio="h,1:1"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/image3"
                app:layout_constraintTop_toBottomOf="@id/image2" />

        </androidx.constraintlayout.widget.ConstraintLayout>



    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>


<com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:layout_gravity="start"
    app:itemTextColor="#ffffff"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/menu"
    app:itemIconTint="#ffffff"
    app:itemBackground="@drawable/drawer_item_bg"
    />

  </drawer>

different devices give differnt output but not desired one(first image)

need help so that it can fit every device(small device to big device)

Thanks in advance

from Equally spaced four images using constraint layout