Develop Reference

Android Layout Weight distribution

I am doing the following course at udacity. It's about Android User Interface.
As a part of my course I used an XML visualizer.
http://labs.udacity.com/android-visualizer/#/android/linear-layout-weight
Now upon experimenting I entered the following code
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/ocean"
android:layout_width="wrap_content"
android:layout_height="400dp"
android:scaleType="centerCrop"
android:layout_weight = "1"/>
<TextView
android:text="You're invited!"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:textColor="#android:color/white"
android:textSize="54sp"
android:layout_weight = "1"
android:background="#009688" />
<TextView
android:text="Bonfire at the beach"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="34sp"
android:background="#009688" />
</LinearLayout>
as per my understanding, by using android:layout_weight the whole parent layout is divided as per priority and distributed accordingly, if so, the space after distributing among image and "You're invited!" there should only be remaining space enough, to fill out "Bonfire at the beach".
Then why there is a empty space below "Bonfire at the beach" ?
(Also if possible can anyone please explain how the control flows among XML code).
UPDATE
when I added android:layout_weight = "0" in "Bonfire at the beach" then there is no empty space below. Can any one explain why this happens and why there is space in previous case. and this is the code is used.
before
after
even tried setting height to 0dp

Understand it using the below example
Weight defines how much space a view will consume compared to other views within a LinearLayout.
Weight is used when you want to give specific screen space to one component compared to other.
Key Properties:
weightSum is the overall sum of weights of all child views. If you don't specify the weightSum, the system will calculate the sum of all the weights on its own.
layout_weight specifies the amount of space out of the total weight sum
the widget will occupy.
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="4">
<EditText
android:layout_weight="2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Type Your Text Here" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Text1" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Text1" />
</LinearLayout>
The output is:
Now even if the size of the device is larger, the EditText will take 2/4 of the screen's space. Hence the look of your app is seen consistent across all screens.
[This if before you edit your question might be irrelevant now
Now in your Bonfire at the beach there is no weight and its wrap_content so there is no grantee that it will take the remaining space! and that space can remain after adding it will differ with the screen size of device ]
Note:
Here the layout_width is kept 0dp as the widget space is divided horizontally. If the widgets are to be aligned vertically layout_height will be set to 0dp.
This is done to increase the efficiency of the code because at runtime the system won't attempt to calculate the width or height respectively as this is managed by the weight. If you instead used wrap_content the system would attempt to calculate the width/height first before applying the weight attribute which causes another calculation cycle.
Lets Move to your XML
see how i used them
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:weightSum="3" //<-------------------
android:layout_height="match_parent">
<ImageView
android:src="#drawable/mc"
android:layout_width="match_parent"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:layout_weight = "1"/> //<-------------------
<TextView
android:text="You're invited!"
android:layout_width="match_parent"
android:layout_height="0dp"
android:textColor="#android:color/white"
android:textSize="54sp"
android:layout_weight = "1" //<-------------------
android:background="#009688" />
<TextView
android:layout_weight = "1" //<------------------- if you remove this , this text view will be gone cuz its 0 by default
android:text="Bonfire at the beach"
android:layout_width="match_parent"
android:layout_height="0dp"
android:textColor="#android:color/white"
android:textSize="34sp"
android:background="#009688" />
</LinearLayout>
Now you ask what if you have not given android:layout_weight ,Default weight is zero. Zero means view will not be shown, that empty space will remain there
Since you don't believe you can read the documentation
EDIT: 2
Since you said that, i went through android-visualizer that you use
and Have you ever noticed this...
"Line 6: The attribute android:weight_sum is not supported here."
thing on its bottom.
Meaning they are not providing that functionality to adjust your layout boundaries. Its just a simple online tool.I am
not saying it is not recommended to use, but my personal idea is, you
can't touch the depth of android if you use that.
Now if you want a confirmation what actually happens have a look on android studio/ eclipse as well which are read IDE s
This is android studio
Can you see any view contain your text "Bonfire at the beach"? no
Instead a.studio display a red line in XML.
Suspicious size: this will make the view invisible
Because there is no layout_weight is given and we have added 0 height
Now you can accept the answer :)

How to mimic RelativeLayout params in GridLayout

I am trying to rework one of my layouts using GridLayout and a bit stuck with one of the problems. Here is what I have now:
And this is my layout:
<GridLayout
style="#style/Widget.Card"
android:layout_width="match_parent"
android:layout_height="#dimen/card_height"
android:background="#color/news_card_background"
android:clipChildren="false"
android:clipToPadding="false"
android:columnCount="3"
android:rowCount="2" >
<ImageView
android:id="#+id/thumbnail"
android:layout_width="#dimen/card_thumbnail_width"
android:layout_height="match_parent"
android:layout_rowSpan="2"
android:background="#drawable/news_card_thumbnail_background"
android:contentDescription="#string/thumbnail"
android:cropToPadding="true"
android:scaleType="centerCrop"
android:visibility="visible" />
<com.inrix.twc.view.RobotoTextView
android:id="#+id/title"
style="#style/TextAppearenceNewsTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/news_title_horizontal_margin"
android:layout_marginRight="#dimen/news_title_horizontal_margin"
android:text="Title" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_rowSpan="2"
android:src="#drawable/audio_mrss"
tools:ignore="ContentDescription" />
<com.inrix.twc.view.RobotoTextView
android:id="#+id/footer"
style="#style/TextAppearenceNewsFooter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginLeft="#dimen/news_description_horizontal_margin"
android:layout_marginRight="#dimen/news_description_horizontal_margin"
android:text="description" />
</GridLayout>
But when one of the text views goes very long, it pushes my last column out of the screen:
The question is - how do I restrict my text to go beyond row's bounds, so my icon always stays right-aligned. So basically I'm trying to mimic RelativeLayout's toLeftOf attribute.
I realize I can easily do that with RelativeLayout, but it doesn't quite work for me because of other reasons. I hope it is possible to do with GridLayout

Thats not the target of gridlayout. I don't think that is even (easily) possible. Blockqoute from GridLayout limitations.
GridLayout does not provide support for the principle of weight, as defined in weight. In general, it is not therefore possible to configure a GridLayout to distribute excess space between multiple components.
Some common use-cases may nevertheless be accommodated as follows. To place equal amounts of space around a component in a cell group; use CENTER alignment (or gravity). For complete control over excess space distribution in a row or column; use a LinearLayout subview to hold the components in the associated cell group. When using either of these techniques, bear in mind that cell groups may be defined to overlap.
TextView needs weight to define his own size on the screen (using wrap content).
You can try to use relative layout or build a tree of linearlayout like this:
LinearLayout horizontal
ImageView #thumbnail
LinearLayout vertical weight 1
TextView #title
TextView #footer
ImageView #icon

match_parent not performing as expected

I imagine this should be a fairly easy one to answer, if you understand XML Layouts better than I do that is. I don't seem to get what I was thinking I should when using the match_parent layout_height.
I have a LinearLayout root element with android:orientation="vertical". Inside this LinearLayout I want three elements:
- TextView
- ListView
- TextView
For both the TextViews I set android:layout_height="wrap_content" so that they will be only as tall as is necessary to display their contents. The thing is, I want the one TextView to sit at the top of the form, the other one to sit at the bottom of the form while the ListView fills up whatever space is available on the form. So here is what my xml layout looks like:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="Top TextView" />
<ListView
android:id="#+id/listView_Species"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="Bottom TextView" />
But it doesn't work. Here's what I get. I've selected the ListView so that it will be highlighted. Notice how it extends all the way to the bottom of the form, pushing the bottom TextView off the form.
When I change the layout_height property of the ListView to some fixed value, like 180dp, this is what the form looks like. I'm just posting this to prove that the bottom TextView is there but I still don't know how to get it to be fixed to the bottom of the screen while the ListView takes up whatever space remains, but in between the two TextViews.
Thanks in advance.

While the other answers try to fix your problem (which they don't actually--they suggest you do something that looks similar but may or may not look good on different devices), no one has filled in the gaps in your knowledge of LinearLayouts and match_parent. And these gaps are very common--Google's documentation is still far below stellar.
First, how do Views work within a LinearLayout? Let's go through the process of drawing a LinearLayout, using orientation="vertical" for simplicity.
Examine the height of the first child of the LinearLayout (LL for short). If the height is match_parent or fill_parent (old name for the same thing) then the height of the View is stretched to fill the entire viewing area. If the height is wrap_content, then measure the vertical space the View takes and use that space for the View. If the height is a non-zero number, use exactly that many pixels for the View's height (may clip if too small). If the height is 0 see below.
Put the next view below the view in 1. Check its height and act accordingly.
Continue for all the Views. If a View is pushed off the bottom, go ahead and stop calculating because no one will see it or any succeeding Views (assuming no ScrollView).
If the height of a View is 0, check it's gravity. This requires a second pass, storing the gravity of all the views and then allocating their heights proportionally. As you can guess, the second pass doubles the time layout takes, which isn't significant for simple layouts.
Explanation of your example: The first child of the LL (the first TextView) is measured and takes a certain amount of pixels. Then your ListView takes all the remaining space (via match_parent). And then your second TextView is not drawn at all as it's off the bottom of the screen. Which is pretty much what you observed, but now you understand why.
Solution: Use RelativeLayout. Works perfectly in this case.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/top_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:textSize="30sp"
android:text="Top TextView" />
<TextView
android:id="#+id/bottom_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:textSize="30sp"
android:text="Bottom TextView" />
<ListView
android:id="#+id/listView_Species"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/top_tv"
android:layout_above="#id/bottom_tv"
/>
</RelativeLayout>
The RelativeLayout tells the layout inflater to draw the first TextView at the top, then draw the second TextView at the bottom, and then fill the rest of the space with your ListView. I believe this is exactly what you want.
Welcome to Android. You'll be using this pattern a LOT!

Change the ListView height to 0dp and add weight=1
i.e.:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="Top TextView" />
<ListView
android:id="#+id/listView_Species"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="Bottom TextView" />

use android:layout_weight to define weights to your widgets inside the outermost layout. Declare their height as 0dp and then define android:layout_weight to each one of them .
Total weigh sum of the three of them should be 1. According to your need you can deine 0.1 weight to both top and bottom TextView's and define 0.8 to ListView.
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight = "0.1"
android:textSize="30sp"
android:text="Top TextView" />
<ListView
android:id="#+id/listView_Species"
android:layout_width="match_parent"
android:layout_weight = "0.8"
android:layout_height="0dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:textSize="30sp"
android:layout_weight = "0.1"
android:text="Bottom TextView" />

Horizontally center Views inside Android GridLayout

We are writing an app targeting ICS+ and believe a GridLayout is the best layout paradigm, but it seems very little has been written about it, and we are having some alignment issues.
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/row_background"
android:rowCount="1"
android:columnCount="3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:useDefaultMargins="true"
android:background="#drawable/list_item_bg">
<ImageView
android:id="#+id/visibilityIcon"
android:layout_row="0"
android:layout_column="0"
android:src="#drawable/visibility_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"/>
<ImageView
android:id="#+id/windIcon"
android:layout_row="0"
android:layout_column="1"
android:src="#drawable/wind_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"/>
<ImageView
android:id="#+id/crosswindIcon"
android:layout_row="0"
android:layout_column="2"
android:src="#drawable/cloud_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"/>
</GridLayout>
However, the left 2 icons remain left-aligned, and the right-most icon centers with the remaining space.
Essentially what we need to do is specify the size of each column to be 1/3 (since 3 columns) of the total screen size. I thought this is what GridLayout did, but it appears 'wrap_content' causes this behavior (makes sense), but 'match_parent' causes the first column to fill the entire screen, rather than fill its cell which is the behavior I would have expected.
We seem to have tried every combination of gravity, layout_gravity, etc., but either we fundamentally are doing something wrong, or have found a limitation of the GridLayout.
Thanks for your help!

Only one row and one column is allowed to grow in a GridLayout, and that is the one with gravity along that axis. If more than one row or column specify gravity only one will get it (if I remember it is the "last" one). Choose another layout or write your own. If you only want a row with equally split icons you can use a LinearLayout where the widths of the components are 0px and the weight are all the same, e.g. 1.

android layout dynamic sizing

For many "header" TextViews across the pages I'm designing for a program, I would like them to be the parent.Width / 2 then properly aligned. While that would be fairly easy to code in the Java, I am attempting to do as much as possible in the XML layouts to avoid XML-Java code intersections until the last little bits (button presses, finish page, etc).
Do I have to go through each page and calculate every item's specific width myself or is there a way to put something along the lines of "fill_parent / 2"?
EDIT: Forgot to mention what is likely a key note - almost everything I am doing is in RelativeLayouts, I have very little use for LinearLayouts in this project.

If you have a LinearLayout that is flush to the left and right, you can do the following:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:gravity="left"
android:orientation="horizontal">
<TextView
android:layout_weight="1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:text="I take up half the width!!!1" />
</LinearLayout>
By setting the weightSum on the parent, you're saying that the weights of the children should equal that amount. By setting the single child's weight to half of that, it'll take up half the space. Make sure to set the width of the child to 0 so it knows to use the weight value to calculate its space relative to its parent.
Then, you can align it however you'd like by setting gravity on the parent LinearLayout.

Use a tableview with two columns where each column is stretched and has a text view. Then hide the second textview
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1">
<TableRow>
<TextView android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Set Item Name "/>
<TextView android:id="#+id/hiddenTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="invisible"/>
</TableRow>
</TableLayout>