I created a simple Android app. It only has one activity and one view.
The app was designed for phones. I used the "device independent pixel" unit (dp) for all of my UI element measurements, and RelativeLayout for most of my layouts. The app looks good on a small screen.
On a large screen (such as a tablet), all the elements are tiny, spread apart, and there is a large empty space at the bottom. It's true that the physical size of the UI elements is roughly the same between the tablet and the phone, which is what the dp unit promises, but it's not really what I want for this app. I'd like the whole interface to just get bigger and fill the screen as much as possible, like when you run an iPhone app on an iPad and push the "2x" button.
What's the best way to do this? Do I have to write separate views for each screen size? Should I use pixels (px) instead of dp?
Thanks.
Using px as a measurement would actually be worse - as new tablets have high DPI screens, meaning 100px is going to be visually smaller on a tablet than it would on a mid spec phone.
Your best option is to use layout overrides (layout-sw600dp, layout-sw700dp). Although simply enlarging a phone layout is strictly discouraged.. if you want to take the shortcut all you have to do is copy your phone layout into the sw* folders and tweak all the dp measurements.
You will also need to force the tablet into portrait mode using:
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
Related
I have read Android guidelines regarding different screen sizes, but still I have some considerations.
Client has given me an image from PSD file which has certain resolution that fits
1080 X 1920. I just use wrap_content, and it perfectly fits the part
of screen.
I am not using DP to define its width-height, If i was using DP it would have
adjusted image according to screen sizes.
My questions are,
Does wrap_content works the same way as Density Pixels?
Is it also responsive, and changes the image width-height according
to different screens?
If not, then Is it necessary to use DP to support different screen
sizes ?
Thanks
The setting wrap_content tells your view to size itself to the dimensions required by its content. In the case of your test, your image is 1080x1920 and your device's screen resolution is likely 1080x1920 as well, hence the perfect fit. Since you set the width and height to wrap_content, Android is simply trying to use as much screen space as it needs to correctly display the amount of content it was supplied. In this case, since the available screen space matches the size of the content, it just fits perfectly.
But what if the device screen isn't 1080x1920? In that case, Android will only use as much space as it can, but still attempt to fit the image inside the bounds of the available screen space. In other words, the system will appropriately scale the image down to get it in the container you have provided for it. But this can lead to awkward fits if the aspect ratio isn't the same as the image. For instance, see this screenshot below:
This image is 1920x1080, but notice that it doesn't quite fit. That's because this nexus 7 screen is 1824x1200 when viewed in landscape. Additionally, the toolbar at the top of the screen is eating up available screenspace, making my viewable area even smaller and more awkwardly shaped. So while the system would love this image to extend all the way to the left and right borders, it can't, because then that would mean the height would be bigger than the viewable space. Since I used wrap_content to display this image, the system is using as much vertical space as it can, and the result is that the image doesn't quite fit the horizontal space.
So to more directly address your questions, yes wrap_content is a relative size setting that will make it easier to get a consistent look across multiple screen sizes, similar to using dp. But realize that there are hundreds, if not thousands of available Android devices on the market, and they all have varying screen sizes and densities. So your drawables may not always appear the way you want them on every device.
The way to overcome this is to supply multiple versions of your assets and provide alternate layout files for different screen sizes and densities. Once you do that, all you can do is test, test, and test some more. Use emulators for weird screen densities or devices you don't own, just to make sure you're getting the look you want. In the case of your 1920x1080 image, it looks great on that one device, but how will it fit a large tablet or a tiny handset that is smaller than the resolution of the image? These are situations you must account for in your design.
I suggest you read these resources, as they are hugely helpful in learning how to deal with issues resulting from varying screen sizes and densities:
http://developer.android.com/guide/practices/screens_support.html
http://developer.android.com/training/multiscreen/screensizes.html
Android developers site,and most of you,Push everybody to use dp units on their layouts,
I can understand this approach if you using different layout for different densities,but when my requires is one layout.xml ,and one drawable folder,it is make no sense to me to use it,
because it is NOT preserve proportion.
It seems weird to me that there is no simple way to preserve proportion for all devices.
Just help you to understand my point.
1.make any layout with view inside it
2.set the sizes on dp as Android advise you to do
3.and then check it on the eclipse graphical view of your XML.
It looks way way different between different size devices.
Button with width of 15 dp look like 10 times bigger in 640*480 devices then Tablets.
So what's the point?
I understand all the math of conversion between dp and pixel with density,
but i looking for simple way to preserver the proportion on my layout,without define others for others densities.
The only way that i find to help is using android:weightsum,
But it can not use for margins and other settings.
Any idea?
You can always use your values folder and implements the exact dp size for each of different device densities, so you wont create different layout on different density.
Tablet and handheld devices will never have the same sizes that is where the different layout folders are created to let the developers design on different devices.
I would recommend a different layout design on tablet and handheld devices which most apps applies.
Think of dp units as referring to actual size (like cm and inches). So something that is 250dp will look (for example) about 1 inch on a phone, but also roughly 1 inch on a tablet. No matter the size and resolution of the device, it will always be about 1 inch.
Why is it done this way? Well basically it is the Android creative vision that you won't simply scale your app from a handheld screen to a tablet sized screen. This is why they don't allow you to specify heights and widths as % of screen size. The one small exception is layout_weight in LinearLayout.
You may agree or disagree with their vision, but that's the reality.
I developed my app on a Samsung GT-P7510 (10.1" WXGA 1280x800 pixels). When I download to the Nexus 7 (7" 1280x800 pixels) the buttons that I use appear to be about the same physical size. The Nexus buttons are about 95% of the Samsung buttons. The rest of the screen seems to work OK- the text is in the right location and is proportionately smaller because that is defined in terms of screen height.
All my button sizes are defined using "dp" settings in the XML layout files. I would have expected that with the same pixel ratio the buttons would scale. I am obviously misunderstanding this. What setting would I use to get the buttons to scale?
Why do you think Android should scale your app without anything that you tell it to do?
"dp" simply makes things look the same across devices with different densities (higher density makes use of more pixels) . It won't make things larger or smaller, and it's a good thing since you don't want text to be either huge or too small to be able to read.
For text, BTW, it's usually better to use "sp" so that the user might be able to change its size (because people might have eyes problems to read small letters).
If you wish to scale things, you can either create your own mechanism (like this one) or use openGL .
I am currently putting together an application for my HTC Evo 3D phone which has a screen resolution of 960x540. I have set up a custom layout configuration for designing the interface at this resolution. When in this configuration the widgets (texts views, seek bars etc.) appear small and compact, sparse on the screen. Whereas when I launch the application on my phone the buttons are considerably larger and fill the screen more. Is there some setting in Eclipse that will allow me to view the layout in the editor exactly as it would appear on my phone, allowing for easier design of the interface.
Many thanks, Mat.
with relevant code would be easer to help, however, if you are using dp unit measure, sizes will change according to resolution:screensize, not just resolution. I think also a "wrap_content" given to a textview/button etc. would change in size, because font size would be in sp. So, look if there is any emulator configuration that fits real device resolution AND screen size.
Take a look here for more info about measure units.
EDIT
so are you seeing it in eclipse in the graphical layout of yourlayout.xml? on the top bar of that window there's a dropmenu for display configurations, change it to see the layout in different screens (I don't see any 960x540 btw). however, if you really want to develop for one single device is a matter, but if you're going to release the app for different devices, you need some strategy to make flexible layouts. this is very useful.
I have developed an application for Android Smartphones (including 7 inch tablets and Notes) , i forced the application to be run in vertical (by AndroidManifest.Xml)
Now i want to develop the same application for tablets ( specially for 10.1 inches) :
it will be the same APK , or its better to Create another APK ?
Is there anyway to find if device is tablet or not? (size of screen or something)
if it will be same APK , how can i force the app to stick on Vertical for Smartphones and stick on Horizontal for Tablets? (
Meaning if app is running on tablets it will never rotate to
vertical and vice versa for smartphones )
how can i define layouts for horizontal ?!
if anyone got special experience on doing this please share it with me
I would like to give you some suggestions.
it will be the same APK , or its better to Create another APK ?
It should be a single app.
if it will be same APK , how can i force the app to stick on Vertical
for Smartphones and stick on Horizontal for Tablets? ( Meaning if app
is running on tablets it will never rotate to vertical and vice versa
for smartphones )
For layout issues concider this. which should give you some basic idea about how to acheive it.
how can i define layouts for horizontal ?!
For horizontal layouts you can define a seperate layout. You check for the screen size or whatever stuffs which proves for horizontal layout and set the layout.
if anyone got special experience on doing this please share it with me
I have followed it by using the screen sizes and I have used the layout depending on the size. Have a look at this explains somethings to you.
Edit :
Same applies for the vertical layout as well. That is have a vertical layout defined.
For Horizontal use dp. Know about it with above first link. There you can have it like below.
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.