Autosizing TextView in Android

If the user is giving the input and the input needs to be shown as TextView and if the user inputs the stuff which can go out of the screen, then in this case the font TextView should be decreased gradually. So, in this article, it has been discussed how the developer can reduce the size of TextView gradually as the user gives the data. One can have a look at the following GIF to understand better, what we are going to build at the end of this article. The code has been given in both Java and Kotlin Programming Language for Android.

For Autosizing TextView

In this article, the dial pad is taken as an example. This method can be used in building the calculator and can be used in many other scenarios where the TextView resize is required.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Project just refer to this article on How to Create New Project in Android Studio. Rename the application name as Auto resize TextView, let the name of the layout be activity_main.xml, and select Java or Kotlin as Language.

Step 2: Working with the XML Files

As we have taken the dial pad as an example to demonstrate the auto-resizing of the TextView, so invoke the following code in the activity_main.xml file to make the UI like a dial pad.

XML

<?xml version="1.0" encoding="utf-8"?>
<!-- The attributes further invoked for the
     TextView are the part of Android Jetpac so we need to
     include xmlns:app="http://schemas.android.com/apk/res-auto"
     as you can see below -->
<LinearLayout
    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"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <!-- One needs to hardcode the height of the TextView -->
    <!-- so that it can decrease its height automatically within -->
    <!-- the given height and it doesn't disturbs the other widgets -->
    <!-- one can set the maxLines of the TextViews upto which -->
    <!-- the lines of the TextViews must be visible in this case its 2 -->

    <TextView
        android:id="@+id/primaryTextView"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:hint="0"
        android:maxLines="2"
        app:autoSizeMaxTextSize="80sp"
        app:autoSizeMinTextSize="10sp"
        app:autoSizeStepGranularity="2sp"
        app:autoSizeTextType="uniform" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        android:weightSum="3">

        <Button
            android:layout_width="68dp"
            android:layout_height="68dp"
            android:layout_margin="8dp"
            android:onClick="clickedOne"
            android:text="1"
            android:textSize="24sp" />

        <Button
            android:layout_width="68dp"
            android:layout_height="68dp"
            android:layout_margin="8dp"
            android:onClick="clickedTwo"
            android:text="2"
            android:textSize="24sp" />

        <Button
            android:layout_width="68dp"
            android:layout_height="68dp"
            android:layout_margin="8dp"
            android:onClick="clickedThree"
            android:text="3"
            android:textSize="24sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        android:weightSum="3">

        <Button
            android:layout_width="68dp"
            android:layout_height="68dp"
            android:layout_margin="8dp"
            android:onClick="clickedFour"
            android:text="4"
            android:textSize="24sp" />

        <Button
            android:layout_width="68dp"
            android:layout_height="68dp"
            android:layout_margin="8dp"
            android:onClick="clickedFive"
            android:text="5"
            android:textSize="24sp" />

        <Button
            android:layout_width="68dp"
            android:layout_height="68dp"
            android:layout_margin="8dp"
            android:onClick="clickedSix"
            android:text="6"
            android:textSize="24sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        android:weightSum="3">

        <Button
            android:layout_width="68dp"
            android:layout_height="68dp"
            android:layout_margin="8dp"
            android:onClick="clickedSeven"
            android:text="7"
            android:textSize="24sp" />

        <Button
            android:layout_width="68dp"
            android:layout_height="68dp"
            android:layout_margin="8dp"
            android:onClick="clickedEight"
            android:text="8"
            android:textSize="24sp" />

        <Button
            android:layout_width="68dp"
            android:layout_height="68dp"
            android:layout_margin="8dp"
            android:onClick="clickedNine"
            android:text="9"
            android:textSize="24sp" />
    </LinearLayout>

    <Button
        android:layout_width="68dp"
        android:layout_height="68dp"
        android:layout_gravity="center"
        android:layout_marginTop="8dp"
        android:onClick="clickedZero"
        android:text="0"
        android:textSize="24sp" />
</LinearLayout>

One can see attributes of TextView in above code app:autoSizeMaxTextSize=”80sp”, this is the initial sizes of TextView.

app:autoSizeMinTextSize=”10sp” using this attribute the TextView will be resized up to the size of 10sp and app:autoSizeStepGranularity=”2sp” using this attribute we are uniformly reducing the size of the TextView as 2sp when it goes out of the screen.

app:autoSizeTextType=”uniform” by using this attribute we are simply resizing the TextView uniformly.

One thing to remember is one shouldn’t set the height and width of the TextView as wrap_content. To disable the resizing of the TextView, can set this attribute to none. As you can see below.

app:autoSizeTextType="none"

The following Output UI is produced:

Step 3: Working with the MainActivity File

Now in the MainActivity File, we will handle all the onClick functions of each Button separately, and set the TextView to the appropriate number when pressed. So, now invoke the following code:

Java

import androidx.appcompat.app.AppCompatActivity;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    TextView primaryTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // register the button using appropriate ID of the TextView
        primaryTextView = findViewById(R.id.primaryTextView);
    }

    // handle the button 1 and append the 1 to the end of the TextView
    @SuppressLint("SetTextI18n")
    public void clickedOne(View view) {
        primaryTextView.setText(primaryTextView.getText() + "1");
    }

    // handle the button 2 and append the 2 to the end of the TextView
    @SuppressLint("SetTextI18n")
    public void clickedTwo(View view) {
        primaryTextView.setText(primaryTextView.getText() + "2");
    }

    // handle the button 3 and append the 3 to the end of the TextView
    @SuppressLint("SetTextI18n")
    public void clickedThree(View view) {
        primaryTextView.setText(primaryTextView.getText() + "3");
    }

    // handle the button 4 and append the 4 to the end of the TextView
    @SuppressLint("SetTextI18n")
    public void clickedFour(View view) {
        primaryTextView.setText(primaryTextView.getText() + "4");
    }

    // handle the button 5 and append the 5 to the end of the TextView
    @SuppressLint("SetTextI18n")
    public void clickedFive(View view) {
        primaryTextView.setText(primaryTextView.getText() + "5");
    }

    // handle the button 6 and append the 6 to the end of the TextView
    @SuppressLint("SetTextI18n")
    public void clickedSix(View view) {
        primaryTextView.setText(primaryTextView.getText() + "6");
    }

    // handle the button 7 and append the 7 to the end of the TextView
    @SuppressLint("SetTextI18n")
    public void clickedSeven(View view) {
        primaryTextView.setText(primaryTextView.getText() + "7");
    }

    // handle the button 8 and append the 8 to the end of the TextView
    @SuppressLint("SetTextI18n")
    public void clickedEight(View view) {
        primaryTextView.setText(primaryTextView.getText() + "8");
    }

    // handle the button 9 and append the 9 to the end of the TextView
    @SuppressLint("SetTextI18n")
    public void clickedNine(View view) {
        primaryTextView.setText(primaryTextView.getText() + "9");
    }

    // handle the button 0 and append the 0 to the end of the TextView
    @SuppressLint("SetTextI18n")
    public void clickedZero(View view) {
        primaryTextView.setText(primaryTextView.getText() + "0");
    }
}

Kotlin

import android.annotation.SuppressLint
import android.os.Bundle
import android.view.View
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity


class MainActivity : AppCompatActivity() {

    private lateinit var primaryTextView: TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // register the button using appropriate ID of the TextView
        primaryTextView = findViewById(R.id.primaryTextView)
    }

    // handle the button 1 and append the 1 to the end of the TextView
    @SuppressLint("SetTextI18n")
    fun clickedOne(view: View?) {
        primaryTextView.text = primaryTextView.text.toString() + "1"
    }

    // handle the button 2 and append the 2 to the end of the TextView
    @SuppressLint("SetTextI18n")
    fun clickedTwo(view: View?) {
        primaryTextView.text = primaryTextView.text.toString() + "2"
    }

    // handle the button 3 and append the 3 to the end of the TextView
    @SuppressLint("SetTextI18n")
    fun clickedThree(view: View?) {
        primaryTextView.text = primaryTextView.text.toString() + "3"
    }

    // handle the button 4 and append the 4 to the end of the TextView
    @SuppressLint("SetTextI18n")
    fun clickedFour(view: View?) {
        primaryTextView.text = primaryTextView.text.toString() + "4"
    }

    // handle the button 5 and append the 5 to the end of the TextView
    @SuppressLint("SetTextI18n")
    fun clickedFive(view: View?) {
        primaryTextView.text = primaryTextView.text.toString() + "5"
    }

    // handle the button 6 and append the 6 to the end of the TextView
    @SuppressLint("SetTextI18n")
    fun clickedSix(view: View?) {
        primaryTextView.text = primaryTextView.text.toString() + "6"
    }

    // handle the button 7 and append the 7 to the end of the TextView
    @SuppressLint("SetTextI18n")
    fun clickedSeven(view: View?) {
        primaryTextView.text = primaryTextView.text.toString() + "7"
    }

    // handle the button 8 and append the 8 to the end of the TextView
    @SuppressLint("SetTextI18n")
    fun clickedEight(view: View?) {
        primaryTextView.text = primaryTextView.text.toString() + "8"
    }

    // handle the button 9 and append the 9 to the end of the TextView
    @SuppressLint("SetTextI18n")
    fun clickedNine(view: View?) {
        primaryTextView.text = primaryTextView.text.toString() + "9"
    }

    // handle the button 0 and append the 0 to the end of the TextView
    @SuppressLint("SetTextI18n")
    fun clickedZero(view: View?) {
        primaryTextView.text = primaryTextView.text.toString() + "0"
    }
}

Output: Run on Emulator