fonnes
fonnes

Reputation: 509

How to center a view relative to a non sibling view?

In this layout I attempt to center the checkbox (id: checkbox) relative to the first included layout (id: 1), vertically. As of right now I have added a simple margin to temporary fix the issue. I have not been able to user constraint layout because the checkbox is not a sibling of the layout I wish to center it relative to.

How can I center the checkbox relative to the layout, vertically?

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <CheckBox
            android:id="@+id/checkbox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginTop="20dp"/>   <!--Hax, should be centered to 1-->

        <LinearLayout
            android:id="@+id/layout_2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/checkbox"
            app:layout_constraintTop_toTopOf="parent">

            <include
                android:id="@+id/1"
                layout="@layout/1" />

            <include
                android:id="@+id/2"
                layout="@layout/2" />

            <include
                android:id="@+id/3"
                layout="@layout/3" />
        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Upvotes: 1

Views: 1007

Answers (1)

Ben P.
Ben P.

Reputation: 54194

If you remove the layout_2 LinearLayout from your view hierarchy, then you will be able to do what you want.

It's not clear from your question whether or not your included layouts require a LinearLayout parent (e.g. for layout_weight attributes), but I am willing to bet that even that can be solved.

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <CheckBox
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@+id/1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/1"/>

    <include
        layout="@layout/1" 
        android:id="@+id/1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/checkbox"
        app:layout_constraintEnd_toEndOf="parent"/>

    <include
        layout="@layout/2"
        android:id="@+id/2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/1"
        app:layout_constraintStart_toEndOf="@+id/checkbox"
        app:layout_constraintEnd_toEndOf="parent"/>

    <include
        layout="@layout/3"
        android:id="@+id/3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/2"
        app:layout_constraintStart_toEndOf="@+id/checkbox"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

This layout places the 1, 2, and 3 views in a vertical "line", simulating a LinearLayout. Because they are now sibling views of the CheckBox, you can constrain the CheckBox's top and bottom to the top and bottom of the 1 view, vertically centering it.

If you want to use weights, then you can add bottom constraints to the 1, 2, and 3 views in order to form a vertical chain, and then you can specify the app:layout_constraintVertical_weight attribute.

Upvotes: 1

Related Questions