Equally spaced four images using constraint layout

Question

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)

Use guidelines. Its best to use with constraintLayout – Priyanka Oct 20 '20 at 09:06 — Priyanka, Oct 20 '20 at 09:06

Jeel Vankhede · Accepted Answer · 2020-10-20T09:31:18.353

Not sure about your exact requirement from question, but I can see that you need to display 4 squares with equal width & height across devices.

You don't need to use guideline for both vertical and horizontal but instead to distribute it vertically you can use barrier to align them properly.

Check out code below:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager.widget.ViewPager
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        app:layout_constraintBottom_toTopOf="@id/image_divider"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/vertical_divider"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent=".5" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/image_divider"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="top"
        app:constraint_referenced_ids="view1, view2" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/horizontal_divider"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="top"
        app:constraint_referenced_ids="view3, view4" />
    
    <View
        android:id="@+id/view1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toTopOf="@id/horizontal_divider"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toStartOf="@id/vertical_divider"
        app:layout_constraintStart_toStartOf="parent" />

    <View
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="@android:color/holo_orange_light"
        app:layout_constraintBottom_toTopOf="@id/horizontal_divider"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/vertical_divider" />

    <View
        android:id="@+id/view3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toStartOf="@id/vertical_divider"
        app:layout_constraintStart_toStartOf="parent" />

    <View
        android:id="@+id/view4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="@android:color/holo_red_dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/vertical_divider" />
</androidx.constraintlayout.widget.ConstraintLayout>

Output:

(This will be consistent across different screen sizes)

Here, vertical guideline is used to distribute views evenly on horizontal direction while barrier is used to align two views in vertical direction.

Dimension ratio is used to make square consistent with 0dp as height & width.

Edit: O.P. seeks for solution on arranging entire view hierarchy with square boxes at bottom, given below is complete code:

<?xml version="1.0" encoding="utf-8"?>
<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/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        android:orientation="vertical">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:title="@string/app_name"
            app:titleTextColor="#ffffff"
            tools:ignore="MissingConstraints" />

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewpagerhome"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="4dp"
            app:layout_constraintBottom_toTopOf="@id/image_divider"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/toolbar"
            tools:ignore="NotSibling" />

        <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"
            android:padding="10dip"
            app:centered="true"
            app:fillColor="@color/colorPrimary"
            app:layout_constraintBottom_toBottomOf="@id/viewpagerhome"
            app:layout_constraintEnd_toEndOf="@id/viewpagerhome"
            app:layout_constraintStart_toStartOf="@id/viewpagerhome"
            app:pageColor="#FFFFFF"
            app:snap="false" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/vertical_divider"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent=".5" />

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/image_divider"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="top"
            app:constraint_referenced_ids="view1, view2" />

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/horizontal_divider"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="top"
            app:constraint_referenced_ids="view3, view4" />

        <View
            android:id="@+id/view1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="4dp"
            android:background="@drawable/tableicon"
            app:layout_constraintBottom_toTopOf="@id/horizontal_divider"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toStartOf="@id/vertical_divider"
            app:layout_constraintStart_toStartOf="parent" />

        <View
            android:id="@+id/view2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="4dp"
            android:background="@drawable/sofaicon"
            app:layout_constraintBottom_toTopOf="@id/horizontal_divider"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/vertical_divider" />

        <View
            android:id="@+id/view3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="4dp"
            android:background="@drawable/chairsicon"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toStartOf="@id/vertical_divider"
            app:layout_constraintStart_toStartOf="parent" />

        <View
            android:id="@+id/view4"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="4dp"
            android:background="@drawable/cupboardicon"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/vertical_divider" />
    </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:layout_gravity="start"
        android:background="@android:color/transparent"
        app:headerLayout="@layout/nav_header_main"
        app:itemBackground="@drawable/drawer_item_bg"
        app:itemIconTint="#ffffff"
        app:itemTextColor="#ffffff"
        app:menu="@menu/menu" />

</androidx.drawerlayout.widget.DrawerLayout>

hey need help here --> https://stackoverflow.com/questions/64763296/pass-value-from-adapter-to-another-activity-through-interface — IRON MAN, Nov 10 '20 at 05:38

Ramy Ibrahim · Answer 2 · 2020-10-20T09:10:42.753

check if this works with you.

<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="0dp"
                android:layout_height="wrap_content"
                android:id="@+id/toolbar"
                app:titleTextColor="#ffffff"
                app:title="@string/app_name"
                android:background="@color/colorPrimary"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"/>
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:id="@+id/cvcxv"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintBottom_toTopOf="@id/images_container"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_below="@id/toolbar"
                app:layout_constraintTop_toBottomOf="@id/toolbar"
                >
                <androidx.viewpager.widget.ViewPager
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    android:id="@+id/viewpagerhome"
                    tools:ignore="MissingConstraints" />

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

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/images_container"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintHeight_percent="0.5"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent">

                <Button
                    android:id="@+id/image1"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_marginStart="4dp"
                    android:layout_marginTop="4dp"
                    android:layout_marginEnd="2dp"
                    android:background="@drawable/lake"
                    app:layout_constraintBottom_toTopOf="@+id/image3"
                    app:layout_constraintEnd_toStartOf="@+id/image2"
                    app:layout_constraintHeight_percent="0.48"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintWidth_percent="0.48" />

                <Button
                    android:id="@+id/image2"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_marginStart="2dp"
                    android:layout_marginTop="4dp"
                    android:layout_marginEnd="4dp"
                    android:background="@drawable/test"
                    app:layout_constraintBottom_toTopOf="@+id/image4"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHeight_percent="0.48"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toEndOf="@+id/image1"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintWidth_percent="0.48" />

                <Button
                    android:id="@+id/image3"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:background="@drawable/test"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@+id/image4"
                    app:layout_constraintHeight_percent="0.48"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/image1"
                    app:layout_constraintWidth_percent="0.48" />

                <Button
                    android:id="@+id/image4"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:background="@drawable/lake"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHeight_percent="0.48"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toEndOf="@+id/image3"
                    app:layout_constraintTop_toBottomOf="@+id/image2"
                    app:layout_constraintWidth_percent="0.48" />

            </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"
        />


</androidx.drawerlayout.widget.DrawerLayout>

1.)toolbar gets hidden bihind 2.)viewpager is tooo big ...it should be cover half of the screen(it should not this big but mid level size) 3.) four images got too small — IRON MAN, Oct 20 '20 at 09:04

Mittal Varsani · Answer 3 · 2020-10-13T11:00:54.173

Remove guideline, you can set this view giving height ratio and fit the view in with like this,

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

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

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guideline50"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_constraintGuide_percent="0.5" />

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/cvcxv"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_below="@id/toolbar"
                android:background="@color/colorBlackNormal"
                app:layout_constraintBottom_toTopOf="@id/guideline50"
                app:layout_constraintTop_toBottomOf="@id/toolbar"
                tools:ignore="MissingConstraints">

                <androidx.viewpager.widget.ViewPager
                    android:id="@+id/viewpagerhome"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    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"
                    android:padding="10dip"
                    app:centered="true"
                    app:fillColor="@color/colorPrimary"
                    app:layout_constraintBottom_toBottomOf="parent"
                    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_constraintTop_toBottomOf="@id/cvcxv"
            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>

It will give the desired result in all devices

it worked but it is giving space between viewpager and this layout ...i will update my full code — IRON MAN, Oct 13 '20 at 09:32
and some other device viewpager and this layout get s overrite — IRON MAN, Oct 13 '20 at 09:39
in one device..it perfectly worked..but in one device in bottom lot of space is there — IRON MAN, Oct 13 '20 at 10:10
Do you want to fix a whole view with the device height? @IRONMAN — Mittal Varsani, Oct 13 '20 at 10:23
yes...so that viewpager and below this layout should fit according to height of device — IRON MAN, Oct 13 '20 at 10:27
for that, you have to set the guideline to the Viewpager constraint layout @IRONMAN — Mittal Varsani, Oct 13 '20 at 10:41
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/222950/discussion-between-iron-man-and-mittal-varsani). — IRON MAN, Oct 13 '20 at 10:51
Actually it worked well inone device...now in another device...bottom two images going out of the device ..what to do? — IRON MAN, Oct 13 '20 at 11:11
`bottom two images going out of the device` is slightly little device from worked device one... — IRON MAN, Oct 13 '20 at 11:14
`and if you see in xml layout design also bottom two is cut...what to do?` @MittalVarsani — IRON MAN, Oct 13 '20 at 12:38

score 0 · Answer 4 · answered Oct 13 '20 at 09:21

you can test below code :

  <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="wrap_content"
    android:layout_gravity="bottom"
    android:gravity="bottom"
    android:orientation="vertical"
    app:layout_constraintBottom_toBottomOf="parent">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.50" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.50" />


    <Button
        android:id="@+id/image2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="5dp"
        android:background="@drawable/ic_launcher_background"
        app:layout_constraintBottom_toTopOf="@+id/guideline_horizontal"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toStartOf="@+id/guideline_vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/image3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="10dp"
        android:background="@drawable/ic_launcher_background"
        app:layout_constraintBottom_toTopOf="@+id/guideline_horizontal"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guideline_vertical"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/image4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="10dp"
        android:background="@drawable/ic_launcher_background"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toStartOf="@+id/guideline_vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/guideline_horizontal" />

    <Button
        android:id="@+id/buttonMiddle"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="10dp"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guideline_vertical"
        app:layout_constraintTop_toTopOf="@+id/guideline_horizontal" />

</androidx.constraintlayout.widget.ConstraintLayout>

it worked but it is giving space between viewpager and this layout ...i will update my full code — IRON MAN, Oct 13 '20 at 09:37
and some other device viewpager and this layout get s overrite — IRON MAN, Oct 13 '20 at 09:38

Equally spaced four images using constraint layout

4 Answers4

Linked