How to fix equal spacing in a horizontal ConstraintLayout?-CodePudding

I am having trouble using a ConstraintLayout within a ConstraintLayout to equally space out 5 buttons at the bottom of my app. Currently, I am able to space all buttons equally except for the leftmost button: shown here. I understand a LinearLayout would also function for this purpose, but I would like to use a ConstraintLayout if possible. My activity XML is shown below:

<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@ id/layout2"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_alignParentBottom="true"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"


        app:layout_constraintTop_toBottomOf="@id/linear1">

        <ImageButton
            android:id="@ id/back_arrow"
            style="@style/Base.Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/back_arrow"
            app:layout_constrainedWidth="true"
            app:layout_constraintEnd_toStartOf="@id/forward_arrow"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="parent"
            app:layout_constraintVertical_chainStyle="spread" />

        <ImageButton
            android:id="@ id/forward_arrow"
            style="@style/Base.Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/forward_arrow"
            app:layout_constrainedWidth="true"
            app:layout_constraintEnd_toStartOf="@id/refresh"
            app:layout_constraintStart_toEndOf="@id/back_arrow"
            app:layout_constraintTop_toBottomOf="parent"

            app:layout_constraintVertical_chainStyle="spread" />

        <ImageButton
            android:id="@ id/refresh"
            style="@style/Base.Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/refresh_icon"
            app:layout_constrainedWidth="true"
            app:layout_constraintEnd_toStartOf="@id/stop"
            app:layout_constraintStart_toEndOf="@id/forward_arrow"
            app:layout_constraintTop_toBottomOf="parent"

            app:layout_constraintVertical_chainStyle="spread" />

        <ImageButton
            android:id="@ id/stop"
            style="@style/Base.Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/stop_icon"
            app:layout_constrainedWidth="true"
            app:layout_constraintEnd_toStartOf="@id/home"
            app:layout_constraintStart_toEndOf="@id/refresh"
            app:layout_constraintTop_toBottomOf="parent"

            app:layout_constraintVertical_chainStyle="spread" />

        <ImageButton
            android:id="@ id/home"
            style="@style/Base.Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/home_icon"
            app:layout_constrainedWidth="true"

            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/stop"
            app:layout_constraintTop_toBottomOf="parent"
            app:layout_constraintVertical_chainStyle="spread" />


    </androidx.constraintlayout.widget.ConstraintLayout>

    <LinearLayout
        android:id="@ id/linear1"
        android:layout_width="wrap_content"

        android:layout_height="0dp"
        android:orientation="vertical"
        android:weightSum="2"
        app:layout_constraintBottom_toTopOf="@ id/layout2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@ id/toolbar2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"
            android:background="@color/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="?attr/actionBarTheme">

            <RelativeLayout
                android:id="@ id/url_go_progressbar_relLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@ id/web_address_edit_text"
                    android:layout_width="200dp"
                    android:layout_height="48dp"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentLeft="true"
                    android:layout_marginTop="2dp"
                    android:layout_marginBottom="2dp"
                    android:layout_toLeftOf="@ id/go_button"
                    android:focusable="true"
                    android:focusableInTouchMode="true"
                    android:hint="Enter URL"
                    android:importantForAutofill="noExcludeDescendants"
                    android:inputType="textWebEditText"
                    android:textSize="13sp" />

                <Button
                    android:id="@ id/go_button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignTop="@ id/web_address_edit_text"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:layout_marginTop="4dp"
                    android:text="@string/go_button" />

                <ProgressBar
                    android:id="@ id/progress_bar"
                    style="?android:attr/progressBarStyleHorizontal"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@ id/web_address_edit_text" />
            </RelativeLayout>
        </androidx.appcompat.widget.Toolbar>

        <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
            android:id="@ id/swipe"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1.4">


            <WebView
                android:id="@ id/web_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            </WebView>
        </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

I am new to Android Development so I don't have much experience, if there are any other bad practices you notice while looking at my XML, please let me know. (Also if possible, I am interested in knowing if there is a way to make the navbar use a specific percent of the screen rather than a static dp as I have assigned it.)

Thank you!

CodePudding user response：

Here is your answer with more clarification using a ConstraintLayout

https://constraintlayout.com/basics/create_chains.html

CodePudding user response：

I notice you're already using chains.
Hence, all you need to do is to change all your ImageButton's width to 0dp. This seems counter-intuitive but it will cause all buttons to match the constraints set, hence all buttons would have equal width.

e.g.

android:layout_width="wrap_content"

must be changed to

android:layout_width="0dp"

Thanks!

CodePudding user response：

use guidelines at equal distance and constraint your button to it you will need to add 3 vertical guidelines for equal spacing of your button

know more about it https://developer.android.com/reference/androidx/constraintlayout/widget/Guideline