Text sizes, different density devices and material design

Question

I'm trying my best to follow the material design guidelines when it comes to fonts as I can, but I'm struggling to fix an issue I'm having without using dimens dependant on density. My issue is;

I'm using styles for my fonts so an example of this;

<style name="Text.MyApp.Heading3" parent="TextAppearance.MaterialComponents.Headline3">
    <item name="android:fontFamily">?attr/RegularFont</item>
    <item name="fontFamily">?attr/RegularFont</item>
    <item name="android:textSize">?attr/TextSizeHeadingThree</item>
</style>

And applying this as the style of the text, my font size comes from the material guidelines so for Heading 4 I have

<dimen name="text_size_heading_three">48sp</dimen>

My problem is, I've got a view where there's two numbers using Heading3 in a row on the screen, This may look like +£100.00 | -£200.00 +£100.00 | -£200.00 , these are constrained to a separator view in the middle.

Where my issue lies is on a Pixel 4 XL (xx-hdpi) this looks fine, but bringing this down onto a Nexus S (hdpi) the text squashes together, overlaps the separator in the centre and comes off the end of the screen slightly.

It was to my understanding of the use of SP is that it would scale this text size which doesn't appear to be happening, a worry also arises that SP takes from the users text size preferences so increasing the text size of the device will likely also break this.

Just short of changing the font size for hdpi to a smaller text size for this text view, is there a way I can make this style scale with the screen?

Answer 1

sp actually scales in regard to the screen pixel density and the selected font size of the system.

The issue you are facing is related to the screen's actual width instead.

To achieve what you want, you can try either of the following two:

• Have different sp values for your dimen for each screen width. You can do this by creating additional resource files that would contain your dimen values and will be screen width dependant. You can read more about this here:

https://developer.android.com/training/multiscreen/screensizes#TaskUseSWQuali

• Use an autosizing TextView. You can find more information here:

https://developer.android.com/guide/topics/ui/look-and-feel/autosizing-textview

Answer 2

sp units are literally about the user's choice of text size :

Scale-independent Pixels - This is like the dp unit, but it is also scaled by the user's font size preference . It is recommend you use this unit when specifying font sizes, so they will be adjusted for both the screen density and the user's preference.

Basically users can choose the general size of text on their device, and that multiplies dp values by a specific factor (Normal is * 1.0 , I think Huge is * 2.0 ) and that's what the sp value is. When you specify sizes in sp , you're allowing the system to scale that text up so it's readable for everyone.

So you need to be mindful of that when designing - it's always worth having an emulator with a small screen (limited space) and the text size set to the largest setting, just to make sure everything still fits in those extreme cases.

You have four options I think:

• reduce your font's sp size in the layout, so it always fits
• make different layouts for different configs, and tweak that (more work for you)
• use autosizing TextView s like @kandrit mentions - set the space you want to fill, and it will scale the text size to fit it (this sounds like what you were expecting, and you can tweak things like having a fixed set of possible sizes)
• don't use sp , use dp instead (won't scale according to the user's preference - but above a certain size, it doesn't need to because it will be readable)

You'll get a warning about the last one, but in my opinion it's completely fine and the right thing to do in some cases. Think about an app with a clock in the middle of the screen - it's a fixed size, designed and laid out a certain way, and it's large enough to be easily read. It's meant to look a specific way, take up a specific area of the screen, and there's no need for it to change size - so it makes sense to define it in dp like any other visual element. Maybe that works for what you're doing!

Answer 3

Problem is not with your text size, it is with your layout design

I also had the similar problem I solved it by giving a margin to views which was placed inside constraint layout so in a case of large screen it will use constraints and ignore the value of margin and in case of small screen it use the value of margin to keep views separate

If you are using a Linear Layout then set layout_weight to 1 and give margins to views then it will work same as with constraint layout