CODEWITHSUNDEEP
androidandroid-layoutkotlinandroid-constraintlayout
Ma2340
Ma2340

Reputation: 727

Android constraint layout include another layout

I am having more of a conceptual question when it comes to ConstraintLayout. I want to re-use a layout inside my ConstraintLayout. But I ask myself a question that the ConstraintLayout aims at avoiding nesting of layouts and including a layout will decrease the ConstraintLayout performance. What is the best/ good practice to avoid nesting of layouts and at the same time re-use a layout so as to avoid code duplication?

Upvotes: 2

Views: 2150

Answers (2)

Haris
Haris

Reputation: 4230

You can use <merge/> tag to eliminate redundant view groups in your view hierarchy when including one layout within another.

Example:

main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <include layout="@layout/include_layout"/>

</androidx.constraintlayout.widget.ConstraintLayout>

include_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<merge
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="33dp"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:text="TextView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />
</merge>

Result: enter image description here

In this case, without the <merge/> tag, you'll have two ConstraintLayout in the layout hierarchy.

enter image description here

Reference: https://developer.android.com/training/improving-layouts/reusing-layouts

Upvotes: 2

greyhairredbear
greyhairredbear

Reputation: 802

Bottom Line

Don't be afraid of nesting ConstraintLayout as long as your View hierarchy doesn't grow too deep (<10). I'd consider it good practice to reuse and nest your layouts to avoid code duplication whenever it makes sense.

Background

I quote from the Android Developers page:

Additionally, if your app targets Android 7.0 (API level 24), it is likely that you can use a special layout editor to create a ConstraintLayout object instead of RelativeLayout. Doing so allows you to avoid many of the issues this section describes. The ConstraintLayout class offers similar layout control, but with much-improved performance. This class uses its own constraint-solving system to resolve relationships between views in a very different way from standard layouts.

Optimizing Layout Hierarchies from the developers page mentions that

Deep layouts - Layouts with too much nesting are bad for performance. Consider using flatter layouts such as RelativeLayout or GridLayout to improve performance. The default maximum depth is 10

However, ConstraintLayout is not mentioned on this page explicitly and I might add that a depth of 10 nested layouts would almost surely result in a rather cluttered UI.

To add, in my professional experience as a software developer, I've never had performance issues with ConstraintLayout despite the fact that my team does use nested ConstraintLayouts regularly (with limited depth, I might add), most of the time encapsulated in custom View Components. That being sad, these events certainly don't occur excessively, since ConstraintLayout enables one to build UIs without excessive use of nesting.

Upvotes: 1

Related Questions