Let's say I have a 100px x 100px button defined in Flutter. The size is hardcoded, and not a percentage of screen size. I then created an apk, viewed the app screen on my phone, took a screenshot and transferred it to my laptop to check the actual size of the button. It's 263px x 263px.
My phone's screen size is 1080px x 2160 px, and the resolution is 401 ppi. Am I correct in assuming that scaling from code to app should happen by a factor of 2.5 (401/160)?
Or does scaling happen based on device pixel ratio, which for my device is 3.375?
In actual case, the scale factor I am getting is 2.63. How does this work? Moreover, how do I create an app with pixel perfect layout?
Related
My company has a Android app. Our clients view the app with a Lenovo Tab M8. I am a designer tasked with recreating the current app experience in Figma so that our design team can have a design system and make accurate mockups. But I'm struggling to capture basic measurements (my experience is in Web and not Native apps).
The first question is, what is the width and length of the screen in pixels? I'm trying to create a basic screen template in Figma. I know the Lenovo display is 1280x800px with 16:10 screen ratio. But when I create a 1280x800 frame in Figma it's significantly larger than the physical device. I'm a little lost.
The other question is, I'm trying to recreate font sizes but I know the app uses dp and not px. I found a site that convert them, but I don't know if the tablet is LDPI, MDPI, or whatever.
https://www.pixplicity.com/dp-px-converter
Thanks for any insights you have.
You shouldn't need to know what density the tablet is, the point of using dp (density-independent pixels) is that everything will look pretty much the same size in the real world. The baseline density is LDPI, which is 160 pixels per inch - so 160dp is one inch on the screen.
XHDPI is 320 pixels per inch, so double the density - but converting 160dp to pixels on XHDPI devices involves multiplying it by 2, so the result is 320 pixels - which again corresponds to 1 inch on a 320dpi screen. See how it works?
So the pixel resolution isn't important, a tablet will be large in dp terms because they're physically bigger than a phone, more inches and all that. But if you're curious, if your M8 is the 2nd-gen one, according to the tech specs it's 4.8" on the 800 px axis (the one with the smallest bezels), and that works out to 166.7 DPI without taking those bezels into account - so it's an LDPI device!
I don't know anything about Figma, but so long as you're using dp measurements it should work ok? You have to be aware of the size of your screen though - when you said you created a frame 800 high and it was too big, if that was 800dp then 800 / 160 is 5" and your screen is only 4.8" high. Ideally your layout shouldn't require a specific physical size though, it should be able to adjust since different devices (even very similar ones) are different sizes - but I don't know how Figma works with that! That's just the way it works for the standard Android stuff
Also ideally fonts should use sp which is like dp but it has an additional scaling step depending on the user's font size settings on the device - it lets them shrink or enlarge text to their preference and for accessibility (the latter is especially important). Sometimes you want a fixed size for something that's more of a graphic element, but generally text should be scalable
If you want to know how to convert, have a look at the Material Type System - there's a chart there for converting between different units (also 1sp = 1dp for the Normal text size FYI). There's also a tool on there to create a type scale but only for stuff on Google Fonts - just saves you doing it yourself!
I'm programming an application with React Native (v0.45.1) and using my S6 as a testing device. I'd set a background image which matches exactly my cellphone resolution size but its looking huge on screen, enough to only show me a small chunk of my background image.
Just for debugging purposes I'd added this lines in my render method to get my device dimensions:
let {height, width} = Dimensions.get('window');
console.warn(height, width);
and the output I got from those lines is: 360 x 640. How can that be possible? I'd taken a screenshot and shared to a coworker and the picture size is: 1440 x 2560, which is exactly my cellphone resolution.
A few days ago the same happened to me at work, for the record I was working with a tablet that time and not using my cellphone. Any ideas about what is happening or am I missing something? Thanks in advance.
The dimensions you get from Dimensions are in dp (for Android) and the picture size is in px (pixels).
Basically, you work in dp on your app and the actual pixels values will vary between devices depending on their pixel density. This means their pixels might be smaller/bigger, thus dp represents the real-world-uniform-pixel-size if you will.
I would like to get size of the Android Phone but size in mm and not in pixels.
I know how to get size in pixels, however I would like to do some RND and for that I want to get width of the screen in mm.
Like here Galaxy S4 size is Dimensions 136.6 x 69.8 x 7.9 mm (5.38 x 2.75 x 0.31 in)
136.6 x 69.8 x 7.9 mm (5.38 x 2.75 x 0.31 in)
^^^
Does any one knows what is this size for?
Though I am iPhone developer BUT I am beginner (1 day baby) for Android. Well below is what I want to do as RND.
Let's say designer gives me design for the app of size 1080*1920 and have title of size 30px (which covers 80% exactly) of the screen size.
That means 10% space on left side, 80% text and 10% space on right side.
I know in Android we have something called sp or android:textAppearance="#android:style/TextAppearance.Large", but that won't give the 10% spaces.
What I want to achieve is regardless of size, design should go same.
Considering design to fit with width, if height increases, I would have scrollview and I am okay with that.
"Pixel density" is the number of pixels per inch. So dpi gives you the scale factor you need so that the number of pixels is consistent across devices.
Another way of saying this is that if you have a 480 pixel screen with hdpi, then a 360 pixel screen at mdpi is about the same physical size. While the screen sizes may vary some, it generally is not that important. Even so, as mentioned, see this post about doing the actual calculation:
Is there a way to determine android physical screen height in cm or inches?
However, you are talking about percentages of screen size in your example. If you know the screen size in pixels, then the physical size doesn't matter, just do your calculations using pixels. If you have 480 pixels, 10% is 48.
You cannot do this in XML, which it sounds like you might be wanting to do. You can use "weighted linear layouts" for runtime calculations of the screen size. You can also use different res folders depending on screen size (like res/layout-hdpi).
You may want to read this from Google regarding supporting different screen sizes: http://developer.android.com/guide/practices/screens_support.html
Use DisplayMetrics. The API is: http://developer.android.com/reference/android/util/DisplayMetrics.html
You can perform a calculation on the given fields and obtain the height and width in inches, then convert that to mm.
I Have a few general questions about Android screen / DPI / resolution indepence.
Basically, I am taking specifically about sprite-based apps, like ones based on Surfaceview for example.
Every guide I've read (including the official one) says that you should only work with the DPI and not the resolution.
However, what happens when two devices have different DPI's/screen size but the same resolution? Take the Galaxy tab 10.1 (1280 x 800 - DPI aprox 150) and the Galaxy Note (1280 x 800 aprox 285 DPI I think??)
When displaying a sprite of say 50 x 50 on each of these, it will appear to be the same size relative to the screen size. However, if Android grabs a difference size sprite because it detects a different DPI (ie, from LDPI, HDPI etc), then the sprite will appear to be bigger on the Note relative to the screen size than it would on the Tab.
Can anyone please set me straight on this as I just cannot work it out!! Thanks all.
A 50 x 50 sprite on a 150dpi screen will appear much larger than a 50 x 50 sprite on a 285dpi screen. Android's resource resolution algorithm is intended to allow you to define a larger (in pixels) image for use on higher density screens.
If you want the sprite to be the same size relative to the screen regardless of the pixel density, then you can put the images in the drawable-nodpi folder and they won't be scaled by the system. You can even decide which size image to use in code after querying the screen size. (As of 3.2, you can have resource folders that depend on screen pixel size, but I think they will still scale with dpi.)
Screen resolution refers to the screen dimension in pixels. Pixel density refers to how many pixels it takes to fill an inch of screen.
I'm trying to make an Evolus Pencil template for Android. My device has a 1.75x2.5625" screen, and I would like to emulate these exact physical dimensions. From reading this post:
Android multiple screen sizes with same density
I see Physical Size = Pixels / Density. So if I create an image that is 168px wide, on a 96dpi screen, should I not get a physical image of 168/96=1.75" wide?
Because I get one about 1.5" and I'm lost. I am running Ubuntu and confirmed my screen dpi with xdpyinfo as being 96x96. So what is a formula I can use for this? I was thinking one could get the pixels needed by multiplying the inches we want on the screen by the dpi of the screen, but this gives me the 168 mentioned above and obviously gets me no where.
Can anyone point me in the right direction, I'm honestly terrible with numbers and math so my apologies if I'm missing something simple or obvious.
Are you sure that the display is actually 96 ppi? Going by the specs, and my own calculations, your Lenovo S10e actually has a density of ~116.36 ppi, which is probably where your difference is coming in.
Assuming these specs are correct:
10.1" diagonal
1024 x 576 resolution
16:9 screen ratio (taken from above resolution)
Using some geometric formulas, you can get the actual width and height of the monitor as:
Width: 8.8"
Height: 4.95"
Dividing 1024/8.8 and 576/4.95 gives you 116.36 pixels per inch, rather than 96.
Using this instead, a 168 pixel image should display as 168/116.36, or ~1.44", which is consistent with your results. I wouldn't put too much faith in the xdpyinfo results. :)