This week’s tech talk is about how to implement adaptive text sizing in Android. Imagine that in a layout, the size of the area that displays text is usually fixed, but the length of the text is not always fixed. Such as article titles in lists, button text at the bottom of the interface, and so on. To make the text as visible as possible, the traditional approach is to set the size of the text by the length of the text, or to set the ellipsis of the text through the Android: EllipSize attribute, etc. In fact, since Android O, the Android API has introduced a simple implementation of adaptive text sizes. It works not only with TextViews, but also with controls such as buttons that have text displays. With Android X, you can also adapt to lower versions of Android. Let’s use TextViews as an example to see how to use them.

Enable the adaptive display mode

We create a new project in the Empty Activity mode, which by default contains only Hello World! TextView control for text, which we give an ID and modify the size and default text. To be compatible with lower versions of Android devices, use the AppCompatTextView provided in Android X instead of TextView. The complete layout file is as follows:


      
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/activity_main_tv"
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:text="abcdefghijklmno"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

Then, running the program, you can see that the display of the text only stops at the letter “N”, and the “O” is not displayed. Obviously, this is because the size of the text box limits the display of the text.

Here, we came to MainActivity code, call setAutoSizeTextTypeWithDefaults (); Method to enable adaptive scaling.

private AppCompatTextView demoTv;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    demoTv = findViewById(R.id.activity_main_tv);
    demoTv.setAutoSizeTextTypeWithDefaults(TextView.AUTO_SIZE_TEXT_TYPE_UNIFORM);
}
Copy the code

After re-running, you can see that the text is displayed in its entirety:

For setAutoSizeTextTypeWithDefaults (); Textview. AUTO_SIZE_TEXT_TYPE_UNIFORM and textView. AUTO_SIZE_TEXT_TYPE_NONE. Indicates whether to enable adaptive text size.

Custom text zoom

Next, we modify the text of the TextView and continue to append:

android:text="abcdefghijklmnopqrstuvwxyz"
Copy the code

Running the App again, we found: whether the adaptive mode is switched on or not, all the text cannot be displayed completely. At this point, we need to customize the automatic scaling of the text size.

Setting the zoom configuration

I’ll start by showing you a way to customize scaling by setting the scaling configuration. Let’s start with the code:

demoTv.setAutoSizeTextTypeUniformWithConfiguration(4.15.2, TypedValue.COMPLEX_UNIT_SP);
Copy the code

As shown in the code, setAutoSizeTextTypeUniformWithConfiguration (); Is the key to achieve this scaling mode, which consists of four parameters.

  • 4: indicates the minimum value of text zoom;
  • 20: indicates the maximum text zoom;
  • 2: indicates the try step of text zooming;
  • TypedValue.COMPLEX_UNIT_SP: specifies that SP is used as the unit for the first three parameters.

It is understood that when the text cannot be fully displayed, the system will decrease the text size set value in steps until the text is fully displayed, or the trial value is less than the minimum value for the given text zoom. Re-run the App and you can see that the text is fully displayed.

Defining default Values

The second way to customize scaling is by defining default values. Let’s go straight to the code:

demoTv.setAutoSizeTextTypeUniformWithPresetSizes(new int[] {9.11.13.15}, TypedValue.COMPLEX_UNIT_SP);
Copy the code

Through setAutoSizeTextTypeUniformWithPresetSizes (); Method defines a default value. It takes two arguments. The first is the value of the default value. The second is the unit of the default value. For example, the text size can only be 9SP, 11SP, 13SP, and 15SP when zooming. Unfortunately, even with 9SP, the text is still not fully displayed:

If you look closely at the second line of the picture, you can see that a paragraph has been cut out at the bottom of the text due to insufficient height.

summary

To sum up, we have explained three ways to automatically scale text. These three methods are not better than each other, just the difference in the use scenario. With them, we don’t have to define different text sizes ourselves, let alone implement adaptive text scaling ourselves. Finally, a special note: Always use the AppCompatTextView control in YOUR XML and Java code, unless your App only supports Android O or later. This time to share here, I hope the above content is helpful to you.