问题
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)
回答1:
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>
回答2:
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>
回答3:
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>
回答4:
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
来源：https://stackoverflow.com/questions/64332067/equally-spaced-four-images-using-constraint-layout