This one is bedeviling me. What am I overlooking? I want a button exactly one inch wide, on any density screen. I declare it in the layout like this:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:width="160dip"
android:text="How wide?"
/>
What I get is a button that is exactly 7/8ths of an inch wide on all screens, not the expected 1 inch. Is the difference maybe the margin or padding around the button? If so, how to set that to zero?
What about this ?
android:layout_width="1in"
dip are based on virtual densities, not actual physical densities. For instance, on a T-Mobile G1, the device's display physical density is around 180dpi, but we treat it as a 160dpi display. Android currently uses 3 "density buckets," 120, 160 and 240. Each device uses whatever is most appropriate. If you want accurate physical measurements, use physical units like in, mm, etc.
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
If I wanted to create something that is exactly one inch apart on every Android screen, I would use pixels correct? Inches and dp seem to scale to the individual size of the screen meaning on one device it could be one inch and on another it could be 1 1/4th.
Also, is there an easier way to do this besides finding how many pixels are in an inch and then adding the views with the correct margin pragmatically?
You would use density independent pixels. Also known as dip or just dp.
Dp ensure that things are nearly the same size on every screen. ("Nearly" because this is android, with a huge fragmentation, and custom roms, ...etc)
So one inch will be a varying amount of pixels on each screen. If you use pixels, things will be smaller on high resolution displays. So use dp and everything will be the correct size on the actual screens.
While using dp might be off by a pixel or two (might!), this is probably as good as it gets. Also, you should try not to create pixel perfect design with android—You will have a hard time with different screen sizes (and not just resolutions)
Generally speaking you should try and follow the material design guidelines by google for android, and rather use multiples of 8dp for sizes, instead of trying to find out how much an inch is.
Density-independent pixels (dp) is the unit of measure which appears to be the same actual length on any device.
Try this: create a view whose width is 100dp and run it on a hdpi device. Measure the width of the view using a ruler or something. Then run the app on a mdpi device and measure the width. You will find that the two widths are about the same.
This means that, just as its name suggests, the actual length of a dp is independent of the screen density.
If you used pixels, however, the actual length will vary from screen density to screen density. If the screen is denser, 100px will appear shorter. If the screen is less dense, 100px will appear longer.
Get it?
tl;dr: Just use dp!
I am relatively new to android. I want to develop an UI which works fine on 2 hpdi devices.
For example lets say on these two devices
Nexus 9
Size 8.86"
Resolution 2560x1600
Density xhdpi
Nexus 10
Size 10.05"
Resolution 2560x1600
Density xhdpi
As seen above both have different screen size and different resolution but density is the same.
My understanding is one layout should work perfectly on both devices, but unfortunately that is not the case. I see differences. Can someone please suggest what changes i should make.
Adding below the portion of the code(xml) which is giving me a problem.
<RelativeLayout
android:id="#+id/rl1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.2" >
<customSeekBar
android:id="#+id/abc1"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:layout_marginTop="40dp"
android:thumb="#drawable/eqthumb"
android:progressDrawable="#drawable/progress_eq"
android:max="19"
android:progress="10" />
<TextView
android:id="#+id/abc2 "
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/ abc1"
android:textColor="#FFFFFFFF"
android:layout_marginTop="-10dp"
android:textStyle="bold"
android:text="300"
android:singleLine="true"
android:ellipsize="marquee"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/abc3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/ abc1"
android:text="0 dB"
android:textColor="#FFFFFFFF"
android:textStyle="bold"
android:singleLine="true"
android:layout_marginTop="-5dp"
android:ellipsize="marquee"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
Thank you.
Density is only one part of your layouts though. These devices have different aspect ratios so available device independent pixel (dip or just dp) differs.
So your available width and height differs, but sure logical screen density is the same.
Having said that, android's layouts are rather flexible/adaptable and regardless of screen density. Your layout might need to compensate for different widths or heights though. Just as it might want/need to change due to portrait or landscape mode, different aspect ratios (a potential issue with these two devices) has the same difference.
So you are incorrect in assuming that your layout differs a lot due to hdpi/xhdpi/xxhdpi etc. You might want to qualify your layouts on available screen width or similar (sw720dp for example) instead if needed.
Nexus 9 has a logical screen density of: 1024 x 768 dip
Nexus 10 has a logical screen density of: 1280 x 800 dip
Having said that, your particular layout issue needs your specific xml layouts to be explained. For many layouts those two devices should be able to look the same.
Note: Your device data is off. Nexus 9 is 2048 x 1536 pixels and has an aspect ratio that's 4:3 mind you, compared to 16:10 for the Nexus 10. Both fall in the xhdpi bucket though for resource qualifiers etc. Physical screen density is 288 for the Nexus 9 and 300 for Nexus 10.
As seen above both have different screen size and different resolution but density is the same. My understanding is one layout should work perfectly on both devices
That's not true, you are building on top of this wrong premise. Simply put:
Devices with different screen sizes, but same density, will always work with the same layout
False: different screen sizes (in inches) mean you probably will have to adjust your views. So, provide different layouts, or at least different dimensions.
Devices with different densities, but similar screen sizes, should always work with the same layout
True: if the screen size is the same, a 40dp button will cover the same portion of screen in both devices. That's because dps are density independent pixels, and allow us to work on all densities out there with a single value.
I suggest you read this official resource, that should clear your mind. In the very first bullet list, we read:
Provide different layouts for different screen sizes
Provide different bitmap drawables for different screen densities
As you can see, there's no Provide different layouts for different screen densities, which was the premise of your question. That's just something you don't do usually, it makes no sense if you use (and understand) dps.
I'm implementing an app for Android(API 10). I have few designs for tablet(supposedly) and for mobile phone. Regarding the previous sentence it might sound a bit stupid: in my opinion layouts should be picked according to device's physical size - not resolution, otherwise there might be a phone with high resolution that renders, say, a grid of 5x5, in rather confusing, inadequately small-sized way. In order to provide division by physical size I gotta use /res/layout-* folders. Agreed ?
Also: I'm a bit confused about multiple-screens guide's definition on physical size. Would you mind explaining what physical size is in terms of Android mean, what it's measured in? Is there any correlation with dpi?
Thanks.
A workaround for api level 10 could be something like this:
use the compat lib from the SDK so that you can design with fragments.
Assume everything before android 3 is a phone. For example use your layout files in layout/* for this (and the rest will be based it on unless overriden). This assumption is basically only wrong for the original Samsung Galaxy Tab 7" from 2009.
Assume everything on android 3.x is a tablet (they are), so do some tablet specific layout if you want and have them under layout-v11 (and maybe also layout-v12 if there is anything specific to android 3.1). Tablet specific layout could mean that you arrange your fragments differently and/or show multiple fragments at the same time.
Everything newer (android 3.2+) you can use the new stuff from api level 13. Such as layout-sw600dp/ for some layouts etc etc. http://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts
Physical size is usually measured in inches, it simply tells you the real device's screen size (usually 3-4" inches for phones and 8-11" for tablets).
dpi, is NOT correlated with it. Dpi expresses screen density, how many pixels are shown in a given area (usually a square inch). It could be considered as a measure of screen quality.
Resolution is given by the product of the two; it expresses the total number of physical pixels on a screen.
Going back to your first question, you should be density independent as much as possible; your app should "look the same" on devices with different densities. The /res/layout-* folders are designed to provide this feature, the system scales drawable resources to the appropriate size and you could then declare in your manifest that your app supports any density:
android:anyDensity="true"
On page http://developer.android.com/guide/topics/resources/providing-resources.html#BestMatch you can learn how Android choose the best matching resource.
With Android API 10 the best option for targeting tablets is probably just distinguishing the actual size of the screen in the code using something like:
https://stackoverflow.com/a/5789916/1319155
and then just load a different drawable if the size value returned was greater than 6 (or whatever size you want to declare as a "tablet").
The reason you can't really just use the size folders (i.e. layout/large) is because the folders don't distinguish between phones and tablets very well. A kindle fire and galaxy nexus may both be considered "large" devices.
The reason you can't really use dpi is because that is not a good reflection on what type of device it is, just how "dense" the pixels are on a screen. Most new phones are much denser (having more pixels per inch) than tablets anyway.
There are two ways of doing this. From Android 1.6 (API 4) on, there are four layouts that describe the physical size of the display: small, normal, large, and xlarge. As described on http://developer.android.com/guide/practices/screens_support.html , these correspond to:
xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp
normal screens are at least 470dp x 320dp
small screens are at least 426dp x 320dp
Note that these are measured in DP, not DPI. DPI is Dots Per Inch, and specifies screen density. DP, also written DIP, are Density-Independent Pixels. Again from the guide:
Density-independent pixel (dp)
A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.
In other words, 160 DP = 1". Applying this standard, we see:
xlarge screens are at least 6" x 4.5" (7.5" diagonal)
large screens are at least 4" x 3" (5" diagonal)
normal screens are at least 2.9" x 2" (3.5" diagonal)
small screens are at least 2.6" x 2" (3.3" diagonal)
(Not sure why the selection is so odd, but that's what they defined.)
From Android 3.2 on (API 13), there are more options, as described here:
http://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts
Here you can use "smallest screen width," "available width," or "available height" options to define your own categories; again, the unit in question is DP, which is 1/160". Note that these specify the smaller of the two dimensions on the device--e.g., for a 7" tablet they recommend specifying layout-sw600dp, that is, "smallest width 3.75 inches," which would be intermediate between the "large" and "xlarge" sizes defined in API 4. They have a number of specific comments about this topic, including notes about how the widths are measured (it may exclude things like the notification bar), so it's worth taking a look at the documentation.