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>

@DavidMedenjak now I set weight of first view to 0.7 and something starts to be ok. But In this case second view is not in the end of parent view. — Ekalips, Jan 13 '17 at 11:43

score 4 · Answer 1 · answered Aug 27 '21 at 06:21

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:

score 0 · Answer 2 · answered Jan 13 '17 at 11:26

0

if your textviews in linearlayout you can add weightSum method

answered Jan 13 '17 at 11:26

R.Anjali

181
1
9

http://stackoverflow.com/questions/15696920/android-layout-layoutweight-and-weightsum – R.Anjali Jan 13 '17 at 11:28

score 0 · Accepted Answer · answered Jan 13 '17 at 11:27

0

I am not sure this will help you or not but: Use: https://github.com/ApmeM/android-flowlayout

<org.apmem.tools.layouts.FlowLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

</org.apmem.tools.layouts.FlowLayout>

Inside FlowLayout you can put your view's and it will auto move to next line if not fit.

answered Jan 13 '17 at 11:27

Ganesh Katikar

2,620
1
26
28

That's almost that I wanted! Maybe you know how to make second `TextView` in it align right side of view, if it was moved to next line? – Ekalips Jan 13 '17 at 11:32
I am not sure about that, but definitely it will auto fit in a row if space is available otherwise it will moves to the next line. – Ganesh Katikar Jan 13 '17 at 11:37
Yes, it moves second View in next row, but it appears to be in the beginning of the row, when I want it to be in the end. Setting second View layout_width to match_parent doesn't help. – Ekalips Jan 13 '17 at 11:39
What is second view? I mean if second view is Relative layout and inside this layout you put text view. In that case you can set relative layout width as match_parent and text view inside this layout set width wrap_content with android:layout_alignParentRight="true" to text view. Hope it will work for you. Its just idea, you can try with different point of views. – Ganesh Katikar Jan 13 '17 at 11:44
One more solution in library itself: To change layout direction use the following code xmlns:f="http://schemas.android.com/apk/res/your.namespace" f:layoutDirection="rtl" – Ganesh Katikar Jan 13 '17 at 11:46
No, layoutDirection and android:layout_alignParentRight didn't help. – Ekalips Jan 13 '17 at 11:54

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

Update 1

Update 2

3 Answers3