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>
‘’’
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