Spacing views equally in a ConstraintLayout

user_1830228 0
Viewed 3608

I'm trying to make 5 ImageButton on ConstraintLayout with Equal spacing between them, but i get some problem to anchor them and make it easily for example:

enter image description here

My xml code:

    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@drawable/sheet_shadow"
    android:padding="5dp">

    <ImageButton
        android:id="@+id/btn1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="18dp"
        android:layout_marginBottom="8dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:tint="@color/grey_40"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_more_vert" />

    <ImageButton
        android:id="@+id/btn2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="18dp"
        android:layout_marginBottom="8dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:tint="@color/grey_40"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/btn1"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_more_vert" />

    <ImageButton
        android:id="@+id/btn3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="18dp"
        android:layout_marginBottom="8dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:tint="@color/grey_40"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/btn2"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_more_vert" />

    <ImageButton
        android:id="@+id/btn4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="18dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:tint="@color/grey_40"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/btn5"
        app:layout_constraintStart_toEndOf="@+id/btn3"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_more_vert" />

    <ImageButton
        android:id="@+id/btn5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="18dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:tint="@color/grey_40"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_more_vert" />

</android.support.constraint.ConstraintLayout>
android-constraintlayout android-layout android
3 Answers

You should create chain and set:

app:layout_constraintHorizontal_chainStyle=”spread”

Here you've got some resource about creating chains with ConstraintLayout: https://constraintlayout.com/basics/create_chains.html

Update:

Example

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

<ImageButton
    android:id="@+id/imageView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toStartOf="@id/imageView2"
    app:layout_constraintHorizontal_chainStyle="spread"
    android:src="@mipmap/ic_launcher"/>

<ImageButton
    android:id="@+id/imageView2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:layout_constraintStart_toEndOf="@id/imageView1"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toStartOf="@id/imageView3"
    android:src="@mipmap/ic_launcher"/>

<ImageButton
    android:id="@+id/imageView3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:layout_constraintStart_toEndOf="@id/imageView2"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toStartOf="@id/imageView4"
    android:src="@mipmap/ic_launcher"/>

<ImageButton
    android:id="@+id/imageView4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:layout_constraintStart_toEndOf="@id/imageView3"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toStartOf="@id/imageView5"
    android:src="@mipmap/ic_launcher"/>

<ImageButton
    android:id="@+id/imageView5"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:layout_constraintStart_toEndOf="@id/imageView4"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:src="@mipmap/ic_launcher"/>

result

user_44294980

please try this code. in this code i have use constraint layout and three button. and i have align these button equally spacing using : follow these steps: 1.drag and drop views. 2. select view which you want to spacing between them. 3. click right and click organize --> pack horizontally. 4. after that again select and -->center --> horizontally.

and finally views set with equal space. like this..

3rd step screenshot second step screen shot

i hope its work for you. thanks. code 

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

<Button
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    tools:layout_editor_absoluteX="129dp"
    tools:layout_editor_absoluteY="245dp" />

<Button
    android:id="@+id/button9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    tools:layout_editor_absoluteX="33dp"
    tools:layout_editor_absoluteY="245dp" />

<Button
    android:id="@+id/button10"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    tools:layout_editor_absoluteX="225dp"
    tools:layout_editor_absoluteY="245dp" />

user_103854470

I don't quite understand from your example screenshot of how you are having a problem. But anyways if you want to create a UI where you have 5 buttons horizontally with equal spacing then you can add a linear layout (horizontal) and add those buttons to it. Then you constraint the layout to the bottom of the parent layout.

Can't give the proper code at the moment but the pseudo-code will look like this

constraint layout
    linear layout - orientation:horizontal
        button1
        button2
        button3
        button4
        button5
    \linear layout
\constraint layout
user_108235340
Related