I want to provide 2 different layouts for these 4 devices. I want Nexus4 (1280x720) and Nexus7(1024x600) use layoutA and NexusOne/NexusS (both 800x480) to use LayoutB.
I read the developer guide and still cannot figure out what kind of qualification I should specify to the different layout folders in "/res".
What's more, I even want the NexusOne/NexusS to use layoutA in portrait mode and layoutB in landscape mode.
In a summary, the threshold of the difference is the width and the density of the screen. I want to:
w>480dp use layoutA
w<480dp use layoutB
Can I achieve these goals at the same time?
Take a look at the docs - http://developer.android.com/guide/topics/resources/providing-resources.html
For N4/N7 have the resource directories
layout-sw600/layoutA
For N1/NS have the resource directories
layout/layoutB
Taking into consideration landscape and horizontal layouts, have an additional directory for N1/NS alone.
N1/NS
layout-port/layoutA
It's wall written in the tutorial. The folders you want are:
/res/layout-sw480 with layout A
/res/layout-land-sw480 with layout B
/res/layout-land-sw720 with tablet and nexus4 layout
Thanks for the gentlemen's answers above. I have tried many combinations of the qualifications and finally figured out the correct one:
/layout - small layout for short width as N1/NS-port, QVGA-port
/layout-w360dp - big layout for large screens N4/N7, and for landscape mode of N1/NS and QVGA
/layout-land - same as above
This works fine for me. The trick here is that QVGA is ldpi, N7 is mdpi, N1/NS is hdpi, N4/GN is xhdpi. I haven't tried it on a screen smaller than 320x480
Related
I am new to designing for android apps, and i have seen layout folders being split into four folders
1)layout-small
2)layout
3)layout-large
4)layout-xlarge
But i dont know which type of devices go into which of the above folders.There are many devices shown in the graphical layout.For example the 10.1 inch tablet would go into the xlarge folder.The 7 inch tablet would go into the layout-large.What about devices of other sizes?How to be sure which goes into which?Is there any scale for it?Please help!
You're most likely over-thinking this. What kind of app are you making exactly?
Just to put things in perspective, below are the official size distributions as of November 3rd, 2014.
And even then, if you follow best practices, it's not a given that a normal layout can't work for other sizes. It's just something that you need to test for, just in case the end result at different sizes doesn't look quite right to you.
You can use:
res/layout – def
res/layout-small res/layout-normal
res/layout-large
res/layout-xlarge
Or:
res/layout-sw200dp
res/layout-sw600dp
res/layout-sw800dp
sw - smallest width
You can read about this here
The quantity of pixels within a physical area of the screen; usually referred to as dpi (dots per inch). For example, a "low" density screen has fewer pixels within a given physical area, compared to a "normal" or "high" density screen.
so basically i use to design the application for the simple layout file and using the Relative layout it fits for all the screen sizes
when you adjust the weight of the view as
android:weight="0.40"
this fits for all the screens according to their screen weights. so try using relative layout and use weight.
I am going to develop new application in Android. This application should only work in portrait (even for tablet). Also the UI and layout design should be similar on phones and tablet. We can't change the layout design for tablet as it has huge area to use. We have to stretch all the images to match phones. We can use nine patch. But I am little bit confused of using images in multiple drawables.
As per my analysis (may be wrong.. : ) ) the screens are divided into density and sizes. We can use the scaling ratio of 3:4:6:8. But this ratio is based on the density. But in my case I have to stretch the entire UI to fill the Tablet screen.
So what are the drawables that can be used for a app like this which can support multiple devices. And what are the screen sizes for which we have to design.
And this application needs nearly 100 layouts. So I am planning to maintain single layout and designing the layout using weight for each layout instead of using dimension.
Also if I used multiple APKs to support different screen size what are the drawables used to support
1. Small and Normal
2. Large
3. Xlarge
I just did something very similar. To stretch the app without creating new layouts I used dimensions set in XML
res/values/dimensions.xml
res/values-sw600dp/dimensions.xml -> 7+ inches
res/values-sw720dp/dimensions.xml -> 10+ inches
Dimensions are resources files:
<dimen name="default_padding">11dp</dimen>
You can increase the dimensions by about 30% in the 600 and 720 file.
Then simply used #dimen/default_padding in your layout and it will be scaled
Regarding images, either you make sure you have all your assets in all densities, or you set fixed size to you ImageView's and appropriate scaleType
Firstly, you do NOT want to create multiple APKs to support multiple screen densities. Android provides all of the framework you need to support everything within one build, you just need to create the right resource hierarchy drawables with your desired densities.
So what exactly do you need... based on your question the following:
portrait mode: you can specify this in each Activity declared in your AndroidManifest file using the following:
<activity android:name=".MainActivity"
android:label="#string/app_name"
android:configChanges="orientation" >
...
</activity>
NOTE: Per the Android docs, if you're targeting API >= 13, and you use the android:configChanges attribute you should also use the android:screenSize attribute to help specify size changes.
dimension sizes for various screens: as touched upon, this can also be handled in resources. This is your best way to use one common layout file but configure the layout for use on numerous devices. See http://developer.android.com/guide/topics/resources/more-resources.html#Dimension for how to use dimensions if you're unfamiliar
drawables: it sounds like this is the crux of your question. As you mentioned, using nine-patches will help you reduce your app footprint and fill in extra space (see here and here for more on nine-patches). The sizes you should support and the densities needed for those sizes are discussed in great detail in Android design docs, so much detail I could not even do it justice rehashing it here. I've provided links below to as many places as I could remember that this is discussed.
Good luck!
Here are links to Android design docs that you will find useful (some of which have been mentioned):
http://developer.android.com/guide/topics/resources/providing-resources.html#AlternativeResources
http://developer.android.com/training/multiscreen/index.html
http://developer.android.com/guide/practices/screens_support.html
http://developer.android.com/design/style/devices-displays.html
In addition to the pixel density specific folders, you can specify screen-size specific folders
drawable/
drawable-large/
drawable-xlarge/
drawable-hdpi/
drawable-large-hdpi/
drawable-xlarge-hdpi/
drawable-xhdpi/
drawable-large-xhdpi/
drawable-xlarge-xhdpi/
So you could design scale appropriate graphics for the various screen sizes and densities. Please note that a give screen size category (e.g. "large") will only give you a rough idea as to the actual device pixel dimensions of the device, but you'll get good guidelines for min/max dp ranges.
For example, you might have a 100x100 image you want to display on phones (screen size "normal"), you'd create image assets at 100x100, 150x150, 200x200 for drawable, drawable-hdpi, drawable-xhdpi folders respectively. But on 7" tablets, i.e. "large" screen size devices, you might display this same image at 200x200, so your "drawable-large" folder assets would be 200x200, 300x300, 400x400, and on 10" tablets, i.e. "xlarge" screens, you might display the same image at 300x300, 450x450, 600x600, so these go in "drawable-xlarge-*" folders.
All the details are here:
http://developer.android.com/guide/practices/screens_support.html
First you need all the possible screen layouts
drawable
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi // phones like s4
drawable-xlarge
drawable-tvdpi // nexus 7 etc
drawable-xlarge-xhdpi //tablet like nexus 10
layout : for phone
layout-sw600dp
layout-sw720dp
then you need to put all use 9- patch images for buttons etc ... you can also make your custom drawable it would be easy and handy to work on ..Also you can take dpi for each screen by using switch and scale it the layout accordingly.
As, in one of my project I had used this technique for showing respective thing to each resolution device .
DisplayMetrics metrics = getResources().getDisplayMetrics();
int densityDpi = (int) metrics.density ;
switch (densityDpi) {
case (int) 1.5:
break;
case (int) 2: //1.75 will be 2 in INT.
break;
default:
break;
}
also keep all the values you are going to used for margin padding etc values-sw600dp for tvdpi tablet ,value-sw720dp for tablets
Last but not least keep all thing generic as much as you can and put it in drawable ..
I have seen some ppl who used background patterns of different dpi's and put it in respective drawable .. if there is such thing like pattern make your custom drawble and repeat it accordingly
that will save your time .. hope it may help you
In order to stretch all the images to match phones you can specify the image size using the sdp size unit. This size unit is relative to the screen size so it can fulfill your requirement.
I am working on a app in which there are some textfiels and button when I am running it on different screen size devices it is showing unexpected result as shown in the below image!
[Image 1] http://oi45.tinypic.com/25yvon4.jpg
[Image 2] http://oi45.tinypic.com/xmlqns.jpg
Here in first image some space is left vacant at the bottom due to large screen size and in second image the last row of buttons are hidden due to small screen size.Also for buttons I am using Table Layout.
Is there any way to solve this problem.
That's a broad topic that needs spatial understanding first.
Here's a good place to start - http://developer.android.com/guide/practices/screens_support.html
Long story short, always use point units (dps), try to avoid to hardcoded pixels within your code, position items in a relative way (ie.: in relation to other object - RelativeLayout, LinearLayout, etc) and make sure to take advantage of the power of "values-..." folders.
Example
values-xhdpi (XH)
values-hdpi (H)
values-mdpi (M)
values-land (Landscape)
values-sw600dp (smallest width at least 600dp)
....
Use layout, layout-large and layout-xlarge resource folders to customize your layout files if you care about various screen sizes. Test these layouts on phones, 7" and 10" tablets to cover all of your bases.
For small phones of less than 4" screens (qvga) as well as older devices (wvga), make custom layout files (in the layout folder) and refer to them dynamically in your java code when you detect these kinds of devices. Again, test on these older & smaller phones as much as possible. Borrow some phones from the Sony Device Loaner Program in order to get real-world testing done.
Lastly, use ScrollView to embed your layouts if you want vertical scrolling on smaller screens. Don't go crazy trying to fit everything on a smaller screen. Sometimes scrolling is a natural solution that your users will understand.
You must have to make screen for all devices if you want to solve your problem.Read below document for different screen:-
http://developer.android.com/guide/practices/screens_support.html
or
You can use weight or layout weight to prevent this problem.
I have 2 devices, a 1024x600 7" tablet hdpi running Gingerbread and a hub attached to a touchscreen which is 1920x1008 22" in size, hdpi running ICS. The Android OS seems to consider both as "large" (240dp).
So, they have the same actual density (240dpi), same generalized density (hdpi), same generalized size (large) but different actual size (7" vs 22")
The text and spacing dimensions that I specify for my layout work great on the 22", but then on the 7" they look enormous and dont fit on the screen.
I've tried using dp and sp, no difference as I think the problem is that Android sees these things as the same size / density. Does anyone have any recommendations on how I can be able to scale sizes appropriately?
This program wil also eventually need to be supported on a 4.5" handheld as well.
Thanks in advance.
Sorry, my previous answer was completely wrong = )
Ideally, you should be able to design for the 7" tablet and have your layout scale up to the TV. But if that doesn't work you should be able to use something like layout-sw1008dp. The "sw" prefix allows you to specify the minimum dimension of the smallest side of the screen - so in the case of a TV, the height.
I am also facing such problem in my application. But i found a good solution for this.
I have only one layout for tablet and directory name is layout-sw600dp.
Now, when part came to height and width problems, I have created several different values directory in which i place dimensions and font size and other stubs. So there will be no constant value in layout of tablet screen.
androd:layout_width:"60dp" // i drop this scenario
androd:layout_width:"#dimen/tab_width" // i used this scenario
and your values directory name will be like
values-xlarge
values-large
All the values will be fetched from your values directory. It will not create different layout, but one layout can be used multiple times.
See my stack answer which may help you.
I have designed attached screens for my app. The app targets android 1.6 and above. Currently the app is running on majority of hdpi and mdpi devices and few devices having some odd resolution like 1024x600 with 169 dpi, 1024x600 with 179 dpi, 1024x600 with 240 dpi. I have provided alternative layouts to support multiple screens in below mentioned folders.
layout: Default layout resources.
layout-hdpi: For hdpi screens. Few layouts in my projects need to be specifically optimized for this.
layout-mdpi: For mdpi screens. Few layouts in my projects need to be specifically optimized for this.
layout-large: Default layout resources for large screens.
layout-large-hdpi: Layout resources for hdpi screens having resolution 1024x600
layout-sw400dp-v11: This is mainly for 7" tablet. Only devices running Honeycomb or above can recognize this.
Now I also need to add support for qHD screens(540x960 having 256 dpi or similar). Below is the example screen I need to design and add support for qHD screens. This screenshot is taken on HTC Incredible S having resolution of 480x800 with 240 dpi.
I have designed layout for qHD screens so that it will look same on those screens as well.
Now, I have below questions:
1. Am I having right directory structure for providing alternative resources considering I need to support hdpi, mdpi and above mentioned odd screens? If not, how should I provide alternative resources as for those screens? I really need to design separate file so that the UI looks the same across multiple screen resolutions and densities.
2. qHD Screen are having 256 dpi. That means those screens are hdpi screens. I already have resource for hdpi screens which looks as above on most of the devices. but when I view it on qHD screens, it looks like below screenshot. So, how do I provide alternative resource for qHD screen such that it won't affect my current layout resources which are showing good on most of the devices?
#Espiandev
A qHD, hdpi device has a display-independent pixel (DIP) screen size of 360x640, whereas the Incredible S's is 320x533 hence why some of the images are higher up the screen relative to others. So essentially, the qHD device can show more stuff that the Incredible S, per screen. See here for an explanation of DIPs and some more tips
-- Thank you for this insight. I am aware of this. Also I have read post by Dianne Hackborn,; "New Tools For Managing Screen Sizes" - http://android-developers.blogspot.in/2011/07/new-tools-for-managing-screen-sizes.html
From what it looks like, you're currently using some margin or padding above the goal/gain/to go parts, I'd instead suggest changing their gravity to bottom (i.e. align them to the bottom of your screen) and then use a margin or padding below the item.
-- No I am not using padding or margin for these parts. Its a relative layout where goal/gain/togo buttons are below that meter tape button. As you have suggested setting gravity to bottom and have bottom padding; yes, I had tried that as well but then distance between that meter tape button and these circles increase and I have to modify sizes and margins between those glasses, button below that and meter tape button which created different layout file. When you view this screen on small screen devices, views will overlap as small screen devices can show less views.
But I'd work on making your app adaptable to screens rather than trying to divide screen sizes up like this, as you shouldn't really need separate layout resources for mdpi, hdpi etc.
-- I agree that Normally I shouldn't need separate layout for mdpi and hdpi screen. But the requirement here is that screen should look exactly the same on all screens. Like, all views within that yellow circle should not go outside of that circle. That button at the center should be always at the center. Also, the relative sizes of those 3 little circles at the top and below meter tape button should be same. This left me no choice than creating different layout for mdpi and hdpi screen.
I have created different layout file for qHD screen. Now my question is where do I put that so that qHD devices will use that file and other devices will continue to work as those are working now.
A qHD, hdpi device has a display-independent pixel (DIP) screen size of 360x640, whereas the Incredible S's is 320x533 hence why some of the images are higher up the screen relative to others. So essentially, the qHD device can show more stuff that the Incredible S, per screen. See here for an explanation of DIPs and some more tips.
There's no real way to make the UI look exactly the same on the Incredible S and qHD devices. Unlike iOS devices, screen sizes are very varied. From what it looks like, you're currently using some margin or padding above the goal/gain/to go parts, I'd instead suggest changing their gravity to bottom (i.e. align them to the bottom of your screen) and then use a margin or padding below the item. That way it will hopefully stay aligned with your lunch/dinner boxes. If you post your XML file, that will help diagnose the problems.
Before Android 3.2, I don't believe there is a way to distinguish the two cases above, but after 3.2, you can use the swXXXdp (shortest width) attribute. But I'd work on making your app adaptable to screens rather than trying to divide screen sizes up like this, as you shouldn't really need separate layout resources for mdpi, hdpi etc.