Move View to "next line" if it doesn't fit

Question

So, idea in this: I have two TextViews, first can expand whatever it wants, second always 5 chars (time). Problem is in that first TextView can easily push second out of the screen.

So, what I need is something like adjustable LinearLayout, or maybe some GridLayout that will move second TextView on some sort of second line if it doesn't fit parent.

For example you can watch at message bubbles in Viber and WhatsApp. Thanks for any advise.

Update 1

Here is XML that i have now (Only message part)

              <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/messageBox"
                android:layout_gravity="center_vertical"
                android:gravity="center_vertical">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_gravity="center_vertical"
                    android:gravity="center_vertical"
                    android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium"
                    android:textColor="@color/black"
                    android:text='@{mess.message}'/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center_vertical|end"
                    android:gravity="center_vertical|end"
                    android:paddingLeft="8dp"
                    android:textSize="12sp"
                    android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                    android:text='@{Utils.parseMillsToHoursAndMins(mess.date)}'/>
            </LinearLayout>

Update 2

So I added layout_weight to first TextView, that helped with my first problem, but now I have new one. This two TextViews are in LinearLayout which is in another LinearLayout with another TextView. Parent LinearLayout have width set to wrap_content so if top TextView will be bigger than 2 TextViews it will cause child LinearLayout to be less than it's parent, and 2nd TextView (from that 2) wouldn't be in the end of parent. But when child LinearLayout is bigger, all appears to be OK. I know it's complicated, so this is XML

<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="0dp"
            android:id="@+id/contentPanel"
            app:bringToFront="@{true}"
            android:orientation="vertical"
            android:background="@{(mess.isMine?@drawable/chat_bubble_right:@drawable/chat_bubble_left)}">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text='@{!mess.authorRole.equals("Client")?(mess.authorRole + " - " + mess.author):mess.author}'
                android:textColor='@{mess.authorRole.equals("Lawyer")?@color/colorPrimary:mess.authorRole.equals("Admin")?@color/red:@color/green}'
                android:textSize="12sp"
                android:id="@+id/author"
                android:fontFamily="sans-serif-medium"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"/>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/messageBox">
                <TextView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_gravity="center_vertical"
                    android:gravity="center_vertical"
                    android:layout_weight="0.7"
                    android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium"
                    android:textColor="@color/black"
                    android:text='@{mess.message}'/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:paddingLeft="8dp"
                    android:textSize="12sp"
                    android:gravity="bottom|end"
                    android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                    app:checkFit="@{false}"
                    android:text='@{Utils.parseMillsToHoursAndMins(mess.date)}'/>
            </LinearLayout>
        </LinearLayout>

Answer 1

The new approach for achieving such behaviour is using ConstraintLayout with Flow. Here is an example of usage:

<androidx.constraintlayout.helper.widget.Flow
                        android:id="@+id/socialsButtonsFlow"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="6dp"
                        app:flow_horizontalGap="8dp"
                        app:flow_verticalGap="4dp"
                        app:flow_wrapMode="aligned"
                        app:flow_horizontalStyle="spread_inside"
                        app:constraint_referenced_ids="vkButton,twitterButton,facebookButton,youtubeButton,instagramButton,odnoklassnikiButton,tiktokButton"
                        app:layout_constraintEnd_toEndOf="@id/socialsLabel"
                        app:layout_constraintStart_toStartOf="@+id/socialsLabel"
                        app:layout_constraintTop_toBottomOf="@+id/socialsLabel" />

For small screens it looks like this: