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.

Answer 3

By using Horizontal chain and adjusting the bias you can get the layout as above.

If you find it difficult to understand plz go through this video, here I have designed the layout using the layout editor. Youtube: Centring button in constraint layout using chains and bias

STEPS:

1. open layout editor and add two button
2. hold shift and select both button, then select Horizontal chain from chain option by right clicking
3. toggle the spacing option by clicking the chain option that appears on hovering over the linked buttons.
4. add two more buttons each to left and right edge
5. constraint left button to left edge and right to right edge
6. set bias of left to 10 and right to 90 using the layout editor.

Answer 4

Yes, this is possible (as long as you know your images aren't so wide that they will overlap, and as long as Image2 and Image3 are the same width).

Positioning Image1 and Image4 is easy; you can just constrain their outside edges to the outside edges of the parent.

Then use these constraints to position Image2's right-hand edge to the exact center of the parent:

app:layout_constraintRight_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

and these constraints to position Image3's left-hand edge to the exact center:

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintLeft_toRightOf="parent"

Update

If you know in advance that Image2 and Image3 are not the same width, and you need the combination of the two to be centered, then (as far as I'm aware) you can only solve this problem by introducing an intermediate parent (e.g. a LinearLayout).

In this case, you'd position Image1 and Image4 to the parent edges as before, and use these constraints to "center" the LinearLayout inside the ConstraintLayout:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

Then you simply place Image2 and Image3 inside this LinearLayout.