Designing CardView while it's Parent is ConstraintLayout?

Question

I messed up while editing RelativeLayout inside Cardview that contains Relativelayout ! ConstraintLayout will change wrap_content of relative layout to 0 and adds tools:layout_editor_absoluteX="10dp" all textview inside Relative layout will collapse top right of the cardview !!! (element in the nested CardView gets aligned to the element outside of the CardView)

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="357dp"
    android:layout_height="114dp"
    android:layout_margin="5dp"
    app:cardCornerRadius="2dp"
    app:contentPadding="10dp"
    app:cardElevation="10dp"
    tools:layout_editor_absoluteY="36dp"
    app:cardBackgroundColor="@android:color/white"
    tools:layout_editor_absoluteX="11dp">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:layout_editor_absoluteX="10dp"
        tools:layout_editor_absoluteY="10dp">

        <TextView
            android:text="TextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView2"
            tools:text="Location"
            android:textAppearance="@style/TextAppearance.AppCompat.Body2"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />

    </RelativeLayout>

    <ImageView
        android:src="@drawable/ic_hotel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView3"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="0dp"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView3"
        tools:text="Bangalore"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
        tools:layout_editor_absoluteX="10dp"
        tools:layout_editor_absoluteY="10dp"
        android:layout_alignBottom="@+id/imageView3"
        android:layout_toRightOf="@+id/textView2"
        android:layout_toEndOf="@+id/textView2" />
</android.support.v7.widget.CardView>

any guide regarding designing RelativeLayout with ConstraintLayout would be great full, RelativeLayout can't be used anywhere while using ConstraintLayout? what is the guidline to use children of a CardView while using RelativeLayout while CardViews is a children of ConstraintLayout?

Solution

Actually, that's not what the issue tracker implies :-/

To clear it up, the tools:layout_editor_absolute[X/Y] attributes inserted in any children of a ConstraintLayout (even non-direct descendant) was a bug of Android Studio 2.2 preview (it's been fixed since preview 3 or 4 I believe). That said, they did literally nothing other than being present, as anything else than ConstraintLayout wouldn't do anything with them.

Now, for CardView itself -- there are no need for a Nested ConstraintLayout -- CardView is simply a FrameLayout, so if you want to use a ConstraintLayout inside it, everything works.

In parallel, you can put a CardView inside a ConstraintLayout, that works too.

What the issue tracker was asking for was different -- it was asking, in a hierarchy such that ConstraintLayout > CardView > TextView to apply constraints on the TextView. But that's not how the android layout system works, which is why the issue was closed as WorkingAsIntended.

When you add attributes to TextView here, the layout responsible to understand those attributes can only be its direct parent -- in this case, CardView. And CardView is not a subclass of ConstraintLayout, it's a subclass of FrameLayout -- basically, it doesn't know what to do with those ConstraintLayout attributes inserted.

What you could do instead is a hierarchy like:

ConstraintLayout > CardView > ConstraintLayout > TextView

The TextView could then be positioned using constraints, as it would be a direct descendant of a ConstraintLayout viewgroup.

Comments

[LOG_TAG]

Thanks, for the detailed response!, I will give it a try with preview 3 or 4!

[Nicolas Roard]

beta 1 has been released though, probably a better idea :) tools.android.com/recent/androidstudio22betaavailable

[Radu]

Ok, thank for the explanation. But then in that case how is ConstraintLayout resolving deep hierarchy in layouts? Looks to me just as bad as it was with nesting LinearLayouts...

[Dexter]

One hack I use for this is to design cardview in separate layout and then just add it to current hierarchy by copy pasting xml code or using include. This keeps constraints and view separate.