CODEWITHSUNDEEP
androidandroid-layoutandroid-relativelayoutandroid-constraintlayout
timberlakegregg
timberlakegregg

Reputation: 107

Android - Relative vs ConstraintLayout - same output with less code?

Does ConstraintLayout provide any advantage over RelativeLayout for Android - or does ConstraintLayout only add unnecessary complexity?

This is a sample layout I am building, code snippets are below: Android Layout Screenshot

It looks to me that RelativeLayout produces the same result but:

  1. Uses fewer lines of code (50 lines vs 72 lines)
  2. Does not require guidelines
  3. Can be positioned only with android:layout_width="parent", making app:layout_constraintRight/Left/Top/Bottom="parent"" unnecessary

Am I missing some advantage to ConstraintLayout over RelativeLayout?

This is the ConstraintLayout code:

<?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/activity_patient_home"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.doclily.doclily.MessagesTab"
    android:background="#fff"  >

    <com.doclily.doclily.style.ViewGrey4
        android:id="@+id/navBarDummyView"
        android:layout_width="0dp"
        android:layout_height="1dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginTop="2dp"
        app:layout_constraintTop_toTopOf="@+id/navBarGuideline" />

    <android.support.constraint.Guideline
        android:id="@+id/navBarGuideline"
        android:orientation="horizontal"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_constraintGuide_begin="@dimen/action_bar_height"
        tools:layout_editor_absoluteY="48dp"
        tools:layout_editor_absoluteX="0dp"/>

    <com.doclily.doclily.style.TextViewRegularBlack
        android:id="@+id/MessagesTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/action_bar_margin_left"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/navBarDummyView"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Messages"
        android:textSize="@dimen/base_font_size_24"/>

    <com.doclily.doclily.style.TextViewRegularBlack
        android:id="@+id/placeholderTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Placeholder TextView"
        android:layout_marginLeft="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/navBarDummyView"
        android:layout_marginTop="16dp"
        android:layout_marginRight="16dp"
        android:textSize="@dimen/base_font_size_18"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"/>

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/messagesSwipe"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/navBarDummyView">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/threadsTableRecyclerView"
            tools:listitem="@layout/item_messaging_tab_row"
            app:layoutManager="LinearLayoutManager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </android.support.v4.widget.SwipeRefreshLayout>

</android.support.constraint.ConstraintLayout>

This is the RelativeLayout code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/activity_patient_home"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.doclily.doclily.MessagesTab"
    android:background="#fff" >

    <com.doclily.doclily.style.TextViewRegularBlack
        android:id="@+id/MessagesTitle"
        android:layout_width="match_parent"
        android:layout_height="@dimen/action_bar_height"
        android:layout_marginStart="@dimen/action_bar_margin_left"
        android:gravity="center_vertical"
        android:text="Messages"
        android:textSize="@dimen/base_font_size_24"/>

    <com.doclily.doclily.style.ViewGrey4
        android:id="@+id/navBarDummyView"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@+id/MessagesTitle"
        android:layout_marginTop="2dp"/>

    <com.doclily.doclily.style.TextViewRegularBlack
        android:id="@+id/placeholderTextView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Placeholder TextView"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginRight="16dp"
        android:textSize="@dimen/base_font_size_18"/>

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/messagesSwipe"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/navBarDummyView">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/threadsTableRecyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:listitem="@layout/item_messaging_tab_row"
            app:layoutManager="LinearLayoutManager"/>
    </android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>

Upvotes: 0

Views: 1180

Answers (1)

Giacomo Lai
Giacomo Lai

Reputation: 494

ConstraintLayout is better to build responsive layouts.

I suggest you to read the official guide

ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It's similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use with Android Studio's Layout Editor.

Upvotes: 1

Related Questions