Search code examples
androidxmlandroid-layoutandroid-constraintlayoutconstraintlayout-guideline

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

enter image description here

but from following code im getting this -->

enter image description here

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)

Solution

  • 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:

    Output of code

    (This will be consistent across different screen sizes)

    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>