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