How to AutoSize all four TextViews inside LinearLayout

Question

I have four textViews side by side horizontally inside LinearLayout. They seem fully on large screen sizes.

But in small screen sizes, some of them is not visible to user since they not fit the parent.

How to make all of them autosize to smaller text size on small screen sizes.

Here is my XML. As you can see from below XML, there is one LinearLayout which consist of four TextView. On small size screens, the last textView is not shown to user, since there is not enough space. For small size screen, I should autosize textviews, so that they fit in screen. And all textviews should have same text size

‘’’
<LinearLayout
    android:id="@+id/infoLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="@+id/name"
    app:layout_constraintEnd_toStartOf="@+id/more"
    app:layout_constraintTop_toBottomOf="@+id/name"
    android:paddingTop="6dp"
    >

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawablePadding="2dp"
        android:gravity="center"
        android:textColor="@color/text_black_60"
        android:textSize="12sp"
        android:fontFamily="@font/open_sans_regular"
        android:maxWidth="120dp"
        android:singleLine="true"
        android:ellipsize="end"
        app:drawableStartCompat="@drawable/ic_date"
        app:drawableTint="@color/text_black_60"

        tools:text="11/02/2021" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:drawablePadding="2dp"
        android:gravity="center"
        android:textColor="@color/text_black_60"
        android:textSize="12sp"
        android:fontFamily="@font/open_sans_regular"
        android:maxWidth="100dp"
        android:singleLine="true"
        android:ellipsize="end"
        app:drawableStartCompat="@drawable/ic_time"
        app:drawableTint="@color/text_black_60"
      
        tools:text="11:02 am" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:drawablePadding="2dp"
        android:gravity="center"
        android:textColor="@color/text_black_60"
        android:textSize="12sp"
        android:fontFamily="@font/open_sans_regular"
        android:maxWidth="65dp"
        android:singleLine="true"
        android:ellipsize="end"
        app:drawableStartCompat="@drawable/ic_location"
        app:drawableTint="@color/text_black_60"
        
        tools:text="20" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/distance"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:drawablePadding="2dp"
        android:gravity="center"
        android:textColor="@color/text_black_60"
        android:textSize="12sp"
        android:fontFamily="@font/open_sans_regular"
        android:maxWidth="100dp"
        android:singleLine="true"
        android:ellipsize="end"
        app:drawableStartCompat="@drawable/ic_distance"
        app:drawableTint="@color/text_black_60"
        tools:text="1264 Mi" />

</LinearLayout>
‘’’

Answer 1

Setting width of children to 0 dp and giving them same layout_weight ensures that each child has the same width within a linearlayout.

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="May 13, 2022"/>

<TextView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="8:00 AM 13, 2022" />

<TextView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="20" />

<TextView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="126 Mi"/>

Answer 2

I found the answer myself. Only way to do this is using SpannableString. For the each of four text(date, time, stops, distance) I have created SpannableString by using below method:

private fun spannableString(text: String, iconResId: Int, isLast: Boolean = false): SpannableString {
        val mDrawable: Drawable? = ContextCompat.getDrawable(itemView.context, iconResId)
        mDrawable?.setTint(ContextCompat.getColor(itemView.context,R.color.black_60))
        mDrawable?.setBounds(0, 0, mDrawable.intrinsicWidth, mDrawable.intrinsicHeight)

        val imageSpan = mDrawable?.let { VerticalImageSpan(it) }
        val spannableString = if(isLast) SpannableString("  $text") else SpannableString("  $text   ")

        val start = 0
        val end = 1
        val flag = 0
        spannableString.setSpan(imageSpan, start, end, flag)
        return spannableString
    }

And then concat these four SpannableString with TextUtils.concatas below:

 TextUtils.concat(spannableDateString,
            spannableTimeString,
            spannableStopString,
            spannableDistanceString)

After, set text of TextView with the combined SpannableString, use

    app:autoSizeTextType="uniform"
    app:autoSizeMinTextSize="8sp"
    app:autoSizeMaxTextSize="12sp"

to autosize size of TextView