Фон на FlexLayout и LinearLayout ведет себя по-разному

Question

Я пытаюсь создать приложение для обмена сообщениями.Существует два основных требования:

• Обычный просмотр чата - имя не отображается
• Групповой просмотр чата - имя должно отображаться над сообщением только для первого сообщения (так же, как WhatsApp)

1-й работает нормально.Для этого я использую FlexLayout от Google .Фоновое пузырьковое изображение применяется к FlexLayout.Ниже приведен рабочий XML.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/dp60">

    <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/transaction"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="@drawable/bubble_outgoing_normal"
        app:flexWrap="wrap"
        app:justifyContent="flex_end">

        <TextView
            android:id="@+id/messageText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="@dimen/dp16"
            android:gravity="top"
            android:text="Hello"
            android:autoLink="all"
            android:paddingTop="@dimen/dp2"
            android:paddingBottom="@dimen/dp2"
            android:textColorLink="@color/app_blue"
            android:layout_marginLeft="-10dp"
            android:textColor="@android:color/black"
            android:textSize="16sp" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="@dimen/dp18"
            android:layout_marginBottom="@dimen/dp2"
            android:gravity="bottom"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/transactionDatetime"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="@dimen/dp4"
                android:text="11:15 PM"
                android:textColor="@color/app_font_detail_color"
                android:textSize="12sp" />

            <ImageView
                android:id="@+id/messageStatusImage"
                android:layout_width="@dimen/size_pr_badge"
                android:layout_height="@dimen/size_pr_badge"
                android:src="@drawable/ic_pending"
                />

        </LinearLayout>

    </com.google.android.flexbox.FlexboxLayout>

</RelativeLayout>

И это выглядит так:

Чтобы выполнить второе требование, я попыталсяпоместите представление имени в FlexLayout, но оно не ведет себя должным образом.То, что я сделал, это поместил LinearLayout вокруг FlexLayout и вписал имяНа этот раз фоновый пузырь должен быть применен к родителю, который LinearLayout.Хорошо, когда имя видно, но когда видимость имени равна GONE, LinearLayout не переносит содержимое внутри него, что создает пробел.

Ниже приведен xml (обратите внимание, что фонустановите на LinearLayout и видимость имени будет GONE):

<LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/dp60"
    android:gravity="center_vertical"
    android:id="@+id/transaction"
    android:layout_gravity="right"
    android:background="@drawable/bubble_outgoing_normal">

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="@dimen/dp5"
        android:paddingRight="@dimen/dp6"
        android:visibility="gone"
        android:singleLine="true"
        android:layout_alignParentRight="true"
        android:text="@string/mary_johnson"
        android:textColor="@color/app_font_color"
        android:textSize="@dimen/heading_size" />


    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        app:flexWrap="wrap"
        android:layout_below="@+id/username"
        app:justifyContent="flex_end">

        <TextView
            android:id="@+id/messageText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="@dimen/dp8"
            android:layout_marginLeft="@dimen/dp5"
            android:text="Hello"
            android:gravity="top"
            android:autoLink="all"
            android:textColorLink="@color/app_blue"
            android:textColor="@android:color/black"
            android:textSize="16sp" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="bottom"
            android:layout_marginRight="@dimen/dp4"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/transactionDatetime"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="@dimen/dp4"
                android:text="11:15 PM"
                android:textColor="@color/app_font_detail_color"
                android:textSize="12sp" />

            <ImageView
                android:id="@+id/messageStatusImage"
                android:layout_width="@dimen/size_pr_badge"
                android:layout_height="@dimen/size_pr_badge"
                android:src="@drawable/ic_pending"/>

        </LinearLayout>

    </com.google.android.flexbox.FlexboxLayout>

</LinearLayout>

И это выглядит так:

Я думал о том, чтобы показать имя, а затем показать сообщение в новой строке, но моя текущая логика отображения / скрытия имени и установки пространства между пузырьками не поддерживает это, и было бы очень трудно его реорганизовать.В текущей логике мне нужно отдельное представление для имени.

Любая помощь высоко ценится.