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, 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?
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
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 TextViews 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!
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
Related
I've been using dp for dimensions and sp for text size for 3 years now, ever since I've started developing apps for Android.
But recently, I've been joined with a couple people that don't believe in dp and sp saying "it doesn't show the same on all devices".
The method they've used is:
When setting the text size, you don't use 24 sp nor 24 dp, you set it as 24% of the screen width or height in pixels. in this way, the text is always the same size in pixels on all devices (including tablets).
How correct/valid is this method? What is the professional way to design? What is the opinion of a professional Android designer to this method?
Don't know how good % can replace dp, but don't use it as a text size.
sp is great because users can resize it by changing their preferred text size in the device settings. Don't take away this possiblity just because it makes your design easier for you.
Accessibility > Design
See this guide for reference: Support different pixel densities
When defining text sizes, however, you should instead use scalable pixels (sp) as your units (but never use sp for layout sizes). The sp unit is the same size as dp, by default, but it resizes based on the user's preferred text size.
Best unit for text is sp and for dimensions best unit is dp.
That is given perfect result of in which you want.
In most of developer use this unit for text and dimensions.
I try for your % but that is not work in my app.
dp stands for density independent pixels. Its goal is, to define a more or less physical dimension. E.g. 48dp are about the size if a finger tip, and that's why tappable icons (e.g. on ActionBar) should have that size.
So for UIs you should always use dp (and sp for texts). It also has the advantage, that you can show more data on a larger screen (e.g. more items in a list are visible etc.).
If you're using % of the screen size, you are doing the exact opposite. On a small device 24% it will be small (physically speaking) on a large tablet it will be large.
Using % might make sense if you're developing a game for example and you want the same image shown on every device, large or small.
DP/SP Does not claim to be the same on all screen sizes but about the same size across screen densities. The reason it is only about the same size is that density is broken up into categories (e.g. mdpi, hdpi, xhdpi...).
You don't want the text to be relative to the screen size because then the text will be really small for devices that have a small screen and really large for devices that have a large screen. Instead you want the font size to be comfortable to read and about the same size on large or small screen. The large screens will just have the advantage of more text on the screen at a time.
In addition as other users have mentioned sp (and apparently now dp) can be scaled based upon user preferences which is really helpful for people with poor eyesight.
In my android app, there is a certain layout with a fixed height. In this layout, there are some TextView s arranged vertically. I have set the font size of text fields to be somewhat larger (18sp).
In almost all the devices I checked, The text fits inside the fixed sized layout. But in few devices, The bottom TextView gets cropped out of the layout.
If the proportion between text unit size (sp) and the layout unit height (dp) is the same in all devices, I wouldn't expect this to happen.
So, is this due to something wrong with the devices? Is there any way I can fix this?
Screen density is different than screen dimensions. dp normalizes densities across devices, but they can still have varying screen heights and widths. The obvious example is tablet vs phones, tablets have the same screen densities as phones but much larger screen dimensions. Just like that, some phones have smaller screens than others, so you need to take that into account when using fixed height layouts.
To get around this problem, you can take advantage of the width and smallest-width resource buckets and provide different layouts for smaller devices.
As it seems, the proportion between a unit sp and a unit dp depends on the font size setting (Settings->Display->Font size).
I could recreate the issue on other devices when I set the font size to be Huge.
So, it is not a good idea to set fixed sizes to layouts containing text.
Is it best practice to vary your text size based on screen size or based on screen density, or both?
I already know to use sp. I have static title text that fits on one line in some screens, and wraps around to the next line on others. I need to avoid the word wrap.
Its good practice to do so. On an 10" Tablet you are better using bigger Text sizes.
You can for example define your Custom values for each type of device using the values-sw720dp
folder an place it there:
<dimen name="HeadlineSize">28sp</dimen>
Also the already System Values like android:style/TextAppearance.Large scale. Means on an Phone will this be smaller(eg. 18sp) than on an Tablet (24dp)
What is the best way to set the text size so it looks the same on all devices? The biggest problem I am having is setting the text size on the buttons so everything fits or isn't too small. I have tried setting the size in the xml, and I have just tried setting it dynamically by getting the screen size and messing with the screen width and height to set the size. I had tested different things on different devices and thought all was well, until I just tried my app on the Galaxy Nexus and half of my words were getting chopped off inside of the button. I made some adjustments and the font is now way too small on tablets.
Using the xml has worked fine for me before, but most of these new 7" tablets use the large layout, so my images and text are really small if I set the height, width, and text size with the xml. Setting the widths and hights dynamically have helped with the buttons and image sizes, but the font still doesn't look quite right.
Is my best bet just to find a happy medium via xml(large, x-large, etc.) or are there other ways?
Have you seen this article: Supporting Multiple Screens ?
It says:
you should prefer the sp (scale-independent pixel) to define text
sizes. The sp scale factor depends on a user setting and the system
scales the size the same as it does for dp.
The same issue is explained here, Different text size for different hardware
I am programming application, which will be used on various kinds of resolutions, but let's say, we would keep to the density. For medium, high and low I am setting it's own drawables, but it still doesn's solve my problem, so I am wondering, how to set values dependently on actual pixel screen density in Java code?
In this time I have to in XML set smaller letters and smaller textviews to fit it into low resolution screen, on the other hand, high density screen is used from about 60% and text fields are too small. I am wondering if there is some way how to, during the start of the program, in some If loop find out, what the resolution is and then set layout_height and textSize for items I want.
Thanks
edit: Solved myself - http://developer.android.com/reference/android/util/DisplayMetrics.html
well before moving ahead to set the text size programatically, I recommend you to set the Textsize property's value in dip instead of px. it seems that you have marked the textsize value in px.