What is the best layout to use to support the app on different devices (Size of screen)?
EDIT
I am not just talking about resizing the layout, obviously the OS does that automatically. I am talking about repositioning the objects in my layout.
by repositioning I mean moving the objects according to the size of the screen. For instance i created my layout for a larger screen which looks great, but when i run the app on a smaller device (smaller screen) some of my User Interface elements were out of the bound of my screen.
There is no "best" layout. Almost all types of layouts will scale to different devices (Android is designed around this concept) other than AbsoluteLayout, which is deprecated anyway.
LinearLayout is best if you just have a row (horizontal or vertical) of content to insert. Using values such as dip values, fill_parent, or wrap_content will automatically adjust themselves to their content or screen size.
RelativeLayout, as Vladimir pointed out, is best for layouts where views are positioned relative to other objects within the layout. For instance, a TextView positioned beside a "Submit" button, is a common example.
FrameLayout is sort of a replacement for AbsoluteLayout; you can layer objects on top of each other, just specifying margin offsets from the sides of the frame.
TableLayout is, as it sounds, a layout for Table style design. You can have multiple rows and columns, and set certain columns to stretch to fit the size of the display, so that no matter the screen size, the layout fits as you designed.
EDIT: If you're having objects falling outside of the screen area, try wrapping your root layout in a <ScrollView>. This will allow the layout to be scrollable.
e.g.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout
..... //and so on
</RelativeLayout>
</ScrollView>
All Layouts are flexible in terms of size... the rule is: don't use AbsoluteLayout. That's all.
And with regards to the repositioning concerns... well, use always dips instead of pixels and you are good to go. Again, don't use AbsoluteLayout, the rest of the layouts should work fine on every screen size. Sometimes you can anticipate those "disappearing acts" by wrapping your layout in a ScrollView.
RelativeLayout is what you should be looking at. It easily resizes the elements relative to their neighbors. Just make sure to include drawables for all resolutions and densities
LinearLayout,RelativeLayout,FrameLayout are import Layouts....
Related
I have been struggling to figure out which layout to use and how to achieve what I am looking for. I've tried gridlayouts, linear and relative layouts as well as scroll views in many different combinations. What I want is something like Google now.
I have two buttons to launch the two modes in my app. I have an imagebutton in the top right which they press for more information and when they do so a text view slides out. I have made the layout work, and to overlay the imagebutton on my mode buttons I require a relative layout. However my problem comes from trying to optimise for different screen sizes. I would like it to centre the buttons to rest a quarter of the way down and the layout to pop out underneath towards the half way mark. For the bottom button I want it three quarters of the way down with a text view that drops down towards the bottom. If there isn't sufficient space to fit everything I want a scroll view for when the text views appear, but otherwise it should fit comfortably and not require scrolling.
How do I do this? Two nested relative layouts within a linearlayout, both with equal weight? Then some how I need to address that if the length of the height (taking in account orientation) does not allow it to fit, adapt it so the buttons are closer and scrollable.
You can use sepperate res/layout folders for different screen sizes just like with drawables, examples: layout-small, layout-large etc.
More explained here http://developer.android.com/training/multiscreen/screensizes.html#TaskUseWrapMatchPar
I have 12 basically identical views which I want to arrange in a grid that covers the whole screen. Depending on the device's orientation, I want to use a 3x4 or a 4x3 grid.
As far as I understand, there are basically three approaches to this topic:
Use a GridView
Use nested LinearLayout instances
Use a TableLayout
I'd like to have a layout that
automatically adapts to orientation changes (as GridView does)
uses all available screen space (as nested LinearLayout instances do)
doesn't allow scrolling (and without that "can't scroll any further" effect of the GridView)
allows me to force the same size on all of my items
By default, GridView has scrolling and doesn't fill the screen, whereas LinearLayout and TableLayout don't automatically adapt to orientation changes.
Currently I'm using a GridView with disabled scrolling and a custom adapter which sets the item views' minimum height depending on the orientation and the container's height to force a filled screen. This works but feels like a really ugly hack.
Dynamically constructing nested LinearLayout instances depending on the orientation would probably also work, although I haven't tried that.
This seems to be a frequent goal (1, 2, 3, 4), but all the suggested solutions are either as hackish as mine or don't satisfy some of my requirements.
As I'm new to Android development I'm not sure whether I'm missing something.
What is the optimal way of implementing this?
I'm targeting API level 8 and above.
Use a GridView
A GridView is a widget that you would use when you want to show data in a grid like manner with a larger set of data(as the GridView's recycling mechanism would provide a greater performance than a normal built hierarchy). This is not your case as you want all the views visible from the start and from my point of view the overhead of a GridView isn't simply worth it.
Use nested LinearLayout instances
A good option but avoid nested weights. You could use instead two LinearLayout with weights on the longest direction(vertical for portrait and horizontal for landscape) placed in a RelativeLayout with a centered anchor view.
Use a TableLayout
Another option. Use the stretchColumns option for the width and weight on the TableRows for the height.
Depending on the device's orientation, I want to use a 3x4 or a 4x3
grid. What is the optimal way of implementing this?
There isn't an optimal way, either of the solutions above could be used, you could also make your own layout.
I am developing one application, right now i am on designing phase. i design one screen
on the 3.7WVGA(Nexus One) screen in eclipse using Linear Layout. but when i test it on 2.7
my some icon are go outside of the screen. my question is that which layout is suitable for all screen whether i design it in 3.7 inch or run it on 2.7.
Please give me a suggestion.
Thanks in Advance.
1st i design it in 3.7 and second in 2.7.
Don't ever, ever, ever design a screen for Android based on an actual screen size. You will always screw yourself up because there are a hundred different screens out there. What looks good on one phone will look like crap on another. That being said, here are some tips:
Use RelativeLayout to lay your button contents out. Once you understand the model it's much easier than you suspect and it will make it easy to automatically scale things.
Only use actual pixel sizes for things that "float". You never want to specify the width of something and try to fill the width of the screen.
Include multiple resolutions of your images. Let the system pick the right resolution for you.
A table/grid layout will make things easier for you on the overall design.
Big panels of buttons are played out. There are other UI options at your disposal (menu buttons, swiping left and right through screens, etc.). When users see a field of buttons it looks like the app was slapped together.
For that kind of layout use GridView if you want it scrollable, or a simple RelativeLayout if you want all the elements to scale depending on the size of the screen (use toRightOf, toLeftOf, above, below and weight to achieve that)
You need to consider the guide provided by android
Multiple Screen Support
What you will do is to provide all screens icon regarding different screens and you can also specify layouts for different screens, for example you want to provide drawables and layout for multiple screens, you will provide resources in that specific folder + below suffix.
Screens for layouts for drawables
ldpi layout-small drawable-ldpi
mdpi layout drawable-mdpi
hdpi layout-large drawable-hdpi
xhdpi layout-xlarge drawable-xhdpi
This topic will be more relavent to your need.
The following are the view groups in android. you can use any of these as per your requirement. But in your case You can use GridView
View Groups in android
FrameLayout Layout that acts as a view frame to display a single
object.
Gallery A horizontal scrolling display of images, from a bound
list.
GridView Displays a scrolling grid of m columns and n rows.
LinearLayout A layout that organizes its children into a single
horizontal or vertical row. It creates a scrollbar if the length of
the window exceeds the length of the screen.
ListView Displays a scrolling single column list.
RelativeLayout Enables you to specify the location of child objects
relative to each other (child A to the left of child B) or to the
parent (aligned to the top of the parent).
ScrollView A vertically scrolling column of elements.
Spinner Displays a single item at a time from a bound list, inside
a one-row textbox. Rather like a one-row listbox that can scroll either horizontally or vertically.
SurfaceView Provides direct access to a dedicated drawing surface.
It can hold child views layered on top of the surface, but is intended for applications that need to draw pixels, rather than using widgets.
TabHost Provides a tab selection list that monitors clicks and
enables theapplication to change the screen whenever a tab is clicked.
TableLayout A tabular layout with an arbitrary number of rows and
columns, each cell holding the widget of your choice. The rows
resize to fit the largest column. The cell borders are not visible.
ViewFlipper A list that displays one item at a time, inside a
one-row textbox. It can be set to swap items at timed intervals,
like a slide show.
ViewSwitcher Same as ViewFlipper.
I have the same problem but i found a very simple solution is use dp and sp instead px. You may read this:
What is the difference between "px", "dp", "dip" and "sp" on Android?
And you may create icons with different resolution and put it in suitble folder.
create a table layout and every row contains a vertical linear layout put all buttons inside and provides weight to each button according to need,at the last put this table layout to ScrollView that is suitable for all android devices
I created a tool that allows you to scale/adjust your layouts for tablets and small screen devices and made a blog post about it here: http://onemanmobile.blogspot.com/2012/04/how-to-scale-your-android-layouts-to.html
Basically, defining your layouts in dp units for one size is not enough if you want your app to fit on all devices and tablets, since there's four different "density-buckets". This tool will allow your layouts to be converted into fitting these density buckets.
It also explains in further detail how to make more flexible layouts for all resolutions.
I'm trying to layout a set of horizontal and vertical buttons. The problem is that if I indicate 'layout_weight' for buttons, their dimensions don't follow the 'layout_width' & 'layout_height' tags.
Here's what I'm trying to achieve
So, buttons must have identical height & width and distribute evenly horizontally and vertically.
Can anyone suggest a solution please?
Thanks
UPDATE: After a lot of investigation and trying out different solutions, I came to a conclusion that my only option is to create my own custom layout and place buttons correctly there.
That configuration (the L shape) might make this a tad trickier... since the corner button might size like it's horizontal counterparts or it's vertical counterparts, depending on which linear layout they are apart of. In any event, you should be using wrap_content for the height or width, and they should all have a weight of 1. It's my understanding that the wrap_content for the height or width is important for the Linear Layout to size them correctly. It might work with fill_parent when the weights are all 1, but if you use different weights on different Views with fill_parent, things won't appear as you expect.
If you can't make it work with linearlayout and weights (which you should be able to do), you could always try to do some manual workarounds using relativelayout.
I'm using several buttons in my app, but both layout_width/height "wrap_content" and "fill_parent" looks weird. The former being to small and the latter too large - both looks weird, and the former is not easy to hit with your finger.
How should I size buttons? Is it typical to define their sizes in dip? Or should I use "fill_parent" with a padding? Buttons looks weird in my app, not so in others.
That is difficult to answer in the abstract. Here are some techniques to consider:
Use android:padding="4dip" (or some other value) to make a wrap_content Button a bit bigger
Use android:textSize on the Button to make the content bigger (use some size in scaled pixels, or sp)
If you want the buttons to fill the space but divide it among themselves, use a LinearLayout, give each button a height (or width, depending if column or row) of 0px, then use android:layout_weight to allocate space between them on a percentage basis. Here is a sample project outlining this technique.
I think it is better to use fill_parent with a padding/margin instead an exact width value. So you are more flexible when the size of the parent view changes.