How to turn this LinearLayout and RelativeLayout into ConstraintLayout?

Question

I am trying to start using ConstrainLayout, but find it difficult to use. I have a layout for setting like screen, and it is using LinearLayout and RelativeLayout, very simple and easy to implement. Here is the layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/tv_stay_awake"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Stay awake"
            android:padding="10dp"/>
        <Switch
            android:id="@+id/switch_stay_awake"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"/>
    </RelativeLayout>


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/tv_notification"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Enable Notification"
            android:padding="10dp"/>
        <Switch
            android:id="@+id/switch_notification"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"/>
    </RelativeLayout>


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/tv_location"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Enable location"
            android:padding="10dp"/>
        <Switch
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"/>
    </RelativeLayout>

</LinearLayout>

and this is how it looks:

Now I want to build the same settings UI, but using ConstrainLayout, and here is the ConstrainLayout I have for this settings UI.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/tv_stay_awake"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Stay awake"/>
    <Switch
        android:id="@+id/switch_stay_awake"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent" />


    <TextView
        android:id="@+id/tv_notification"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Enable Notification"
        app:layout_constraintTop_toBottomOf="@+id/tv_stay_awake"/>

    <Switch
        android:id="@+id/switch_notification"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/switch_stay_awake"/>


    <TextView
        android:id="@+id/tv_location"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Enable location"
        app:layout_constraintTop_toBottomOf="@+id/tv_notification"/>
    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/switch_notification"/>

</android.support.constraint.ConstraintLayout>

and it turns out like this:

As you can see, the Switch buttons are not aligned with the TextView. How can I align them with the TextView on the same line level, so it will look the same as the one I did with LinearyLayout and RelativeLayout? I know I can put the TextView and Switch button in a RelativeLayout for each line, but if I do that, there is no reason to use the ConstrainLayout.

Answer 1

You can try this .

Add app:layout_constraintBaseline_toBaselineOf="@+id/tv_notification" in your Switch XML code .

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_stay_awake"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Stay awake"/>

    <Switch
        android:id="@+id/switch_stay_awake"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_stay_awake"
        app:layout_constraintRight_toRightOf="parent"/>


    <TextView
        android:id="@+id/tv_notification"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Enable Notification"
        app:layout_constraintTop_toBottomOf="@+id/tv_stay_awake"/>

    <Switch
        android:id="@+id/switch_notification"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_notification"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/switch_stay_awake"/>


    <TextView
        android:id="@+id/tv_location"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Enable location"
        app:layout_constraintTop_toBottomOf="@+id/tv_notification"/>

    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_location"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/switch_notification"/>

</android.support.constraint.ConstraintLayout>

OUTPUT