Too much text? Control too small? Try TextView's new feature Autosizing!

Hi, everyone, I am Chengxiang Ink shadow!

Android 8.0 has been around for a while now, and if you’ve been following it, you probably know that it has a new feature for TextView font sizes: Autosizing.

The new feature itself, if only available on Android 8.0, will be a bit of a drag for developers and may take some time to become widely available. However, Autosizing is compatible with Android Support V26 up to Android Level 14.

With that in mind, this article will cover all the details of how you use Autosizing.

What is Autosizing?

Autosizing allows TextView to dynamically adjust the size of its TextSize property based on the size of its internal text display. With Autosizing, developers can easily optimize the size of text on different screens with dynamic content.

To put it simply, a 100DP TextView can normally display only 10 10DP text, but if its content is more than 10 characters, the general practice is to set the property to display “… “at the end of the TextView. . Autosizing is a new feature that reduces the font size to 8DP, for example, so that TextView can hold more text and display more fully. With Autosizing, it’s easy to set a few properties.

The Gif above should be an intuitive illustration of the nature of Autosizing. It also shows that Autosizing can be triggered to recalculate TextSize in one of two ways:

The text in the TextView grew to more than it could contain.
The TextView itself has been enlarged or reduced in size.

The idea behind Autosizing is to make the text appear as fully as possible in the TextView, even if the text size is changed.

2. Use Autosizing

2.1 Different ways of using Autosizing

As mentioned earlier, using Autosizing is the difference between using the Android Api Level 26 (8.0) and using the Support Library V26. They’re going to be used a little bit differently.

Let’s take a look at the differences.

Autosizing is a simple way to dynamically modify the TextSize based on the content of the text. It can be used with dynamic encoding and static layouting-XML layout attributes.

For Android 8.0 apis:

Dynamic encoding is a method that operates directly on a TextView.
The layout-xml layout property is usedandroid:Properties under the namespace.

<?xml version="1.0" encoding="utf-8"? >
<TextView
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:autoSizeTextType="uniform" />
Copy the code

On devices lower than Android 8.0, you can only use Support V26. At this point, there’s no corresponding method on the TextView that we can call, so we need to go around it.

Dynamically coded, using the methods provided in TextViewCompat.
Layout-xml layout attribute, which is requiredapp:Properties under the namespace, remember to addxmlns:app="http://schemas.android.com/apk/res-auto"This namespace.

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

  <TextView
      android:layout_width="match_parent"
      android:layout_height="200dp"
      app:autoSizeTextType="uniform" />
</LinearLayout>
Copy the code

The usage scenarios using standard 8.0 apis are very limited at this stage, so we will only briefly understand the differences here. The following articles will mainly be explained in Support of V26.

2.2 Autosizing base

By now, you should have a basic idea of what Autosizing does.

So, if you were to design a feature like this, what would you want to do?

There is a switch restriction that only turns this feature on on the TextView we need.
Allows setting boundary values, maximum and minimum scaling.
You can set the minimum size for each scaling, for example, 10sp.
The ability to preset some zoom location dimensions, for example, to preset a set of dimensions and select only one value from that range.
A convenient Api that allows you to manipulate it through layout-XML attributes and dynamic encoding.

Well, that’s about it functionally. It’s all I need.

If you look at Autosizing’s documentation, it supports it all!

Autosizing TextView Doc:

https://developer.android.google.cn/guide/topics/ui/look-and-feel/autosizing-textview.html

2.3 Autosizing switch

Autosizing applies directly to the TextView, and can be turned on or off using the autoSizeTextType property.

For dynamic code, can use TextViewCompat setAutoSizeTextTypeWithDefaults () method, the following is the method signature.

The textView in parameters is the textView that we’re going to operate on, and autoSizeTextType is the switch property of Autosizing that we care about, which takes two arguments.

AUTO_SIZE_TEXT_TYPE_NONE: disables the automatic adjustment function.
AUTO_SIZE_TEXT_TYPE_UNIFORM: Enables uniform scaling of the fragmentation axis and vertical axis.

We can also set autoSizeTextType as a layout-xml attribute. Because it is Support, we use the app: namespace attribute.

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

  <TextView
      android:layout_width="match_parent"
      android:layout_height="200dp"
      app:autoSizeTextType="uniform" />

</LinearLayout>
Copy the code

App :autoSizeTextType also accepts two parameters, uniform and None, with the same meaning as those set in the code above.

2.4 Operate the granularity of Autosizing

Size is the smallest unit of Autosizing per change, but you also need to set a scale range, a maximum and a minimum.

This way, when Autosizing is in effect, it will dynamically resize text to the size we set within the range.

Want to operate these attributes, you need to call TextViewCompat setAutoSizeTextTypeUniformWithConfiguration dynamic encoding () method.

The parameters are straightforward, there’s nothing to explain, a minimum, a maximum, varying granularity, units of size set earlier.

Unit (sp, dp, px); TypedValue (sp, dp, px);

The parameters of this operation are provided with corresponding attributes in layout-XML for us to use.

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

  <TextView
      android:layout_width="match_parent"
      android:layout_height="200dp"
      app:autoSizeTextType="uniform"
      app:autoSizeMinTextSize="12sp"
      app:autoSizeMaxTextSize="100sp"
      app:autoSizeStepGranularity="2sp" />

</LinearLayout>
Copy the code

Let’s take two examples to make it clear.

By default, if you don’t set these three properties, Autosizing will estimate a maximum and minimum value based on the size of the current TextView control and set the granularity to 1sp.

As you can see, it’s jumpy, it’s very uncontrollable, and it’s hard to know how big the text is going to be the next time we zoom in, so we need to use the concept of granularity to limit how much it’s going to zoom in.

For example, now let’s change the above example to limit (minSize,maxSize) to between (10sp,80sp) and set the Granularity to 10sp.

As you can see here, every time it zooms in or out, the granularity is based on 10sp.

So, if you need to use Autosizing, it is highly recommended that you use granularity to control how much it is scaled so that it can be used within control. Note that the three properties described here must be set within a reasonable range, otherwise the TextView will consider them invalid and ignore them.

2.5 Preset size range

If you set the size of Autosizing according to the properties described in the previous section, you can scale within this range to the size we set. In general, using granularity for control is pretty much what we want, but for more precise scaling, such as [10.15,40,60,100], granularity is not enough.

Autosizing also provides a Preset attribute for such an operation, known as Preset Size.

If you want to use the default size, dynamic coding way, you will need to operate TextViewCompat setAutosizeTextTypeUniformWithPresetSizes () method.

The default size accepts an array of sizes, and Autosizing takes one of the sizes from the array. You can also set a uniform size unit for these dimensions.

If you want to use the default size as an attribute in layout-xml, you first need an array of resources and then set it to the autoSizePresetSizes attribute.

Array resource format:

<resources>
  <array name="autosize_text_sizes">
    <item>10sp</item>
    <item>12sp</item>
    <item>20sp</item>
    <item>40sp</item>
    <item>100sp</item>
  </array>
</resources>
Copy the code

Once you have defined the size resource for your array, you can use it in layout-XML.

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

  <TextView
      android:layout_width="match_parent"
      android:layout_height="200dp"
      app:autoSizeTextType="uniform"
      app:autoSizePresetSizes="@array/autosize_text_sizes" />
</LinearLayout>
Copy the code

The preset size is very simple, so I don’t want to run it here.

Three, check gaps and fill gaps

At this point, we’ve covered the basic details of how Autosizing works. However, there are still some concepts that are not reflected in the documentation, and we will talk about these “lessons” below.

3.1 TextView must be limited in size

If you want to use Autosizing, you must limit the size of the TextView control and not use wrap_content as the qualifier.

In official documentation, using wrap_content can have unexpected effects. In fact, this is also very easy to understand, if the size of TextView is not fixed, there is no basis for TextView to recalculate the size, compared to the enlargement of TextView can achieve the effect of containing text.

I’ve found in practice that it prevents magnification. For example, a TextView with Autosizing will shrink if you keep adding text, but when you delete text, it won’t make the text larger.

However, I am not sure if there are any other problems. It is suggested to operate according to the official document and limit the size of the TextView.

3.2 Autosizing does not work in EditText

Although new properties typically apply to TextView, they apply equally to controls that also display text, such as Button, EditText, and so on.

But Autosizing is so special that it only works for controls that simply display text, such as a Button, but not for controls that can enter text, such as EditText.

This, you can be in this class AppCompatTextViewAutoSizeHelper supportsAutoSizeText () method to find the answer, it is a compatible class, for backward compatibility Autosizing features.

You can see here that anything that isn’t appeditText returns true, and the comments indicate that.

Temporarily did not think of the reason for this design, may be because the input text control, its length is often changing, is an extremely uncontrollable situation, so should be input control, limit a fixed size.

3.3 Not all preset sizes are hit

If you want to control the size of the text to a limited range, for example, using granularity to limit it to a 10sp precision; Or we can use a preset size and limit it to some size that we want it to use.

But that’s not necessarily true.

For example, we use the preset size, preset a set of [10sp,20sp,25sp,40sp], such a set of sizes, where a size may never be hit, such as 25sp.

This is because Autosizing works by calculating the size, so if you reduce text after 20sp, you get 25sp first, then 25SP won’t fit, so you jump straight to 40sp.

So, it’s not the size we set, it’s the linear way to get the size.

3.4 Conflicts with singleLine

If you wanted to display only one line of text in a TextView, you could have marked it with the Android :singleLine property earlier. If your colleague uses Autosizing, you’ll notice that Autosizing no longer works and will say “… “at the end. .

Fortunately, Android :singleLine has been marked deprecated, so we don’t recommend using it per se. If you want TextView to display only one line of text, you can use android:maxLines=”1″. It is normal and Autosizing compatible.

Four, use scenarios

Autosizing is simple enough to say, but how does it apply? Just a few of the scenarios THAT I can think of, so you can keep your mind open.

4.1 Define the UI of the entry

And this, in fact, is very common, for example, in some of the multiple choice uIs, when you have multiple UIs that you need to choose the answer to, they’re displayed side by side. If their text length is variable (and it usually is), you can now use Autosizing to control the size of a line, in addition to enlarging its height.

For example, the recently popular Chongding Conference App is a standard multiple choice UI layout.

We can use Autosizing to reduce the size of the answer when it is too much text to fit into the UI.

4.2 more than language

Autosizing can also shine in App multilingual adaptations.

The first thing you need to consider is that when you’re trying to adapt your App to multiple languages, one of the biggest problems is that different languages can describe the same word in different lengths.

For example, a simple sentence in Chinese reads: “I am an Android developer, and the length is inconsistent in different languages.”

English: I am an Android developer
Arabic: أن translumtranslumtranslumtranslumtranslumtranslumplanet وت
Italian: Sono Uno Sviluppatore Android
German: Ich bin ein Android-Entwickler
French: Je Suis UN developpeur Android

In this case, Autosizing is a great way to solve the problem.

Five, the summary

This article has covered all the details of Autosizing, from basic usage to considerations.

What other scenarios do you think Autosizing might be used in? Feel free to share in the comments!

Today in the background of chengxiang Ink shadow public account, reply “growth”. I will send you some of my collation of learning materials, including: Android decompile, algorithm, design pattern, virtual machine, Linux, Kotlin, Python, crawler, Web project source.

In addition, I maintain a technical exchange group. If you are interested, you can reply in the background of the public account: “Add group”.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Too much text? Control too small? Try TextView’s new feature Autosizing!

What is Autosizing?

2. Use Autosizing

2.1 Different ways of using Autosizing

2.2 Autosizing base

2.3 Autosizing switch

2.4 Operate the granularity of Autosizing

2.5 Preset size range

Three, check gaps and fill gaps

3.1 TextView must be limited in size

3.2 Autosizing does not work in EditText

3.3 Not all preset sizes are hit

3.4 Conflicts with singleLine

Four, use scenarios

4.1 Define the UI of the entry

4.2 more than language

Five, the summary

Too much text? Control too small? Try TextView’s new feature Autosizing!

What is Autosizing?

2. Use Autosizing

2.1 Different ways of using Autosizing

2.2 Autosizing base

2.3 Autosizing switch

2.4 Operate the granularity of Autosizing

2.5 Preset size range

Three, check gaps and fill gaps

3.1 TextView must be limited in size

3.2 Autosizing does not work in EditText

3.3 Not all preset sizes are hit

3.4 Conflicts with singleLine

Four, use scenarios

4.1 Define the UI of the entry

4.2 more than language

Five, the summary

Related Posts

How RxJava implements thread switching

React Native with Android

Optimize code using Support Annotations