CODEWITHSUNDEEP
androidandroid-studioandroid-layoutandroid-constraintlayout
Alen
Alen

Reputation: 979

Included ConstraintLayout with merge tag doesn't work

This is my qff_layout.xml file

<merge
xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">
<androidx.constraintlayout.widget.ConstraintLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <com.google.android.material.textview.MaterialTextView
            android:id="@+id/questions_label"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/questions"
            android:textSize="@dimen/text_normal"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintEnd_toStartOf="@+id/followers_label"
            app:layout_constraintTop_toTopOf="parent"/>

    <com.google.android.material.textview.MaterialTextView
            android:id="@+id/followers_label"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/followers"
            android:textSize="@dimen/text_normal"
            app:layout_constraintStart_toEndOf="@+id/questions_label"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintEnd_toStartOf="@+id/following_label"
            app:layout_constraintTop_toTopOf="parent"/>

    <com.google.android.material.textview.MaterialTextView
            android:id="@+id/following_label"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/following"
            android:textSize="@dimen/text_normal"
            app:layout_constraintStart_toEndOf="@+id/followers_label"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    <com.google.android.material.textview.MaterialTextView
            android:id="@+id/questions_number"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="@dimen/text_normal"
            android:textStyle="bold"
            tools:text="0"
            app:layout_constraintStart_toStartOf="@+id/questions_label"
            android:layout_marginEnd="8dp"
            app:layout_constraintEnd_toEndOf="@+id/questions_label"
            android:layout_marginRight="8dp"
            app:layout_constraintTop_toBottomOf="@+id/questions_label"/>

    <com.google.android.material.textview.MaterialTextView
            android:id="@+id/followers_number"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="@dimen/text_normal"
            android:textStyle="bold"
            tools:text="0"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            app:layout_constraintStart_toEndOf="@+id/questions_label"
            app:layout_constraintEnd_toStartOf="@+id/following_label"
            app:layout_constraintTop_toBottomOf="@+id/followers_label"/>


    <com.google.android.material.textview.MaterialTextView
            android:id="@+id/following_number"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="@dimen/text_normal"
            android:textStyle="bold"
            tools:text="0"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            app:layout_constraintStart_toStartOf="@+id/following_label"
            app:layout_constraintEnd_toEndOf="@+id/following_label"
            app:layout_constraintTop_toBottomOf="@+id/following_label"/>

</androidx.constraintlayout.widget.ConstraintLayout>
</merge>

This displays 6 textviews in two rows, something you would see in instagram app in profile section with Posts-Followers-Following and bellow numbers under each of those. Now the problem is when I include that in my main layout which is ConstraintLayout: profile_fragment.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:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <androidx.appcompat.widget.Toolbar
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:theme="?attr/actionBarTheme"
            android:minHeight="?attr/actionBarSize"
            android:elevation="4dp"
            android:id="@+id/title"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

    <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/profile_image"
            android:layout_width="80dp"
            android:layout_height="80dp"
            app:srcCompat="@drawable/ic_profile_24dp"
            tools:src="@drawable/ic_profile_24dp"
            app:civ_border_color="@color/secondaryDarkColor"
            app:civ_border_width="1dp"
            android:layout_marginTop="@dimen/spacing_normal"
            android:layout_marginStart="@dimen/spacing_normal"
            android:layout_marginLeft="@dimen/spacing_normal"
            app:layout_constraintTop_toBottomOf="@+id/title"
            app:layout_constraintStart_toStartOf="parent"/>

    <com.google.android.material.textview.MaterialTextView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:id="@+id/description"
            android:layout_marginEnd="@dimen/spacing_normal"
            android:layout_marginRight="@dimen/spacing_normal"
            android:layout_marginLeft="@dimen/spacing_normal"
            android:layout_marginStart="@dimen/spacing_normal"
            app:layout_constraintStart_toEndOf="@+id/profile_image"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="@+id/profile_image"
            app:layout_constraintTop_toTopOf="@+id/profile_image"/>

    <include
            layout="@layout/qff_layout"
            android:id="@+id/qff_layout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/spacing_small"
            app:layout_constraintTop_toBottomOf="@+id/profile_image"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"/>

    <com.google.android.material.tabs.TabLayout
            android:id="@+id/sliding_tabs"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@color/primaryLightColor"
            app:tabMode="fixed"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/qff_layout"/>

    <androidx.viewpager.widget.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@android:color/white"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/sliding_tabs" />

</androidx.constraintlayout.widget.ConstraintLayout>

Nothing gets displayed.
I tried changing my main layout to linear and it's the same.
But when I remove merge tag from qff_layout.xml and use the same include tag in main layout it works well and displays the qff_layout, How??Why??
What is the use of merge tag then, please do not quote something from the stupidest documentation ever because it makes no sense.

Upvotes: 0

Views: 1954

Answers (1)

UrosKekovic
UrosKekovic

Reputation: 970

You should use merge when you dont want to repeat same ViewGroup. In this case, it could save you from not using two nested ConstraintLayouts - you could remove ConstraintLayout from qff_layout.xml and use merge as your root element like:

<merge
xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <!-- your text view -->
</merge>

If your ConstraintLayout in qff_layout.xml has some other purpose, you just leave it, and include qff_layout.xml without merge as root element.

In other words merge purpose is to replace root ViewGroup. Read more here.

UPDATE:

You can fix your XML this way without removing marge.

Positioning constraints you defined on element, should be also applied on your ConstraintLayout inside qff_layout.xml like:

<merge
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/qff_layout"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/spacing_small"
        app:layout_constraintTop_toBottomOf="@+id/profile_image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <!-- your text view -->

    </androidx.constraintlayout.widget.ConstraintLayout>
</merge>

Why you need to apply this: When you put layout inside element it will basically get pasted in the line you include it. When you don't define constraints for some layout inside ConstraintLyout, it jumps to the top left corner of the screen and thats what happend to layout you included. It didnt have defined constraints inside qff_layout.xml that will apply when it gets included, so it jumped to the top left corner.

Upvotes: 1

Related Questions