How to flexible new line textview and hide an item in FlexboxLayout?

443 Views Asked by At

What I want to do is when the description is short, I wanna keep divider and description in the same line.enter image description here

<com.google.android.flexbox.FlexboxLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:flexWrap="wrap"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/car"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginVertical="8dp"
            android:layout_marginStart="16dp"
            android:textSize="20sp"
            tools:text="Car" />

        <View
            android:id="@+id/divider"
            android:layout_width="1dp"
            android:layout_height="16dp"
            android:layout_marginVertical="14dp"
            android:layout_marginStart="8dp"
            android:background="#9ca0ab" />

        <TextView
            android:id="@+id/description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginVertical="8dp"
            android:layout_marginHorizontal="16dp"
            android:textSize="20sp"
            tools:text="718 models" />

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

If the description is too long, I wanna make it new line and hide the divider.enter image description here

<com.google.android.flexbox.FlexboxLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:flexWrap="wrap"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/car"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginVertical="8dp"
            android:layout_marginStart="16dp"
            android:textSize="20sp"
            tools:text="Car" />

        <View
            android:id="@+id/divider"
            android:layout_width="1dp"
            android:layout_height="16dp"
            android:visibility="gone"
            android:layout_marginVertical="14dp"
            android:layout_marginStart="8dp"
            android:background="#9ca0ab" />

        <TextView
            android:id="@+id/description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginVertical="8dp"
            android:layout_marginHorizontal="16dp"
            android:textSize="20sp"
            tools:text="The 718 models were made for the sport of it. They are mid-engined roadsters that unite the sporting spirit of the legendary Porsche 718 with the sports car of tomorrow – and transfer it to the roads of today’s world. With one goal: to take the everyday out of every day." />

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

I'm using FlexboxLayout to deliver this but not sure how to detect is there any new line for hide and show the divider. Or is there any better way to achieve this ? thx

1

There are 1 best solutions below

0
On

you can use

app:dividerDrawableHorizontal="@drawable/horizontal_divider" app:dividerDrawableVertical="@drawable/vertical_divider" app:showDivider="middle"

here horizontal_divider/vertical_divider can be any drawable or shap