How can I scale font size based on android displayMetrics?

Question

I'm writing an app to show a simple digital clock in Android and I need to scale the font size of the TextView so that it fills the screen as much as possible. I found a quite simple way to scale text size using displayMetrics but it doesn't work correctly on some devices. What I want to achieve looks like this:

I would work only in landscape mode, and I would like it to run on my old smartphones and tablets lying around as well as on newer devices. So I have a variety of screen types to cater to.

To scale the font I do the following

    ...
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_show_clock);

    // Get screen size and calculate text size needed to fit
    // TODO: doesn't work well on some devices
    TextView tvScreenSize = findViewById(R.id.tvScreenSize);
    DisplayMetrics displayMetrics = new DisplayMetrics(); // From: https://stackoverflow.com/questions/4743116/get-screen-width-and-height
    getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
    // The screen height and width are recalculated automatically by Android when the screen is redrawn on a rotation
    height = displayMetrics.heightPixels;
    width = displayMetrics.widthPixels;
    textSP = width / 12; // Empirical value
    String hString = Integer.toString(height);
    String wString = Integer.toString(width);
    tvScreenSize.setText("h: " + hString + "  w:" + wString);

    final Handler handler = new Handler();
    handler.postDelayed(new Runnable() {
        @Override
        public void run() {

            // Display time of day
            Date curDate = new Date();
            TextView tvTime = findViewById(R.id.clockView);
            String timeStr = format.format(curDate);

            tvTime.setText(timeStr);
            tvTime.setScaleY(1.5f);
            tvTime.setWidth(width * 8 / 10); // Make it fill 80% of the screen
            tvTime.setHeight(height * 8 / 10);
            tvTime.setTextSize(textSP);
            ...

The quid is with the line:

textSP = width / 12; // Empirical value

For some screens a value of 6 works well. For other screens this creates a font so big that only a small part is visible. Changing this value to 12 does the trick.

It seems that I'm missing something related to the density of the screen, but what?

Thanks!

FINAL RESULT: For anyone trying to scale text like me, here's the final code after input from ismail:

The activity_main.xml file:

?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

<TextView
    android:id="@+id/tvClockFace"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="6dp"
    android:text="12:34"
    android:textColor="@android:color/holo_red_dark"
    android:textSize="30sp"
    android:textStyle="bold"
    android:typeface="monospace"
    app:fontFamily="monospace"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/tvScreenSize"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="8dp"
    android:text="H:... W:..."
    android:textSize="14sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

</android.support.constraint.ConstraintLayout>

And the MainActivity.java:

package com.schalkx.testautosizeclockdisplay;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.Display;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

    // Scale the textsize automatically
    Display display = getWindowManager().getDefaultDisplay();
    DisplayMetrics outMetrics = new DisplayMetrics ();
    display.getMetrics(outMetrics);

    float density  = getResources().getDisplayMetrics().density;
    float dpHeight = outMetrics.heightPixels / density;
    float dpWidth  = outMetrics.widthPixels / density;

    // Convert height and width to integer values
    float fTextSize = dpWidth/4; // Trial and error
    // int iTextSize = Math.round(fTextSize);
    int scrHeight = Math.round(dpHeight);
    int scrWidth = Math.round(dpWidth);

    // Display de height and width on screen (for reference)
    String wString = Integer.toString(scrWidth); // In case you need the width
    String hString = Integer.toString(scrHeight); // Same for height
    TextView tvScreenSize = findViewById(R.id.tvScreenSize);
    tvScreenSize.setText("h: " + hString + "  w:" + wString);

    // Scale the font of the clock face
    TextView tvClockFace = findViewById(R.id.tvClockFace);
    // tvClockFace.setHeight(50);
    // tvClockFace.setWidth(100);
    tvClockFace.setTextSize(fTextSize);
    tvClockFace.setScaleY(1.5f);
    }
}

use https://github.com/intuit/ssp to scale font size as per display metrices. — Krishna sheladiya, May 28 '19 at 03:29

score 2 · Accepted Answer · answered May 28 '19 at 01:01

For a better display experience you should work with dp instead of px , here how to get dp size :

Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics outMetrics = new DisplayMetrics ();
display.getMetrics(outMetrics);

float density  = getResources().getDisplayMetrics().density;
float dpHeight = outMetrics.heightPixels / density;
float dpWidth  = outMetrics.widthPixels / density;

so now you can set your text size accordingly to the screen dpHeight and dpWidht

score 1 · Answer 2 · answered May 27 '19 at 23:41

don't use the pixel value in your code at all. convert pixel to device independent pixel(dp)

public static float convertPixelsToDp(float px, Context context){
    return px / ((float) context.getResources().getDisplayMetrics().densityDpi/ 
         DisplayMetrics.DENSITY_DEFAULT);
}

How can I scale font size based on android displayMetrics?

2 Answers2