I am developing an App for all screen sizes and dpi.
The problem is that for large/smaller screen than normal the UI is being scaled, meaning I think screen compatibility mode is enabled.
This is my goal: I have an image button that is 90 pixels in height, so I think it is 90 dp in normal-mdpi device and I want it to remain 90 dp in larger and smaller screen sizes. So to the eye, the size remains the same.
The problem I am having is that is looks good (90 dp) in normal-mdpi device, but it looks much bigger and with scaling artifacts in a large-mdpi device.
I am targeting min android OS of 2.3.3, therefore I have the following manifest:
<uses-sdk
android:minSdkVersion="10"
android:targetSdkVersion="16" />
<!--
If not set explictly, screen compatibility mode would be enabled for
large screen, which is scaling of normal
-->
<supports-screens
android:anyDensity="true"
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:xlargeScreens="true" />
According to the android documentation, if targeting 10 or below, you mush specify supports-screens otherwise compatibility mode is enabled by default. Problem is that I am specifying it but I am still getting the compatibility mode enabled.
Any ideas? Please let me know if my understanding is wrong.
Thanks
Ok, I figure I post an answer after a whole day of debugging.
For me, the issue seem to be the emulator. When you launch the ADV, you need to calculate the actual screen device size and know your monitor dpi so you can set it in the launch options.
Once I did this, the image button that I had specified as "x dp" in my layout and having "x pixels" in the PNG, looks the same size (in) in all screen sizes and densities.
If you would like to get rid of artifacts due to android scaling, you can provide your own images in the ldpi, hdpi, xhdpi folders with their corresponding scaling already applied.
To calculate the device screen size, use the resolution and density provided in the launch options dialog, then calculate with this formula: (looks painful but it works, you can measure with a ruler in your computer monitor and the device if x in, will be x in in your ruler)
screen size = sqrt ( (w in pixels/ dpi)^2 + (h in pixels/dpi)^2)
where w, and h is the resolution in pixels
To calculate your monitor dpi, I googled my computer type. For mac book pro 15.4 in, it is 128 and for an apple cinema display 27 in it is 109. Hope this helps.
The method I used to keep all of my images the same size is to use the regular display getWidth and getHeight methods to set a variable. Then I set my images using Bitmap.createScaledBitmap to a % of the screen size. Regardless of the dpi it will look the same. On a 240 dpi screen that is that is 16:9, to get the same image on a 480 dpi 16:9 screen would be double the dpi.
I am using these images on a canvas, but I would guess they would be similar. Also in doing animations and such it is important when not in GL. I had to redo my current game because when I played it on a lesser dpi it moved so fast it was like lightning! Moving 10 pixels on a 180 vs a 240 was an eye opener.
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've created my app but I decided to test it on all screens to be adaptive. Maybe testing it in
MDPI(160dpi), HDPI(240dpi), XHDPI(320dpi), XXHDPI(480dpi) and XXXHDPI(640dpi) which corresponds to all screen sizes. However I tested my app on two devices support 320dpi. I thought that I get the same result but it don't. so don't know how to test my app on all screens. I'm confused.
I used Genymotion for emulators:
one with 720 * 1280 320dpi
screenshot
and other with 1200 * 1920 320dpiscreenshot
Please help me with that or if there's another way to do it let me know.
thanks in advance
(Bunch of explanation about why this is happening, I put my suggestions in the last section)
DPI isn't the same as size, it's just about how many pixels are packed into a certain area. The higher the DPI, the more pixels there are, meaning they're a lot smaller. So you can get fine detail, but it also means you need more of them to cover a physical distance or area on the screen.
Which is why Android uses dp instead of raw pixel sizes most of the time - the standard minimum touch-target size is 48dp, but how many actual pixels that is depends on the pixel density of the display. For mdpi displays it'll actually be 48 pixels, for xxxhdpi it'll be 4x that amount
It also means if you're doing your design work in dp, the pixel density of the screen doesn't matter - elements with a fixed size will always be broadly the same size on every screen (the mdpi etc buckets are like a "close enough" grouping, the devices in each group won't all have exactly the same DPI) because it's getting translated to the equivalent number of actual pixels. What testing does help with is checking your drawable assets look ok on different screen densities
So you have two devices with the same DPI right?
720 x 1280
1200 x 1920
Because they're the same DPI, those dimensions are converted to dp by the same factor. Let's work it out to be precise (but the exact numbers aren't important): 320 DPI is xhdpi according to that link up there, so 1dp = 2px. Let's convert those screen sizes to dp
360dp x 640dp
600dp x 960dp
It's the same situation but hopefully having those sizes expressed in dp helps you see the problem - when you're designing a layout, you're working with dp, right? The available space you have to work with is defined in dp, and one of those has a whole lot more space than the other! Putting a 300 dp-wide TextView in the layout would almost fill the first one horizontally, but it would only cover half of the second. That's gonna look pretty different!
This is why phones and tablets look so different - even if you have a relatively new phone, and an old Nexus 7 with a much lower resolution, the Nexus 7's screen is going to feel "bigger" and more "spacious". It's a physically larger device, so even though it's low-res, it's also low-density which means those pixels are spread across a larger area. Lower DPI means those pixels translate into more inches. And in the density-independent pixel (dp) system, that means you get way more dp to work with, more space for your layout. Which is what you want on a tablet, you don't want it to look and feel like a massive phone!
That's why it's different - basically one of your devices has more space to work with than the other, because it has more pixels, and the same DPI so those pixels aren't just used for finer detail.
As for testing, you need to look at different screen sizes - which is dependent on the resolution and the DPI. Basically pixels / DPI = size in inches. Do that for your two 320 DPI examples and you'll see one is a fair bit larger, physically, while having the same density
Probably the easiest way to do this, really, is to look at your layout in the design view, and change the Preview Device setting at the top. Some of the Phone devices are more "spacious" than others, newer ones are taller, so go through them and see how your layout changes. Try a Tablet one and see what a lot of extra space does. And if you go down to the Generic Phones and Tablets section at the bottom, there are a bunch of reference devices in there, some of which will be very cramped!
Once you've found a few useful ones, you can set up your emulator / virtual devices with each of their screen resolution / density combinations. I don't know about Genymotion, but the built-in AVD manager gives you a lot of those device definitions as templates when you create a new virtual device. You should at least be able to enter those settings yourself
Also when you publish an app on the Play Store, they'll automatically run it on a bunch of reference devices and give you access to a bunch of screenshots, so you can see if there are any problems with certain screen sizes and fix them before you launch
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 a two questions.
First: I am looking at the Android compatibility definition document (CDD 4.0) and it states:
Devices MUST have screen sizes of at least 2.5 inches in physical diagonal size
Devices must report one of these densities: 120dpi, 160, 213, 240, 320
The aspect ratio must be between 1.3333 and 1.85
Must have minimum screen size of 460dp x 320dp (dp = density-independent pixel)
Suppose I have screen of 2"x3", with density of 120dpi, the screen would have:
Diagonal: 3.61" = good
Screen size: 320x480 dp = good
This is nicely compatible with Android CDD
If I change the width from 2" to 1.7", I get
Diagonal: 3.45" - still good
Screen size: 272x480dp - NOT COMPATIBLE
My first question is, why specify a diagonal value, when the WIDTH is really what affects compatibility? The width must be 2" minimum.
Second: If I don't need to be Android compatible and stick with the 1.7" screen size, will applications that were built for the smallest compatible display be able to run on my device? Will the UI of this application be cropped when run in my device?
Thanks much for any insight.
It's probably just an easy way to specify the requirement. If you have a portrait device, the width is smaller than the height. If you have a landscape device, the width is the large dimension. It's just easier to say "the diagonal" than "the smaller of the two screen dimensions when the device is laid flat" or something like that. There are lots of ways to say essentially the same thing.
If your device is smaller than the CDD requires, you will probably want to still report in Android that your device is of screen size small, so I imagine apps will run but layouts for many of them will likely not fit well as people will tend to test on CDD-conformant devices. It very much depends on what layouts people used, but I wouldn't be surprised if you saw some cropping.
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. :)