androidandroid-flexboxlayout

Android FlexboxLayout can't handle long text and messes the UI


I have the following XML -

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/list_selector_background"
        android:clickable="true"
        android:focusable="true"
        android:orientation="horizontal"
        android:paddingTop="10dp"
        android:paddingBottom="10dp">

        <ImageView
            android:id="@+id/changed_activity_image"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:layout_marginStart="14dp"
            tools:src="@drawable/task_complete" />


        <com.google.android.flexbox.FlexboxLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="14dp"
            app:flexWrap="wrap">

            <TextView
                android:id="@+id/changed_activity_operation_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/colorPrimary"
                android:textSize="18sp"
                tools:text="Task has been complete." />

            <TextView
                android:id="@+id/changed_activity_username"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:textSize="16sp"
                android:textStyle="bold"
                app:layout_wrapBefore="true"
                tools:text="You" />

            <TextView
                android:id="@+id/changed_activity_action"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginTop="5dp"
                android:textSize="16sp"
                tools:text="completed" />

            <TextView
                android:id="@+id/changed_activity_task_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginTop="5dp"
                android:textSize="16sp"
                android:textStyle="bold"
                tools:text="Buy 2 bottles of dish soap" />


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginTop="5dp"
                android:text="@string/activities_list_view_holder_in"
                android:textSize="16sp" />

            <TextView
                android:id="@+id/changed_activity_group_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:textSize="16sp"
                android:textStyle="bold"
                app:layout_wrapBefore="true"
                tools:text="Galipoly 38 Tel Aviv Apt." />

            <TextView
                android:id="@+id/changed_activity_date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:textColor="@color/grey_text"
                android:textSize="16sp"
                app:layout_wrapBefore="true"
                tools:text="July 8, 19:15 2020" />

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


    </LinearLayout>


</layout>

The issue is that it works the following with small amounts of text -

enter image description here

which is the expected way

But when the task name is long, the following happen -

enter image description here

It seems to linebreak for no reason when long text appears

How do I fix this issue so that the text will continue on the same line?


Solution

  • I think Instead of using multiple TextView inside FlexboxLayout, you can use one TextView and SpannableStringBuilder to styling the TextView

    Like this

        val username = "Alon Shlider"
        val activity = "Buy a toilet paper and 2 bottle of dish"
        val place = "Galipoly 38 Apt"
        val updated = "Updated"
        val inside = "in"
        val text = "$username $updated $activity $inside $place"
    
        val spannableStringBuilder = SpannableStringBuilder(text)
        spannableStringBuilder.setSpan(
            StyleSpan(Typeface.BOLD),
            0,
            username.length,
            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
        )
        spannableStringBuilder.setSpan(
            StyleSpan(Typeface.BOLD),
            username.length + updated.length + 2,
            username.length + updated.length + activity.length + 2,
            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
        )
    
        spannableStringBuilder.setSpan(
            StyleSpan(Typeface.BOLD),
            username.length + updated.length + activity.length + inside.length + 4,
            username.length + updated.length + activity.length + inside.length + place.length + 4,
            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
        )
        textView.setText(spannableStringBuilder, TextView.BufferType.SPANNABLE)