Develop Reference

Divide screen width equally and a few more layout questions

I am stuck somewhere... I am writing an app for logging behaviour observations of grazing cows. The idea is that at the bottom of the screen, I have fields with identification of the individual animals. To register an observation, that field is dragged to one of the fields at the top, i.e. drag 240 to Grazing to show that now is cow # 240 grazing.
The layout of the screen is build up using a number of linear layouts. Basically the layout is
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="250dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="100dp"
android:layout_height="150dp"
android:background="#drawable/shape">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:text="Grazing" />
</LinearLayout>
Then the linearlayout / textview pattern is repeated three more times at the top and a similar pattern is used at the bottom (the shown part of the xml is edited)
At the moment I am stuck at three different issues:
1) How can I divide the screen space at the top and the bottom equally between the four drag zones and drop zones, respectively? I have tried to use weight rather than fixed values for the width, but if I try that, the app crashes. - btw, the number of zones may vary slightly.
2) How do I get the text to center in the zones. When I search, I am told I have to use layout_gravity="center", but that does not work - as far as I understand the layout, that will put the textview in the center of the linearlayout - how do I then make sure that the text is in the middle of the textview?
3) Why are the bottom zones partially "falling off screen"? They are equal to the upper zones, exept that they are wrapped in a linearlayout with layout_gravity="bottom" - i believed that would cause them to have the bottom at the bottom of the screen..
(If it matters, I am doing development using Aide on my phone)

Divide the height in this manner. Here i have divided the height of the screen in 3 linearlayouts
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>

For the first and third question you can use Fahim's answer, Using layout_weight is the solution.
If you want to use layout_wight for horizontal Linearlayouts android:layout_width must be "0dp" and for vertical layouts you need to set android:layout_height="0dp"
And if you want to set the text in the middle of the TextView you should set android:gravity="center". android:layout_gravity="center" will set the TextView in the center of its parent and has nothing to do with the text.

layout_weight meaning in the case of nested LinerLayout

In this layout definition:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="7"
android:id="topLayout"
android:background="#android:color/holo_green_light">
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:layout_weight="2"
android:id="bottomLayout"
android:background="#android:color/holo_orange_light">
</LinearLayout>
</LinearLayout>
I don't understand why the named "bottomLayout" is higher than the topLayout. You can see a commented screenshot of the result in Android Studio.

First of all fix your xml and change layout_height to 0dp.This is because your are using weights to manage height and at the same time your are instructing it to fill parent.
Second, if you'll experiment by giving weights as 1 for each you'll notice that both the layouts are now divided equally.What I assume is that weight is the calculation of available space that's left after adding the view i.e The weight is calculated according to the available space.
Check in your preview by clicking on the outline for any overflowing of layouts out of screen, you might find that some part of your layout is out of screen. To get some clarity either use your weights according to percentage for example instead of giving in 2 and 7 try with 0.2 and 0.8, this will balance the weigts. Or you can use the attribute "weight_sum" to declare total available weight and then distribute it evenly, for example with weight_sum 100 you can follow a percentage based approach.
See this link for further clarity.

LinearLayout children are laid out in order they are declared.
layout_weight mechanism only distributes any remaining space to elements in proportion to their weight, it doesn't affect the ordering.
This is unlike some other environments where a "weight" parameter affects an item's position in a container.

If you make your code to like this then you can find solution
<LinearLayout
android:![enter image description here][1]orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="7"
android:id="topLayout"
android:background="#android:color/holo_green_light">
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="3"
android:id="bottomLayout">
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="b"
android:id="#+id/button4"
android:layout_gravity="center"
android:background="#android:color/holo_orange_light"/>
</LinearLayout>

if you want to use layout_weight in linearlayout then you have to add weightSum in parent LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="10"
android:orientation="vertical"
>
<--70% of free space in parent LinearLayout-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7"
>
</LinearLayout>
<--30% of free space in parent LinearLayout-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
>
</LinearLayout>
</LinearLayout>
in xml comments i wrote 70% of free space in parent LinearLayout
if you add some layout with exact height then both your linearlayouts will occupy 70% and 30% of left height in that particular linearlayout
for example if height of your parent linearlayout is 100dp
your child layouts will be drawn first one 70dp and the second one will be 30dp tall
but if you add some imageview with height 50dp then your first child linearlayout will be about 35dp tall and 15dp for second one

How to have tablelayout not exceed certain space limit (not push other views off screen)

Is there a way to limit how big a tablelayout/scroll view can get so that what ever view that comes after is not hidden?
For example, I have the following XML below an the first TextView and button are wrap contents so they will occupy a certain space. Now the Scroll/View table has its rows dynamically added ( and can get big or can be 0 rows). The last linearlayout has to be shown at all time. So Ideally I want the linearlayout to occupy 10% of the screen and whatever left (after the allocating the first Textview and button space) is allocated for tablelayout/scrollview.
Is there a way to do that? When the table is empty the linear layout should push up and not stay at the bottom of the screen. I have tried using weights but it seems I am just not getting it
<TextView ..../>
<Button ..../>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="0dp"
android:shrinkColumns="*"
android:stretchColumns="*" >
</ScrollView>
<LinearLayout
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
... />
<TextView
... />
</LinearLayout>

you'll be surprised to know but it is just very simple.Just put your scrollview between the button and the linear layout. Use android:layout_below and android:layout_above to achieve this. Keep everything wrap_content.

Fixed proportion of layout on screen

In my app, I have 2 linear layouts: one at the top, one at the bottom.
I'd like that whatever is inside these layout, the layout of the top occupies 60% of the height of the screen and the layout of the bottom 40%.
Here is my XML code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1.0" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.6"
android:orientation="vertical"
android:id="#+id/layout_top">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="0.4"
android:id="#+id/layout_bottom">
</LinearLayout>
</LinearLayout>
When these layouts are empty, no problem, they have the good proportion.
The problem is that if I put a small listview in the top layout for e.g. then the layout will take the size of the listview and won't preserve the 60/40% proportion.
I'd like that even if my listview is small (only 3 item for eg), the layout preserve it's 60% and so put some empty space under my listview.
I've tried to change android:layout_height to match_parent but it doesn't change anything.

Try using this Layout it works for me
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1.0" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="6"
android:orientation="vertical"
android:id="#+id/layout_top"
android:background="#FF0000">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:orientation="vertical"
android:layout_weight="4"
android:id="#+id/layout_bottom"
android:background="#FF00FF">
</LinearLayout>
</LinearLayout>
The trick is to set up a layout_height="0dip" instead of wrap_content in portrait mode and layout_with="0dip" instead of wrap_content in Landscape mode you can use layout-land folder for that.

layout_weight specify extra space in the layoutfot the view. you should try measuring your screen first like:
Display display = ((WindowManager)
getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
int width = display.getHeight();
and then doing some calculation like width*0.6 and 0.4 , this way your layout will always have 60 40 ratio.
Hope This Helps

try layout_height = 0dp in both the children LinearLayouts. Its happening because you have wrap_content which is probably overriding the layout_weight effect.

Simply in your parent layout, replace android:layout_weight="1.0" with android:weightSum="1.0"
This works by setting the weight sum of the parent layout and the weights of the children layouts. The weight of the children should be equal to the weight sum of the parent. Take a look at this http://blog.stylingandroid.com/archives/312

Preventing an Android ListView from taking up almost all of the screen height

I am trying to setup an activity in Android that has 50% of the screen hight for a ScrollView and the other 50% for a ListView.
To do this I have set the weight of each to "1".
Like This:
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dip">
<ScrollView android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1">
<TableLayout android:id="#+id/my_table"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:shrinkColumns="0">
<TableRow android:padding="5dip"
android:id="#+id/fault_heading"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/table_title"
android:paddingRight="20dip"/>
</TableRow>
<!-- More rows are added at run time. -->
</TableLayout>
</ScrollView>
<ListView android:id="#+id/comments"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"></ListView>
</LinearLayout>
When both the ScrollView and the ListView have too much content to display without scrolling this works perfectly.
When the ScrollView only needs 20% of the screen and the ListView needs 70% the ListView grows to 70% so it can display without scrolling. This is not what I expected to happen but is good.
The problem I have is when the ListView has so much data that it would need the whole screen to display AND the Scroll view only 1 or 2 rows of data in it. In this case the ListView grows to take up almost the full height and leaves space equivalent to about one line of text for the scroll view.
I can't seem to get my head around how to reserve a certain proportion of the screen for the ScrollView no matter how big the ListView gets.
The amount of space the ScrollView can grab seems directly proportional to the number of rows in it's child table. When this is only 1 the scroll view is only about half a cm in height.

What about changing android:layout_height for to be a minimum value instead of 0dip?
UPDATED: As per the comments below the solution was to set the outer LinearLayout to have height "fill_parent"

Use these parameters in the ListView section
android:layout_height="0dp"
android:layout_weight="1"