Can't Scale Text Size on Different Screen Resolutions

Question

I am trying to set a text size and scale for several different screen sizes. I have set up my application in Android Studio with the below folders:

values > dimens

values-sw320dp > dimens

values - sw480dp > dimens

values-sw600dp > dimens

values-sw720dp > dimens

I have tested my application on AWS Device Farm, and notice some issues. Particularly, I am comparing the Samsung Galaxy Avant and the Samsung Galaxy S6. Each device is running on a separate Android version, and the S6 has a much higher resolution. However, the devices are close to the same physical size (handheld phone).

I am dynamically setting the text size with the below method:

xAxis.setTextSize(getResources().getDimension(R.dimen.answer_label_text_size));

However, I noticed that on each device, the sizes are significantly different despite the fact that the sizes are being pulled from the sw320dp folder at 3sp for both devices (answer_label_text_size).

<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="fab_margin">16dp</dimen>
<dimen name="center_indentation">80dp</dimen>
<dimen name="poll_question_text_size">14sp</dimen>
<dimen name="margin_left">80dp</dimen>
<dimen name="margin_bottom">8dp</dimen>
<dimen name="radio_button_answer_text_size">16sp</dimen>
**<dimen name="answer_label_text_size">3sp</dimen>**
<dimen name="answer_value_label_text_size">8dp</dimen>
<dimen name="vote_count_label_text_size_lower_right">17sp</dimen>
</resources>

Samsung Galaxy Avant (referring to "Test Answer" labels on left):

Samsung Galaxy S6

At the end of the day, how can I ensure that devices of similar physical size render the same text size?

Answer 1

This drove me crazy as well. My splash screen has an image that will size appropriately according to device resolution and physical size using the layout.xml parameters for ImageView. However, when I put a textview below it as a caption, the textSize does not scale with the screen and therefore looks very different on different devices. (Tiny on low res large screens and large on high res small screens)

I found a way to compensate for this:

 int density=metrics.densityDpi;
 int screenWidth = metrics.widthPixels;
 int screenHeight = metrics.heightPixels;
  //.../
 TextView coverText = (TextView) findViewById(R.id.selectText);
 int txtRes = (int) (10*(screenWidth/density));
 coverText.setTextSize(txtRes);

This gives me a scaled text caption that looks the same on large low density screens and small high density screens.

This works well. The only problem is that my starting size (10 in this case) is selected by trial and error and takes a few compiles and debugs on different devices.

Hope it helps someone else.

Answer 2

Instead of using

xAxis.setTextSize(getResources().getDimension(R.dimen.answer_label_text_size));

you can change it to

xAxis.setTextSize(TypedValue.COMPLEX_UNIT_SP, getResources().getDimension(R.dimen.answer_label_text_size));