Android Studio designer preview differs from what is seen on device

Question

I have a layout in Android Studio, that renders correctly in the preview of Android Studio, but on actual phones, it differs. Preview: Android Studio preview
Phone screen: Actually seen
I use a <ViewStub> that is contained within a FrameLayout, and it is inflated with different contents at run time, in this example with a button. The rename field is GONE by default, and is made visible when the rename chip is pressed. The done button is also on the top of the card.

The XML is:

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

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_weight="1"
        android:text="name"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/name">

        <ViewStub
            android:id="@+id/card_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </FrameLayout>

    <com.google.android.material.chip.ChipGroup
        android:id="@+id/chipGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/frameLayout"
        app:layout_constraintVertical_bias="0.0">

        <com.google.android.material.chip.Chip
            android:id="@+id/delete"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="false"
            android:text="delete"
            app:checkedIconVisible="false"
            app:chipIconVisible="false"
            app:closeIconVisible="false" />

        <com.google.android.material.chip.Chip
            android:id="@+id/rename"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="false"
            android:text="rename"
            app:checkedIconVisible="false"
            app:chipIconVisible="false"
            app:closeIconVisible="false" />

    </com.google.android.material.chip.ChipGroup>

    <EditText
        android:id="@+id/newname"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:ems="10"
        android:hint="Enter new name..."
        android:inputType="text"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/done"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chipGroup"
        app:layout_constraintVertical_bias="0.0"
        tools:visibility="visible" />

    <Button
        android:id="@+id/done"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginEnd="8dp"
        android:text="done"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="@+id/newname"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/newname"
        tools:visibility="visible" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

Is think the issue is that your frame layout has android:layout_height="match_parent" . This is likely to cause issues. Try setting the height to a fixed value or wrap content, depending on the views you're adding into the Stub.

If I was implementing this I'd probably use a vertical LinearLayout instead of ConstraintLayout and have a second LinearLayout for the text field and button. I find that overuse of ConstraintLayout often leads to weird layout issues.