Align vertical center of two view in Android

Question

How can I align vertical center of two views align in LinearLayout or RelativeLayout (iOS equivallent of view1.centerY = view2.centerY)?

I am trying to achieve below layout. How can I make the all the three views in first line aligned vertically in xml? The middle view in first line is fixed. I want the left and right view's vertical center line equal to middle views vertical center line.

Answer 1

Constraint layout:

<?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:id="@+id/view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ConstraintLayout">

    <View
        android:id="@+id/left"
        android:layout_width="70dp"
        android:layout_height="30dp"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="8dp"
        android:background="#FF2600"
        app:layout_constraintBottom_toBottomOf="@+id/center"
        app:layout_constraintEnd_toStartOf="@+id/center"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/center" />

    <View
        android:id="@+id/center"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="#0633FF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/right"
        android:layout_width="70dp"
        android:layout_height="30dp"
        android:layout_marginEnd="8dp"
        android:background="#FF40FF"
        app:layout_constraintBottom_toBottomOf="@+id/center"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/center"
        app:layout_constraintTop_toTopOf="@+id/center" />
</android.support.constraint.ConstraintLayout>

Answer 2

Using Android's relatively new ConstraintLayout you should be able to treat the top and bottom edges of the blue layout as top and bottom constraints respectively for the red and violet ones. Aligning both of them to both of these constraints at once, while defining their heights in absolute, should render the layout you are looking for. You can refer to the official examples repository to check use cases for this layout type.

Edit: Took a moment to provide you with a simplified example. Only including tags/parameters which are relevant to the case.

<android.support.constraint.ConstraintLayout 
...
>
    <Layout
    android:id="@+id/blue"
    ...
    />

    <Layout
    android:id="@+id/red"
    android:layout_height="20dp"
    app:layout_constraintTop_toTopOf="@+id/blue"
    app:layout_constraintBottom_toBottomOf="@+id/blue"
    ...
    />

    <Layout
    android:id="@+id/violet"
    android:layout_height="20dp"
    app:layout_constraintTop_toTopOf="@+id/blue"
    app:layout_constraintBottom_toBottomOf="@+id/blue"
    ...
    />


</android.support.constraint.ConstraintLayout>

Answer 3

Another option is use Frame Layout to vertical Align Views in RelativeLayout

        <TextView
            android:id="@+id/labelBrightnessSetting"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Display Brightness"
            />

        <ImageView
            android:id="@+id/btnReduceBrightness"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_below="@+id/labelBrightnessSetting"
            android:layout_marginTop="25dp"
            android:src="@drawable/vector_minus" />

        <!-- This will center align all contents-->
        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="150dp"
            android:layout_below="@+id/labelBrightnessSetting"
            android:layout_marginTop="25dp"
            android:layout_toLeftOf="@+id/btnIncreaseBrightness"
            android:layout_toRightOf="@+id/btnReduceBrightness">

            <SeekBar
                android:id="@+id/brightnessSeekbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="@dimen/margin_5px"
                android:layout_marginRight="@dimen/margin_5px" />
        </FrameLayout>

        <ImageView
            android:id="@+id/btnIncreaseBrightness"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_below="@+id/labelBrightnessSetting"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_marginTop="25dp"
            android:src="@drawable/vector_plus" />

    </RelativeLayout>