Align buttons on ConstraintLayout

Question

I want to have 5 buttons align at equal distance from each other on a toolbar.

Right now I'm just trying to place them on correct order, aligning them to the end of each other. For some reason this is not working, three of the buttons are just being rendered at the layout start and I can't figure out why.

xml code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
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="wrap_content"
android:background="#131314"
android:elevation="4dp">
<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/relativeLayout">

    <Button
        android:id="@+id/btn_camera"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginStart="50dp"
        android:background="@drawable/camera"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btn_ruler"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:background="@drawable/ruler"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@id/btn_camera"/>

    <Button
        android:id="@+id/btn_3"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:background="@drawable/crop"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@id/btn_ruler" />

    <Button
        android:id="@+id/btn_price"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:background="@drawable/euro"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@id/btn_3" />

    <Button
        android:id="@+id/btn_5"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginEnd="60dp"
        android:background="@drawable/camera"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>

</android.support.v7.widget.Toolbar>

Here's the result:

Any help would be much appreciated, thanks!

Answer 1

Try changing your constraint elements to use @+id/...

For example change:

app:layout_constraintStart_toEndOf="@id/btn_camera"/>

To:

app:layout_constraintStart_toEndOf="@+id/btn_camera"/>