Develop Reference

Android : buttons go off the edge of the screen

I have a table layout inside a linear layout
after inflating 3 buttons in the table row the last button go off screen
I mean the 3 buttons don't fit the screen width
what should i do?
here is the code
<TableLayout
android:id="#+id/buttonTableLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:stretchColumns="0,1,2"
android:layout_weight="1">
<TableRow
android:id="#+id/tableRow0"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TableRow>
</TableLayout>

The TableRow doesn't check if it's content fit the Screen Size. I guess your Buttons take all of the Space and therefore the last Buttons is outside of the Screen.
I can think of 2 Solutions for this issue:
Use a LinearLayout with weights for each Button:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_weight="1.0" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_weight="1.0" />
</LinearLayout>
You can do this programmatically too of course.
More about weights can be found here: https://developer.android.com/guide/topics/ui/layout/linear.html
Use a Flow-Layout. It automatically checks if your Views fit in the current line and places them in the next if there is not enough space. A good Open Source Library I use myself is this one: https://github.com/ApmeM/android-flowlayout

Setting layout_marginBottom for TableLayout inside LinearLayout has no effect

I've got a vertical LinearLayout (green rectangle), and I'm trying to programatically inflate and insert multiple TableLayouts (red rectangle) to this LinearLayout. Each tablelayout contains 4 cells in a 2x2 arrangement.
It works except that any layout_marginBottom I set for the TableLayout has no effect, the red rectangles are always tightly packed inside the LinearLayout. I would like to create some vertical spacing in between each table.
Please suggest what is wrong with my XML:
LinearLayout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/levellist"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
TableLayout (inserted dynamically). Note the layout_marginBottom that has no effect :
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="100dp"
android:stretchColumns="*" >
<TableRow
android:id="#+id/TableRow01"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<include
android:id="#+id/levelview0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
layout="#layout/levelmenu_level" />
<include
android:id="#+id/levelview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
layout="#layout/levelmenu_level" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<include
android:id="#+id/levelview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
layout="#layout/levelmenu_level" />
<include
android:id="#+id/levelview3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
layout="#layout/levelmenu_level" />
</TableRow>
</TableLayout>

You have a bunch of Views in this TableLayout that are the same. I would suggest trying to use a GridLayout. It should help with so memory management and recycling. But to answer your question, it looks like your are setting the margin for the entire table, not each row. Have you tried putting your layout_margin inside of your row tag? You can also try setting the Padding instead? That way you put the spacing inside of the rows. However, I believe you should get the same effect either way. Margin is outside of the view, padding is inside.
http://developer.android.com/reference/android/view/View.html#attr_android:paddingBottom
<TableRow
android:id="#+id/TableRow01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="???dip">
<include
android:id="#+id/levelview0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
layout="#layout/levelmenu_level" />

How to make a scrollable TableLayout?

Look at the XML code here please:
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dip"
xmlns:android="http://schemas.android.com/apk/res/android">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!-- Some stuff goes here -->
/>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!-- Some stuff goes here -->
/>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!-- Some stuff goes here -->
/>
</TableRow>
</TableLayout>
My code is much longer than that but I just eliminated the unnecessary parts.
The problem is I want to make this TableLayout a scrollable so that all of my stuff can be shown.
I tried to put this line in the TableLayout in order to make it scrollable:
android:isScrollContainer="true"
But it does NOT do the job. Is there a way ?

Encase the whole thing in:
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none"
android:layout_weight="1">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
...
</ScrollView>

You don't technically need the LinearLayout in the ScrollView:
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none"
android:layout_weight="1">
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dip"
android:isScrollContainer="true">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<--!Everything Else You Already Have-->
</TableRow>
</TableLayout>
</ScrollView>
Once you take up enough room within the ScrollView, the scrolling effect will activate (kind of like an HTML TextArea, once you have enough lines of text, the scrolling activates.)
You can also nest the ScrollView, but again you cannot feel the scrolling effect until you have enough content in the ScrollView.

thanks mbauer it's solved my problem
i place in order
TableLayout
TableRow with end (for the header of columns)
ScrollView
LinearLayout
x TableRow with end
end LinearLayout
end ScrollView
end TableLayout

It works too inside Constraint Layout. Just add the following attributes on your TabLayout.
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:id="#+id/tableLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:isScrollContainer="true">
. . .

proportional row size with 1 fixed row

In Android, I'm trying to basically create a table with 2 rows, where 1 row is say 10 pixels, and the other takes the rest of the screen. In silverlight, this is equivalent of a table with 2 rows, one on "Auto" and the other set to "*".
Is there any way to do this? I have been playing with the layout weight, but this is always a percentage, and I would like 1 row to be fixed size (wrap_content basically).
Any ideas?
edit:
I tried what was suggested, but it'snot working.. So I want the first row to take up the entire space, except what row 2 took up. Row 2 consists of 2 buttons side by side, Row 1 is just a ListView. Here is what I have:
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="1" android:background="#FF0000">
<ListView android:id="#+id/edit_group_listView"
android:layout_width="fill_parent" android:layout_height="fill_parent" />
</LinearLayout>
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="0" android:background="#FFFF00">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="50dip" android:stretchColumns="2">
<TableRow>
<Button android:text="#string/button_save" android:id="#+id/edit_group_save"
android:layout_width="150dip" android:layout_height="50dip"
android:enabled="false" android:layout_column="1"></Button>
<Button android:text="#string/button_cancel" android:id="#+id/edit_group_cancel"
android:layout_width="150dip" android:layout_height="50dip"
android:layout_column="3"></Button>
</TableRow>
</TableLayout>
</LinearLayout>
When I view this all I see is the yellow linearlayout (the buttons), no listview at all. The listview has 50 items, and I can confirm it's visible by taking it out of this setup.

Yep, easy actually.
First cell must have the weight of 0. Second cell must have the weight of 1 and fill the parent by width. That way it will take up the remaning space within the container it's in.
Easy! Here's an example for your convenience
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="0" android:background="#FF0000">
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="SomeText" android:id="#+id/theview"/>
</LinearLayout>
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:background="#FFFF00">
</LinearLayout>
</LinearLayout>
=======================================
UPDATE
Mate you overcomplicated it like Crayze!
First. You don't need a table layout for that.
Second the problem is you set both heights of the layout to fill_parrent. So they are both fighting over for the screen size. To fix this you just have to set both the layout sizes to wrap_content. That will work just fine. Here have an example, without the table on your code.
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="1" android:background="#FF0000">
<ListView android:id="#+id/edit_group_listView"
android:layout_width="fill_parent" android:layout_height="fill_parent" />
</LinearLayout>
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_weight="0" android:background="#FFFF00">
<Button android:text="#string/button_save" android:id="#+id/edit_group_save"
android:layout_width="150dip" android:layout_height="50dip"
android:enabled="false" android:layout_column="1"></Button>
<Button android:text="#string/button_cancel" android:id="#+id/edit_group_cancel"
android:layout_width="150dip" android:layout_height="50dip"
android:layout_column="3"></Button>
</LinearLayout>

Use layout weight and set the fixed one to be 0, and the other one to be any number.

Okay so actually I figured this out by reviewing what Taranasus wrote, which was accurate to a degree.
This is the final XML that worked:
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="1" android:background="#FF0000">
<ListView android:id="#+id/edit_group_listView"
android:layout_width="fill_parent" android:layout_height="fill_parent" />
</LinearLayout>
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_weight="0" android:background="#FFFF00">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="50dip" android:stretchColumns="2">
<TableRow>
<Button android:text="#string/button_save" android:id="#+id/edit_group_save"
android:layout_width="150dip" android:layout_height="50dip"
android:enabled="false" android:layout_column="1"></Button>
<Button android:text="#string/button_cancel" android:id="#+id/edit_group_cancel"
android:layout_width="150dip" android:layout_height="50dip"
android:layout_column="3"></Button>
</TableRow>
</TableLayout>
</LinearLayout>
This site also helped: http://www.curious-creature.org/2009/02/22/android-layout-tricks-1/
The problems were that:
1. The orientation had to be "vertical", which actually doesn't make sense according to the docs.
2. The second row (the fixed one) has to have a height of wrap_content, which also doesn't make sense since Google docs about weight specifically say both elements should be fill_parent.

android tableview issue

the following Android layout is a custom row for my listactivity. The second textview in the tablerow does not stretch to fit the column like I want it to. Note that there is only one tablerow because I took the others out for brevity.
<?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="wrap_content"
android:padding="6dip">
<ImageView
android:id="#+id/DocTypeIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:layout_gravity="center_vertical" />
<TableLayout
android:id="#+id/tableLayout1"
android:layout_toRightOf="#id/DocTypeIcon"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:stretchColumns="1">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pages"
android:textStyle="bold"
android:layout_marginRight="10dp" />
<TextView
android:id="#+id/DynamicTextHere"
android:layout_height="wrap_content"
android:layout_width="fill_parent" />
</TableRow>
<!-- Other rows stripped for brevity -->
</TableLayout>
</RelativeLayout>
When I put stretchColumns="1" in, I see nothing but a couple of artifacts on the screen.
When stretchColumns is not there the layout only goes to a fixed width. I believe it might be the RelativeLayout screwing me up. However, that is more of a drastic change than I want. Can I do something small to make this row fit to my screen (both portrait and landscape)?

Can you try: android:stretchColumns="*"