Develop Reference

LinearLayout is getting cut off inside ScrollView Android

I have an activity in my app where I would like the user to be able to vertically scroll the content contained inside a LinearLayout which in turn is inside a ScrollView. Here is a summary of what the layout XML for this activity looks like:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="20dip"
android:orientation="vertical">
<!-- a bunch of standard widgets, omitted for brevity -->
<!-- everything renders but starting in this TextView -->
<!-- content begins to get truncated -->
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:gravity="left"
android:textSize="20dip"/>
<!-- this View, really just a trick for a horizontal row, is -->
<!-- completely cutoff -->
<View
android:layout_width="fill_parent"
android:layout_height="2dip"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:background="#color/green" />
</LinearLayout>
</ScrollView>
</LinearLayout>
What I am observing is that content in the inner LinearLayout is being cutoff inside the ScrollView. In the final TextView above, when it contains little text, then the View below it does render in portrait, but does not in landscape. When this TextView contains a lot of text, then it gets cutoff in portrait mode.
I tried the recommendations I found on Stack Overflow. Adding bottom padding to the ScrollView did not resolve the problem, nor did swapping the ScrollView for a NestedScrollView.
Any helpful suggestions would be welcome. This is actually turning out to be a blocker.

Change your inner LinearLayout's margin to padding. Or, if you really need it to be margin (maybe you're using a custom background), wrap your LinearLayout in a FrameLayout.
The ScrollView is taking its height (or, more accurately, it is computing its scrollable range) from the LinearLayout. This value doesn't include margins, so your ScrollView is going to be "too short" by the sum of the LinearLayout's top and bottom margins.

The margins are ignored while measuring, See this
So you can provide padding to your ScrollView and remove margins from your LinearLayout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- a bunch of standard widgets, omitted for brevity -->
<!-- everything renders but starting in this TextView -->
<!-- content begins to get truncated -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:gravity="left"
android:textSize="20dip"/>
<!-- this View, really just a trick for a horizontal row, is -->
<!-- completely cutoff -->
<View
android:layout_width="match_parent"
android:layout_height="2dip"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:background="#color/green" />
</LinearLayout>
</ScrollView>
Also fill_parent is deprecated and renamed match_parent in API Level 8 and higher

Having a TableRow take whatever height is left in an Android TableLayout

I'm porting a board game from Windows Phone to Android and struggle a lot with the Android layout system.
This is the layout of the main page on Windows Phone:
I have a Grid with row definitions like this:
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
This means the controls at the bottom get whatever height is left after the board in the top row has taken what it needs. The board size updates itself at runtime to use the smallest of it's width and height, so that it becomes a square.
I'm almost getting what I want when using a RelativeLayout as root layout, but my problem with RelativeLayout as root layout is that the controls at the bottom ends up filling the entire screen.
I've done several attempts to use a TableLayout as root layout with two TableRows as children, where the first TableRow has android:height="match_parent" or "wrap_content" and the second TableRow has android:height="wrap_content". Even though I set the board size at runtime, Android doesn't resize the TableRow like Windows Phone does, so the first TableRow takes up the entire screen.
How would an expert on the Android layout system attack a problem like this? I've got an alpha release up at Google Play that looks quite well on a 7" tablet, but on phones with high DPI screens it looks like this:
Update:
As Luksprog suggested in a comment, I now use a LinearLayout with the first element having android:layout_height="0dp" and android:layout_weight="1" and the second part having android:layout_height="wrap_content". At first it didn't seem to do what I wanted, because the part at the bottom ended up taking the entire screen as I've experienced on several attempts before.
However after doing some modifications to the "wrap_content" and "match_parent" settings of the elements inside the fragments, I now get a layout that is close to what I want, and it scales quite well on high DPI phones as long as I stick with px instead of dp values for all bitmaps (against all recommendations in the Android guidelines).
Here's is the updated layout and a screenshot showing the result:
<?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">
<!-- Board -->
<EivindApps.Ludo.Droid.Views.BoardView
android:id="#+id/boardView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<!-- Game info layout -->
<LinearLayout
android:id="#+id/gameInfoLayout"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Left column -->
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<!-- Red player -->
<fragment
android:name="EivindApps.Ludo.Droid.Views.PlayerInfoFragment"
android:id="#+id/redPlayerInfoFragment"
android:layout_margin="5dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<!-- Blue player -->
<fragment
android:name="EivindApps.Ludo.Droid.Views.PlayerInfoFragment"
android:id="#+id/bluePlayerInfoFragment"
android:layout_margin="5dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_width="wrap_content" />
</LinearLayout>
<!-- Middle column -->
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!-- Dice -->
<fragment
android:name="EivindApps.Ludo.Droid.Views.DiceFragment"
android:id="#+id/diceFragment"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center_vertical" />
</LinearLayout>
<!-- Right column -->
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<!-- Yellow player -->
<fragment
android:name="EivindApps.Ludo.Droid.Views.PlayerInfoFragment"
android:id="#+id/yellowPlayerInfoFragment"
android:layout_margin="5dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toRightOf="#+id/redPlayerInfoFragment" />
<!-- Green player -->
<fragment
android:name="EivindApps.Ludo.Droid.Views.PlayerInfoFragment"
android:id="#+id/greenPlayerInfoFragment"
android:layout_margin="5dp"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/bluePlayerInfoFragment"
android:layout_width="wrap_content" />
</LinearLayout>
</LinearLayout>
<!-- End of game info layout -->
</LinearLayout>

Android Tablerow unwanted row space

I have a Layout which consists of a RelativeLayout, with a TableLayout holding 15 rows. Basically this is supposed to be a board game.
Each row has 15 RelativeLayout with a ImageView inside each of them.
The three first ImageViews match up evenly, but from the fourth one the ImageViews get a bit smaller height, leaving a small white border / line between the rows.
I have no Idea how to fix this, can anyone help?
As you can see from the image below, the three first squares are in full height, whilst the rest have a line underneath them.
Here is a small part of the code, all the rows are exactly the same so no need to paste all 15:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableLayout
android:id="#+id/board"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="0dip"
android:layout_margin="0dip"
android:fitsSystemWindows="true">
<!-- 15 rows like this -->
<TableRow
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_margin="0dip"
android:padding="0dip">
<!-- 15 relativeLayouts per Row -->
<RelativeLayout
android:id="#+id/boardTile_15_1"
android:layout_weight="1">
<!-- One ImageView per RelativeLayout -->
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="0dip"
android:padding="0dip"
android:src="#drawable/tile"
android:adjustViewBounds="true">
</ImageView>
</RelativeLayout>
<!-- End one RelativeLayout -->
</TableRow>
<!-- End one tableRow -->

Hard to say without testing, but a useful trick to 'debug' complex views like this, is adding background color to relevant subviews (i.e. RelativeLayouts containing your ImageViews), just to check who contains that padding.
You may also simplify as much as you can, for instance, you probably wouldn't need to wrap the ImageViews inside RelativeLayouts.
That said, my guess is that ImageViews need their scaleType attribute to be set, they'd look something like.-
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/tile"
android:adjustViewBounds="true" />
There's no need to set padding/margin, as they're 0 by default, and remember that fill_parent is deprecated from API level 8.

What's the name of the grid-like layout used in Google+ apps?

I am thinking to build an app which will have the same grid layout like in the picture, but I cant figure out what layout I should use.
GridView, or something like that?

It is possible using StaggeredGridView . Check out below repos on github
https://github.com/maurycyw/StaggeredGridView
https://github.com/chrisjenx/StaggeredGridView/tree/master/demo

Simple enough to do it with LinearLayout:
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Stack rows vertically -->
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<!-- First row, two items -->
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<!-- First item, 50% of width -->
<FooView android:id="#+id/foo1"
android:layout_width="0px"
android:layout_weight="1"
android:layout_height="wrap_content" >
<!-- Second item, 50% of width -->
<FooView android:id="#+id/foo2"
android:layout_width="0px"
android:layout_weight="1"
android:layout_height="wrap_content" >
</LinearLayout>
<!-- Next row, just one item -->
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<!-- Third item, 100% of width -->
<FooView android:id="#+id/foo2"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</LinearLayout>
<!-- And so on... -->
</LinearLayout>
</ScrollView>
Obviously, the exact nature of "FooView" is up to you, as are decorative borders, shadows, etc. In practice, you'd want to do this programatically, but this static xml layout shows you what you're after.
GridLayout also would work, but it's only available in 4.0 and above, unless you want to start using the compatibility library. Since LinearLayout will do the job, that's what I would use. RelativeLayout would probably also work, but I've never been able to get the damn thing to work, myself.

I'm not sure exactly what they use, but you can achieve the same effect with either a GridLayout or a ListView.

ListView pushes other Views off the screen

I'm struggling to get a layout looking correctly, and I've tried to produce the shortest, smallest possible example of my problem.
My goal is to have a header and footer View, at the top and bottom of the screen, with a ListView in between the two, with another View (let's call it the label, it's the gray box from the screen shots) directly below the ListView. This label, and the footer should always be shown when ListView needs to scroll.
Visual Result
When the ListView does not need to scroll (this is correct):
When the ListView needs to scroll, the footer and the gray box are pushed off screen (wrong):
Layout
<?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">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="header"
android:padding="20dp"
android:textSize="18sp"
android:background="#color/red"/>
<ListView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#android:id/list" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="this should be directly below the ListView, but not pushed off screen when the ListView needs to scroll"
android:padding="5dp"
android:background="#color/light_gray"
android:textColor="#color/black"/>
<!-- Used to push the footer to the bottom -->
<View android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="1"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="footer"
android:padding="20dp"
android:textSize="18sp"
android:background="#color/blue"/>
</LinearLayout>
Test Activity
public class TestActivity extends ListActivity
{
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
ArrayList<String> items = new ArrayList<String>();
items.add("one");
items.add("two");
items.add("three");
items.add("four");
items.add("five");
items.add("six");
items.add("seven");
items.add("eight");
items.add("nine");
items.add("ten");
setListAdapter(new ArrayAdapter<String>(this, R.layout.simple_list_item_1, items));
setContentView(com.myproject.android.R.layout.test);
}
}
I've tried a few different approaches, such as giving the ListView layout_weight="1" and removing the blank View that I use to push the footer to the bottom. This is almost what I want, it keeps the footer and label visible when the ListView scrolls, but when it only has 1 or 2 items, I need the gray box right below the ListView. I've also attempted to use a RelativeLayout, without success. I guess I'm completely misunderstanding things.
EDIT
Here's my attempt with a RelativeLayout which still isn't correct.
<?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">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="header"
android:padding="20dp"
android:textSize="18sp"
android:background="#color/red"
android:id="#+id/header"
/>
<ListView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#android:id/list"
android:layout_below="#id/header"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="this should be directly below the ListView, but not pushed off screen when the ListView needs to scroll"
android:padding="5dp"
android:background="#color/light_gray"
android:textColor="#color/black"
android:layout_below="#android:id/list"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="footer"
android:padding="20dp"
android:textSize="18sp"
android:background="#color/blue"
android:layout_alignParentBottom="true"
android:id="#+id/footer"/>
</RelativeLayout>
Relative Layout (Still Wrong):

Add android:layout_weight="1" to the listview. That will make it the biggest element in the LinearLayout, without pushing the other ones off the screen.

This layout adds the header a top of the screen and the footter and the bottom. The list fills the rest of the screen. With theses aproach list elements never be obscured by the footer. See how to add the gray box below the XML...
<?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">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="header"
android:padding="20dp"
android:textSize="18sp"
android:background="#color/red"
android:id="#+id/header"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="footer"
android:padding="20dp"
android:textSize="18sp"
android:background="#color/blue"
android:layout_alignParentBottom="true"
android:id="#+id/footer"/>
<ListView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#android:id/list"
android:layout_below="#id/header"
android:layout_above="#id/footer"/>
</RelativeLayout>
Ok. This XML solves the problem of the missing footer. Now we have to add a gray box at the end of the list. I think there is two ways to do it:
Use the addFooterView method: http://developer.android.com/reference/android/widget/ListView.html#addFooterView(android.view.View)
Play with the adapter and the getViewTypeCount() method so you can define two types or elements: normal elements and footer element. http://developer.android.com/reference/android/widget/BaseAdapter.html#getViewTypeCount()

A solution that worked for me was to add positive padding to the bottom of the list view and negative padding to the top of the "footer". This will work in a linear layout or a relative layout.
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="50dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-50dp"/>

Two years late to answer the question, but I will leave my solution so it may help someone with the same problem. I solve this problem using 2 nested LinearLayouts and using layout_weigth. Maybe not the best performatic layout, but it reaches the desired effect.
You need to arrange your layout this way:
Your ListView will have wrap_content height to take only the needed space when not filling the entire screen.
Your ListView will be inside a layout with height using layout_weight so the list will take only the needed space when not filling the entire screen and to take only a limited space of the screen when it have size enouth to push the views out of screen.
The grey box view the should be immediately below the list will have wrap_content height and will be a sinbling of the layout of step 2.
This layout and the grey box will be inside a second layout with wrap_content height so they can stay together.
Now you have a layout with the list and the grey view and the list won't push the other views out of screen if it gets too big; you only need to move the footer view to the bottom of the screen.
5a. If you are using RelativeLayout as your root layout, you can do as sgallego said and use android:layout_alignParentBottom.
5b. But if you are using LinearLayout you need to create a third layout with layout_weigth and put inside the layout of step 4 and a empty view also with layout_weigth to fill the empty space.
Here is a commented example.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- Header -->
<TextView
android:id="#+id/RecordStudy_StudyLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/RecordStudy_StudyLabel"
android:textSize="#dimen/text_large" />
<!-- Body -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<!--
This layout encapsules the list and the button that must be immediately
below the list with a wrap_content height, so the list plus the button
fills only as much space as they need (if the list is not big enouth to
fill the entire screen).
-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!--
Layout with varaible size with a list inside.
Using layout_weight tells android that this layout should not grow
greater then the screen, but uses only the free space.
-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<!--
Inside this limited height layout, there is a list with height
wrap_content so it can grow as much as it needs INSIDE the
layout (through scrolling).
-->
<ListView
android:id="#+id/RecordStudy_StudyList"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<!-- Button immediately below the list -->
<Button
android:id="#+id/RecordStudy_AddStudy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/RecordStudy_AddStudy" />
</LinearLayout>
<!-- Space between the list and the footer -->
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
<!-- Footer -->
<Button
android:id="#+id/RecordStudy_ConfirmButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/RecordStudy_ConfirmButton" />
</LinearLayout>

One solution that I implemented and found useful was to keep the listview inside a linear layout with fixed height so that it doesn't extend and overlap other items.
Something like this:
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="header"
android:padding="20dp"
android:textSize="18sp"
android:background="#color/red"
android:id="#+id/header"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="150dip" //assume 150dip height is sufficient
<ListView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#android:id/list"
android:layout_below="#id/header"/>
</LinearLayout>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="this should be directly below the ListView, but not pushed off screen when the ListView needs to scroll"
android:padding="5dp"
android:background="#color/light_gray"
android:textColor="#color/black"
android:layout_below="#android:id/list"/>