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.
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!
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?
and i would like to have a nice high resolution background for it.
If i mind galaxy S4 and galaxy Note3, they have 1080 x 1920 px screens.
That means my 1080 x 1920 px background will be 3 MB.
What!?? Yes. My whole app should be 3 MB not only one drawable piece.
So my question is, how developers solve this? I would like to have a nice textured well designed background, if it would be flat design, there wouldnt be problems like this.
And okay.. lets say Galaxy S4 and Note3 have really big amount of memory and fast processor and i use that 3MB background, but... what happens when somebody would like to use my app with a low budget device? Maybe its cannot even show that big image.
Any ideas about this?
If you are worried about other devices you should simply define different resources along with the correct size qualifiers, like stated in the Android guidelines.
smallestWidth sw<N>dp
Examples: sw600dp sw720dp
The fundamental size of a screen, as
indicated by the shortest dimension of the available screen area.
Specifically, the device's smallestWidth is the shortest of the
screen's available height and width (you may also think of it as the
"smallest possible width" for the screen). You can use this qualifier
to ensure that, regardless of the screen's current orientation, your
application's has at least <N> dps of width available for it UI.
...
Basically you can define a drawable-sw<N>dp for each family of screens you want to support, putting in there targeted pictures as you need.
I think you need to change the resolution of your image. I created a 1024 x 768 PNG background image and its size was only around 300kb.
Check your image resolution. I recommend 72 pixels/inch. I'm not sure if there's any other softwares, but you can check and change your resolution on Adobe Photoshop if you go to Image -> Image Size. You might need to uncheck 'Resample Image' I think.
I have two Android machines - Samsung Galaxy Tab and HTC Flyer. They both have 1024x600 screen. However Tab has 240dpi screen while Flyer has 160dpi according to the log from Context.getResources().getDisplayMetrics() method.
My problem is that, I have a TextView defined, and according to those Android document, using unit of dp should give same physical size under different screen density(dpi). But what I observed is that, the text size appeared in Flyer is obviously smaller than that in Tab, no luck in using sp too. I want them to be in same size. Any clue in solving this problem in general?
Thanks in advance.
Well, the reported values are clearly a lie. I suppose the Galaxy Tab is the 7in model. This means that, based on the reported values, it has about 4.2in display height (1024 / 240 = 4.2in) and about 2.5in width. This means that the screen size would be 4.2x2.5 in - and in this case the diagonal would be about 4.9in. Is it correct - no it isn't, it has 7in display. Measure the sides of the screen and you would get the correct density. So, even when scaled by Android the result will be wrong because of the false density measurement.
Anyway, the answer of the question is:
No, no way to draw same-sized fonts, images and whatever. You need to get used to false metrics from the manufacturer. A false density reading reflects on all other scaling. Thus even mm/in would not help.
And one advise - don't try to match sizes between different products, unless absolutely necessary. If you succeed, then the text on the Galaxy Tab, for example, will look disproportional in regards to the other text on the device and will make your app look out-of-place. Stick to the Android textAppearanceSmall/Large, etc.
Please try the following units:
mm
Millimeters - based on the physical size of the screen.
in
Inches - based on the physical size of the screen.
http://developer.android.com/guide/topics/resources/more-resources.html
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. :)