Using Constraint Layout to center two items together in the center

Question

Here is my intended layout.

<-   ActionBar with back  button

[ Image1 ]            [Image2][Image3]       [Image4]

Doese anyone know how to support this with ConstraintLayout? Image2,Image3 are to be in the center and with little or no margin between them. Image1, and Image4 are to be near to left right edges respectively.

Is there anyway to achieve the same with LinearLayout or RelativeLayout for the row of images?

Does coordinatorlayout always have to be root layout? and if so does it support the ActionBar?

Answer 1

You can create two buttons centered by using chains (chainStyle="packed") They will be such that the space on the left and right of them is the same. (ratio can be adjusted with bias)

    <Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="0dp"
    android:text="Two"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    tools:layout_editor_absoluteY="268dp" />

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:text="Buttons centered"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/button"
    tools:layout_editor_absoluteY="268dp" />

Answer 2

Using a guideline is an easy way to achieve what you are trying to do.

The key thing to notice is app:layout_constraintGuide_percent="0.5" which places the guide in the center of the view horizontally. From there you can attach your images to either side of it.

<?xml version="1.0" encoding="utf-8"?>
<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="com.example.junkrmm.MainActivity">


    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"
        />

    <ImageView
        android:id="@+id/A"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@android:drawable/a"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginEnd="0dp"
        android:layout_marginTop="0dp" />


    <ImageView
        android:id="@+id/B"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:srcCompat="@android:drawable/b"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginEnd="0dp"
        android:layout_marginTop="0dp" />

    <ImageView
        android:id="@+id/C"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@android:drawable/c"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginEnd="0dp"
        android:layout_marginTop="0dp" />

    <ImageView
        android:id="@+id/D"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@android:drawable/d"
        app:layout_constraintStart_toEndOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginEnd="0dp"
        android:layout_marginTop="0dp"/>

</android.support.constraint.ConstraintLayout>

You could achieve the same with LinearLayout if the sizes of your images are consistent, but ConstraintLayout is a better fit for this.

Off the top of my head I believe that CoordinatorLayout needs to be the root viewgroup, but I could be mistaken. It does support ActionBar in the form of Toolbar which is a newer more flexible variant of ActionBar.