CODEWITHSUNDEEP
androidandroid-layoutandroid-linearlayoutandroid-relativelayoutandroid-layout-editor
gmtek
gmtek

Reputation: 811

Align vertical center of two view in Android

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.

enter image description here

Upvotes: 2

Views: 1308

Answers (3)

Hitesh Sahu
Hitesh Sahu

Reputation: 45052

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>

Upvotes: 0

Rasel
Rasel

Reputation: 5734

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>

Design

Upvotes: 3

ryfterek
ryfterek

Reputation: 719

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>

Upvotes: 1

Related Questions