Develop Reference

How to set layout height to one screen height except actionbar and status bar, in scrollview

I have a layout in a scrollview and I add another layout to the end of the first one. Actually I am trying to make a one page design and the rest of the other views will appear after scrolling. I tried to put linearlayout1 and linearlayout2 to another view but it didn't work. Also I set scrollview android:fillViewport="true" but it made the scrollview in screen size.
I've added an image of what I want, but it could also be one view, I mean lin1 and lin2 together.
I can set width and height for one phone but I want to do this for each screen. For example like yahoo weather app. They have done one layout for first view and start another view from the end of screen. I tried so many things but I couldn't imagine how to put layouts. Could you help me?
Thanks for your help
Here is what I want
Here is I tried:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroller"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/linearlayout1"
android:background="#android:color/holo_purple"
android:layout_width="match_parent"
android:layout_height="350dp" >
<TextView
android:text="LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearlayout2"
android:background="#android:color/holo_blue_bright"
android:layout_width="match_parent"
android:layout_height="250dp"
android:orientation="vertical">
<TextView
android:text="LinearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:background="#android:color/holo_green_light"
android:layout_width="match_parent"
android:layout_height="350dp">
<TextView
android:text="LnearLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</ScrollView>
But unfortunately I couldn't configure this for each screen size.
enter image description here

Just try this.
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/action_bar"

Instead of hardcoding the height as in:
android:layout_height="250dp"
Set android:layout_height="0dp" and use
android:layout_weight="25"
And also in the other layout use weight. Weight works like this, if you have 3 components in your container, set the weights to let's say 1, 2 and 3 => they will take in that order 1/6, 2/6 and 3/6 of the container. 6 being the sum of 1,2,3. So here instead of using heights as 350 and 250, you can set them to 0 and use weights 2.5 and 3.5 or 25 and 35.

How to make several RelativeLayouts each occupying a potion of the screen?

I want to have a relative layout inside another full-screen relative layout, occupying full width but 50% of its parent's height, preferably done with XML and not java code.
I have figured out how how to align parent's center, and how to fill up the width, but is there a way to get 50% of parent's height? What about 30%? 6.2834%?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="??????????"
android:layout_centerInParent="true" >
The reason I'm trying to do percentage is that, if I specify it with "dip", while the object will remain the same size, the layout will look a lot different on different screen sizes (e.g. a phone and a tablet).
EDIT:
Thank you for all the answers about using LinearLayout and weighting. I have looked at that before, too. I feel I might have over-simplified the problem. Say I need something like this:
I suppose I could use complicated LinearLayout and weighting to outline the center square, then having the center square to fill_parent, like so:
But then what should I do with the other 3 squares (layouts)? Can I have another "layer" of LinearLayout for another square? Or should I divide up the whole screen into many, many small cells and having these sublayouts span over multiple cells (not sure if this is even possible)?

Try to use LinearLayout with weightSum
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2"
android:gravity="center_vertical"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FF0000">
</RelativeLayout>
</LinearLayout>

If you don't absolutely need it nested in one RelativeLayout you can use weight in a LinearLayout as others have pointed out. I just added in an additional RelativeLayout above and below so you can use the rest of the screen if you are trying to. If not, just remove the other RelativeLayouts.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/ParentLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10" >
<RelativeLayout
android:id="#+id/RelativeLayoutTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2.5"
android:background="#color/torange" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/RelativeLayoutMid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="5"
android:background="#color/tpurple"
android:padding="8dp" >
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/describe"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/RelativeLayoutBottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2.5"
android:background="#color/torange" >
</RelativeLayout>

I usually go with a LinearLayout for this and set the weight to a certain percentage :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<View
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="25"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="50">
</RelativeLayout>
<View
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="25"/>
</LinearLayout>
To your edit:
At some point you need to determine the layout. Start by taking the layout in groups. Look for patterns. In your simple explanation we have devised a way using a linearlayout to group 3 objects with one in the middle. With your new layout, could you group those items in any way?
Once you have simple layout patterns set, maybe add specific spacing that you are looking for by defining weights. Then you might want to add a relative layout and start anchoring views to specific views. Ask yourself do they overlap? Does one view always position on top of other views or on the sides. What defines the bounds of your views and then take it from there using linear layouts, weights, relative layouts, toLeftOf, toRightOf, bellow, above, margins, and padding.
Here is an example of what I mean by grouping like objects. It's by no means the best solutions but that all depends on how you define the positioning parameters.
Yellow = vertical linear layout
Green = horizontal linear layouts
You have 1 large vertical layout and inside two horizontal layouts with multiple objects inside of that. From there you can break it down into easier to manage portions on how to arrange and item within that layout. Now with relative layouts you could position items relative to another object, you could remove some of the work handled by the linear layouts but you will then be defining their distance relative to the other objects and might have to fiddle to get the layout to adjust properly on different screen sizes (reason to not use static positioning).

Maybe try using a LinearLayout with 3 layouts inside with android:layout_weight set to 1, 2, 1.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:background="#FF0000"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dip" >
</RelativeLayout>
<RelativeLayout
android:background="#00FF00"
android:layout_weight="2"
android:layout_width="match_parent"
android:layout_height="0dip" >
</RelativeLayout>
<RelativeLayout
android:background="#FF0000"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dip" >
</RelativeLayout>
</LinearLayout>

RelativeLayout does not support percentage of width and height for children. Use LinearLayout with android:layout_weight attribute.

Problems with RelativeLayout

I separated the interface of my app in three areas: header, content and footer.
The header has a fixed size (it has only one image), while the footer and content have sizes that can vary.
In devices with higher resolutions I thought to insert the header and footer on the screen, and reserve any free space for the content area.
In devices with low resolutions thought of putting the content length as little as possible (something like wrap_content) and insert the footer below (requiring the user to perform scroll to view the footer).
The best I got was using RelativeView:
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentTop="true" >
(...)
</LinearLayout>
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true" >
(...)
</LinearLayout>
<FrameLayout
android:id="#+id/content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/footer"
android:layout_below="#+id/header"
android:lay >
(...)
</FrameLayout>
</RelativeLayout>
For resolutions larger works as expected, the problem is that for small resolutions: the content is less than it should, because it takes the space between the header and footer.
How can I solve the problem?
I could not find another way to get content assuming all the free space of the screen (in large resolutions), because I can not simply use fill_parent, since the content is between the header and footer.
I also tried using min-height, but without success.

Top level RelativeLayout layout_height make that fill_parent.
Then FrameLayout remove the layout_above property, just saying it's below the header should be enough.
Finally, FrameLayout may be causing the problem as it's normally used when only 1 element is on the screen and it fills the screen. Try replacing this with a LinearLayout. I've done something exactly like what you want in one of my apps, the layout is (keep in mind in my case I swap out the FrameLayouts for Fragments which are LinearLayout or RelativeLayout based.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainBack"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/transparent" >
<FrameLayout
android:id="#+id/headerFrag"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#+id/homeAdMsgFrag"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<ListView
android:id="#+id/contactList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/homeAdMsgFrag"
android:layout_alignParentLeft="true"
android:layout_below="#id/headerFrag"
android:background="#color/transparent"
android:cacheColorHint="#color/transparent" >
</ListView>
</RelativeLayout>

Some days before I also faced this issue, to solved what I did that I created Header.xml and footer.xml and included this two xml in my all others activities xmls because this two are common in all others activities.
To meet global resolution issue, I used weightsum and weight, applying weight will fixed your header and footer area and content area too.
This way I done in my one of project to resolve this issue, just try it, hope it will works for you.
EXAMPLE
<LinearLayout
android:weightSum="10"
android:orientation="vertical"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_weight="2"
android:layout_height="0dp"
android:orientation="vertical" >
(...)
</LinearLayout>
<FrameLayout
android:id="#+id/content"
android:layout_width="fill_parent"
android:layout_weight="6"
android:layout_height="0dp">
(...)
</FrameLayout>
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_weight="2"
android:layout_height="0dp"
android:orientation="vertical" >
(...)
</LinearLayout>
</LinearLayout>
Thanks.

Android TableLayout expressed as a percentage of LinearLayout

I am trying to place a TableLayout as the only item inside a LinearLayout (It has a background icon I want to cover the whole screen) and I want to centre it and say use 60% of the width and 70% of the height for example. I have this, and it looks ok, but I am not sure it will work across many devices and am wondering whats the best, most general way to express it.
<LinearLayout
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/mylogo"
android:padding="0dip"
android:gravity="center_vertical|center_horizontal"
android:baselineAligned="false"
>
<TableLayout
android:background="#FFFF0000"
android:layout_width="200dp"
android:layout_height="250dp"
android:gravity="center_vertical|center_horizontal"
android:stretchColumns="field">
</TableLayout>
</LinearLayout>
I messed around with layout_Weights, but the only thing I managed to do was make the table disappear.
Thanks
Stephen

LinearLayout can only do child sizing by weights for one dimension but as you're only worried really about sizing a single view, you can accomplish this by nesting LinearLayouts.
<LinearLayout
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/mylogo"
android:gravity="center"
android:weightSum="1.0">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:gravity="center"
android:weightSum="1.0"
android:layout_weight="0.7">
<TableLayout
android:background="#FFFF0000"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:gravity="center"
android:stretchColumns="field"
android:layout_weight="0.6">
</TableLayout>
</LinearLayout>
</LinearLayout>
Whether this layout will look good across devices depends on your content. In general I tend towards reasonable paddings/margins, but again it's very dependent on content.

Try using a RelativeLayout instead of the LinearLayout, because if there is only one child in the linear, it will occupy the full space of its parent.

I think that the way you did is good. You'll probably have some differences between different devices, but you can set different layouts for other screens densities and orientations.
Using layout_weight would help only if you had more than one child inside the LinearLayout.

image out of bounds of image view

I'm having trouble figuring out why my image isn't within the bounds of my imageview. Instead, it is floating off to the left and hidden. Is this only because the Graphical Interface doesn't show it?
EDIT:
I edited the original code to more clearly show the issue i'm having and added a picture(i want the image to show in the red box):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/top_container"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
>
<View
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="195"
android:background="#00FF00"/>
<ImageView
android:id="#+id/img"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ff0000"
android:src="#drawable/img" />
<View
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:background="#0000FF"
/>
</LinearLayout>
</LinearLayout>

Ok I have it working. The height attribute of "block_container" is set to a random 200dp you WILL want to change the height to whatever your needs are, or potentially set it to "wrap_content". I tested this on emulator and device.
I am also assuming that you want all three block to be equally spaced. Notice how the parent "block_container" has a weight_sum of 9? Well the children are equal widths because they have a weight of 3 each (3 blocks * 3 weight each = 9 weight total).
I noticed before it looks like you were trying to use weight as width directly e.g. a weight of 569. Just remember weight != width directly.
EDIT: added the missing id attributes from some of the views
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/top_container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/block_container"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:orientation="horizontal"
android:weightSum="9"
>
<View
android:id="#+id/left_block"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="3"
android:background="#00FF00"/>
<ImageView
android:id="#+id/img"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="3"
android:background="#ff0000"
android:src="#drawable/logo" />
<View
android:id="#+id/right_block"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="3"
android:background="#0000FF"
/>
</LinearLayout>
</LinearLayout>

Why are you setting android:layout_height to be 0dp? I can't even get it to display unless I change this to something like fill_parent.
Either way, its because of your layout_weight for the parent LinearLayout. Specify a larger layout_weight for your ImageView and it will come into view.
<ImageView
android:id="#+id/my_img"
android:gravity="center"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="279"
android:src="#drawable/my_img" />
This worked for me.. but math might not be right.

I don't know where to begin with the issues with what you posted, some simple observations before even debugging further:
Your layouts ALL need ids (e.g. android:id="#+id/another_layout")
You have a width on the second linear layout of 0dp
Your first linear layout has a height of 0 dp, combined with the previous I'm surprised it renders at all
The last inner linear layout again has a width of 0dp
What are you trying to achieve? To me there seems to be a lot of layouts unless you have removed some elements to make it easier to understand? You could post a simple image of what you are trying to do then perhaps we can help you refine the markup?