IssueTracker

ConstraintLayout version: 2.0.0-beta4

I have a real world app that was working fine with the setup described below using various versions of ConstraintLayout up to and including v2.0.0-beta2. Without making any other changes, I updated to ConstraintLayout v2.0.0-beta3 and this problem appeared, and it continues to appear in v2.0.0-beta4 (the attached demo app uses 2.0.0-beta4). Until this is resolved, my app is stuck using the old/outdated v2.0.0-beta2, which also means I cannot update my gradle plugin to version 3.6 due to another issue: https://issuetracker.google.com/issues/136103084

The problem:

With the following "Main layout" (see below) that contains a ViewPager2 who's height is set to "match constraints" and another view who's visibility is "gone" (this is the lynch pin reproducing the problem), any child ConstraintLayouts (see "Child layout" below) that are rendered inside of the ViewPager2 and have views with heights of "match constraints" do not get their heights set appropriately. Instead the child views with "match constraints" height get "hard coded" to 0dp tall (i.e. the height is treated as a literal 0dp and not as "match constraints").

To be clear, there are several pre-conditions that have to be true in order to produce this issue:

1. A ConstraintLayout that contains multiple views, and one of those views is a ViewPager2 with layout_height="0dp" (match constraints).
2. One of the other views in the ConstraintLayout has it's visibility set to "gone".
3. A "child" layout is used in the ViewPager2 that contains a ConstraintLayout with layout_height="match_parent", and one of the views in the child ConstraintLayout has a layout_height="0dp"

When these conditions are present, The views are not rendered correctly. The ViewPager2 correctly renders with it's height
properly "stretching" to match it's constraints. Since the child ConstraintLayout has a layout_height="match_parent", the expected behavior would be that it fills the ViewPager2's height. But that doesn't happen. Instead, the view in the child Layout that has layout_height="0dp" gets rendered with a 0 pixel height, instead of using match_constraints.

The 2 layout files below (and attached demo application that uses them) show the problem

<!-- Main Layout - Fills the screen, width and height are match_parent -->
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <!-- a fixed height view that is set to visibility="gone" -->
    <!-- in my real app, the container is a MotionLayout and visibility of this view gets toggled during transitions. -->
    <TextView android:id="@+id/top_view"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:visibility="gone" />

    <!-- ViewPager2 that has height="match constraints" and fills the rest of the screen -->
    <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintTop_toBottomOf="@id/top_view"
            app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>



<!-- Child Layout - Loaded in the ViewPager2, and fills the whole viewpager area, width and height are match_parent -->
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

<!-- a fixed height view, renders correctly -->
<TextView android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

<!-- another view, with height of "match constraints" and constraints set to fill the rest of the parent -->
<!-- THIS VIEW DOES NOT GET RENDERED PROPERLY. IT DOES NOT FILL THE PARENT. IT GETS RENDERED WITH 0PX HEIGHT -->
<TextView android:id="@+id/constraint_view"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/text_view"
    app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>


In an app that uses the 2 layouts above, the "constraint_view" TextView in the Child Layout will not be displayed (it will have 0 height). See the attached screen shot "problem-view hidden" to see this. If you change the visibility on the TextView in the Main Layout to be visibility="visible", then the issue goes away, the "constraint_view" in the Child Layout not gets it's height set properly using match constraints and becomes visible. See the attached screen shot "working-view visible" to see it.

The screen shots and demo app use background and outlines on the views to demonstrate the problem:
The ViewPager2 has a yellow background.
The Child Fragment (ConstraintLayout) that is loaded in the ViewPager2 has a red outline.
The text_view (which shows up) in the Child Fragment has a green background.
The constraint_view (which is the problem view that doesn't show up) has a purple background.
The top_view (which has visibility="gone") in the Main Fragment is set to use a grey background.


The attached demo application shows the problem and provides 2 scenarios. When first launched the problem is demonstrated using a Fragment with MotionLayout as the primary layout, demonstrating a real world scenario where this problem comes up. Using the app, you can also toggle to show a different Fragment that uses ConstraintLayout as the primary layout. This demonstrates the root problem, which seems to be with ConstraintLayout and not MotionLayout. The demo app also uses background colors and outlines so that you can see the different views that are rendered on the screen.

When you run the app, you will see that the ViewPager2 (which has a light yellow background) correctly fills the screen, but the Child Layout inside of it does not fill the screen, and in fact the "constraint_view" TextView is not visible at all. In the demo app, you can click on the "play button" icon in the options menu to toggle the Transition in the motion scene, which makes the "top_view" in the Main Layout visible. When you do that, you will see the child layout now get rendered correctly, with it's "constraint_view" becoming visible and filling the rest of the screen. Interestingly, at this point, if you now use the options menu button to toggle the transition back and forth, the views remain correctly rendered all the time.

In the demo application, if you click the other button in the options menu, it will toggle to a different "ConstraintFragment" that uses a ConstraintLayout instead of a MotionLayout. This isolates the issue to ConstraintLayout, removing the MotionLayout from the equation.