How to include constraint layout to another constraint layout and set constraint between each

Question

I'm using constraintLyout v 1.0.1.

I would like to include in my xml a sub ConstraintLayout corresponding to a part of my global layout (which itself is a ConstraintLayout). I split the layout in two xmls in order to use this sub part elsewhere

I tried this but I have no control on where to place my sub constraint layout in the parent. I wonder if I have to place everything in the same xml file or if their is a solution to use separate files.

tmp_1.xml

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <TextView
        android:id="@+id/label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="LABEL1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="16dp"
        />
    <TextView
        android:id="@+id/label_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="LABEL2"
        app:layout_constraintStart_toStartOf="@id/label"
        app:layout_constraintEnd_toEndOf="@id/label"
        app:layout_constraintTop_toBottomOf="@id/label"
        android:layout_marginTop="16dp"
        />

    <include layout="@layout/tmp_2" />
</android.support.constraint.ConstraintLayout>

tmp_2.xml

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <TextView
        android:id="@+id/view_80"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="80th element"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="10dp"
        android:layout_marginStart="12dp"
        />
</android.support.constraint.ConstraintLayout>

The result is this

But i want it to be this

I tried this but it does not work

<include 
    app:layout_constraintTop_toBottomOf="@id/label_2"
    layout="@layout/tmp_2" />

You can add the constraint parameters to the root tag of included layout. — opLW, Apr 22 '21 at 02:05

Kélian · Accepted Answer · 2017-06-12T10:09:55.370

172

Actually found a solution. Android Studio does not autocomplete constraintLayout parameters in an include tag but they do have an impact on it as long as you give that include a size.

<include
        layout="@layout/tmp_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/label_2"
        />

edited Jun 12 '17 at 10:09

answered Apr 28 '17 at 09:33

Kélian

3,323
3
11
20

2

dont you think it kills the purpose of creating UI without nested layouts if we include constraint layout within another constraint layout – Nouman Bhatti Mar 20 '18 at 09:49
13

@NoumanBhatti You may be mistaking. ConstraintLayout is aming at reducing nested layouts not creating all the layouts without nested layouts. Include is aming at reusing layouts and that's what ConstraintLayout can't do. If containing a include can make your layout more flexible, you can do it without any hesitation. – Allen Vork Apr 18 '18 at 07:18
2

For anyone else that comes behind me, if this is not working, it might be because you've nested your includes in a `` tag. When I removed that and left the constraint layout to the be parent layout, I was able to adjust the positioning and the size – hallmanitor Aug 07 '18 at 10:24
2

Also for my setup, I couldn't use wrap_content for the height, I had to give it an explicit dp value. – hallmanitor Aug 07 '18 at 10:41
@Kélian getting https://stackoverflow.com/questions/46045377/overload-resolution-ambiguity-error-in-kotlin error when defining the id for include tag – Deepak Kumar Aug 29 '19 at 08:35
1

This solution worked for another situation too. It seems that Android Studio expects when you specify any of the `app:layout_constraint*` parameters, that you also have to specify the `android:layout_width` and `android:layout_height` for the `` – Michael Osofsky Sep 06 '19 at 18:01
It seems as late as Android Studio 4.2 that it does auto complete the `constraintLayout` parameters, but they still do not have an effect unless `layout_width` and `layout_height` is specified. – boltup_im_coding Jun 16 '21 at 05:45

score 81 · Answer 2 · answered Aug 12 '18 at 09:47

81

To inlude one constraint layout and constraint it according to one's need, one will have to give width and height to the included layout like this :

<include
        android:id="@+id/shop_card_layout"
        layout="@layout/shop_card_one"
        android:layout_height="wrap_content"
        android:layout_width="300dp"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="@id/heading_tv"
        app:layout_constraintTop_toBottomOf="@+id/heading_tv" />

answered Aug 12 '18 at 09:47

Dhruvam Sharma

1,661
14
22

@DhruvamSharma If you redefine the id then getting this error https://stackoverflow.com/questions/46045377/overload-resolution-ambiguity-error-in-kotlin – Deepak Kumar Aug 29 '19 at 08:37
4

correct answer! I added layout_width and layout_height, set constains (top and bottom in my case) and it works. – oxied Oct 27 '20 at 19:05
This is the correct anwser, need to add height and width to the included layout, doesn't to wrap in another parent layout. – Nezneika Dec 13 '20 at 08:00
Thank you! Adding W & H to the sub-layout let me constrain it – sebasira Jan 01 '23 at 12:55

score 1 · Answer 3 · answered Feb 08 '18 at 06:35

You could avoid the ConstraintLayout constraints at the include item. I just <include/> it as it is.

MainActivity Layout file:

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        android:id="@+id/toolbarLayout"
        layout="@layout/layout_toolbar" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="CONTENTS"
        app:layout_constraintBottom_toBottomOf="@+id/footerLayout"
        app:layout_constraintEnd_toEndOf="@+id/footerLayout"
        app:layout_constraintStart_toStartOf="@+id/footerLayout"
        app:layout_constraintTop_toTopOf="@+id/footerLayout" />

    <include
        android:id="@+id/footerLayout"
        layout="@layout/layout_footer" />

</android.support.constraint.ConstraintLayout>

ToolBar Layout file:

<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:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <TextView
            android:id="@+id/toolbarTitleTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/hidden"
            android:textColor="@android:color/white"
            tools:layout_editor_absoluteX="192dp"
            tools:layout_editor_absoluteY="19dp" />

    </android.support.v7.widget.Toolbar>
</android.support.constraint.ConstraintLayout>

Wouldn't using an include create a constraint layout inside the parent constraint layout? Then is there a point in using the `include` since you no longer have constraint layout's flat view hierarchy — 11m0, Mar 08 '19 at 23:57
By `including` another layout you can reuse the included layouts in other `activities`. — LiTTle, Mar 09 '19 at 05:38
So the advantage is being able to reuse a specific layout file, but the disadvantage is you get a performance hit from potentially nested layouts. That right? — 11m0, Mar 10 '19 at 00:16
Yes you have a performance issue. But, I think I found the solution to the whole problem. The solution could be `parentTag` as described here (https://android.jlelse.eu/android-dev-tip-5-55226527e780). I will test it when I have the time or you can test it and let the community know. — LiTTle, Mar 11 '19 at 04:48
the parentTag in tools is only for what you see within the design tab of Android Studio, it doesn't have any effect at runtime — Nikos Hidalgo, Sep 10 '19 at 14:38

score -1 · Answer 4 · answered Nov 28 '18 at 07:28

To include one constraint layout to other contraint layout to use one more contrsaint layout to each parent of include layout... Like below:

<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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/new_landing_bg"
tools:context=".activity.DesignTestActivity">

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent">

    <include layout="@layout/common_footer_layout" />

</android.support.constraint.ConstraintLayout>

this is work on my xml layout. Enjoy code.

Shivam · Answer 5 · 2020-12-11T05:40:38.703

We can use a layout tag if using Constraint layout. For Linear layout we can directly include the layout.

I had a different requirement where i am having a tab view below toolbar. I had set toolbar elevation to 0dp and added a view file below the tab view so that both the tab view and toolbar looks as a single unit.

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs_container"
        style="@style/tab_layout_style"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:tabGravity="fill"
        app:tabIndicatorFullWidth="false"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/text_black_app"
        app:tabTextColor="@color/txt_gray_contact_lbl" />

    <LinearLayout
        android:id="@+id/layout_elevation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/tabs_container">

        <include layout="@layout/gray_view_for_elevation" />
    </LinearLayout>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent="100"
        app:layout_constraintTop_toBottomOf="@+id/layout_elevation_view" />

</androidx.constraintlayout.widget.ConstraintLayout>

This code is for Linear layout

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorWhite"
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        style="@style/tab_layout_style"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="@dimen/dp_4"
        app:tabGravity="fill"
        app:tabIndicatorFullWidth="false"
        app:tabMode="scrollable"/>

    <include
        android:id="@+id/layout_elevation_view"
        layout="@layout/gray_view_for_elevation" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/background_gray" />

</LinearLayout>

My elevation view file

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

<View
    android:layout_width="wrap_content"
    android:layout_height="@dimen/dp_1"
    android:background="#80bbbbbb" />

<View
    android:layout_width="wrap_content"
    android:layout_height="@dimen/dp_1"
    android:background="#60bbbbbb" />

<View
    android:layout_width="wrap_content"
    android:layout_height="@dimen/dp_1"
    android:background="#50bbbbbb" />

Hope this will help.

How to include constraint layout to another constraint layout and set constraint between each

5 Answers5

Linked