Android add other layout in ConstraintLayout using include tag

Question

I make some simple app for test using ConstraintLayout. But I have some problem.

Here is my code

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.user.myapplication.activity.MainActivity">

    <Button
        android:id="@+id/btn_launch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="16dp"
        android:text="launch"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/text_view"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="16dp"
        android:text="Hello World!"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_launch" />

    <include
        layout="@layout/content_main"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text_view" />

</android.support.constraint.ConstraintLayout>

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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.support.constraint.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="123456"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:text="98765"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:text="abc"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

</android.support.constraint.ConstraintLayout>

Code result

I want "content_main" to be under the "Hellow world!" TextView.

I using RelativeLayout, LinearLayout, ConstraintLayout at "content_main" element. but not work.

I find any solution. But I Just find that How to use ConstraintLayout.

Is Android "include" tag not work at ConstraintLayout?

Solution 1

Android include tag does work with ConstraintLayout, but you need to declare how big is the layout you want to include with the following attributes.

<include
     layout="@layout/content_main"
     android:layout_width="100dp"
     android:layout_height="250dp"
     .../>

For included layout having dynamic height use wrap_content as a value in layout_height or layout_width attributes of include tag.

<include
    android:id="@+id/input_include"
    layout="@layout/task_input"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

After that, your constraints should work.

Solution 2

In the constrain layout define the height and width and your constraints as follows:

<include
    app:layout_constraintTop_toBottomOf="@id/custom_members_toolbar_layout"
    app:layout_constraintBottom_toTopOf="@id/file_xfer_bottom_nav_bar"
    android:layout_height="0dp"
    android:layout_width="match_parent"
    layout="@layout/file_xfer_upload_layout"/>

This will auto resize the height based on your constraints.

Cheers!

Comments

[Ritzor]

Then what is the use of including a layout if in future I will have to change dimensions at every other place where I included it, any work around? I am including a seperator line of size 0.3 dp all over my app and I want to define its height at only one place

[Maciej Beimcik]

The recommended practice is not to use hardcoded values as above. Rather, you create a dimens.xml file in res/values of your Android project where you would add say <resources> <dimen name="included_layout_width">100dp</dimen> ... </resources> and then use it in xml ... android_layout_width="@dimen/included_layout_width"

[Amir Ziarati]

wrap_content and match_parent works too. you just need to specify width and height. they dont have to be just numbers.

[Karan Harsh Wardhan]

the include still doesn't become visible in the design view with this approach, need to manually add constraints

[Nikos Hidalgo]

@kkarakk try using the tools:showIn attribute in your original layout to make it visible in other layouts that include it. developer.android.com/studio/write/…