TableLayout being truncated when placed inside ScrollView - android

I have a TableLayout which is populated dynamically with many rows of data. It contains more data than the screen can hold, so I require it to be scrollable.
My issue is that when I place the TableLayout inside of a ScrollView, it appears to cut off many rows from the top of the TableLayout.
For reference, the full code is here (the question is to cluttered already to fit it all) http://pastebin.com/w7Fi3Bzz
See below for the code related to the issue I'm having
Here is the XML without the ScrollView:
<TableLayout
android:orientation="vertical"
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:id="#+id/tbl_statistics"
android:stretchColumns="*"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
>
</TableLayout>
And what it looks like:
And here is the same XML with an enclosing ScrollView:
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
>
<TableLayout
android:orientation="vertical"
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:id="#+id/tbl_statistics"
android:stretchColumns="*"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
>
</TableLayout>
</ScrollView>
And here is what the table looks like, you can see the top of the table was truncated (it is populated with the same exact data):
I found a similar issue here LinearLayout not expanding inside a ScrollView, but the answers did not help me.

In your current layout:
Remove android:layout_gravity="center" from the TableLayout element.
Add android:layout_weight="1" to the ScrollView element.
Clean and rebuild your project.
Additionally, the fillViewport attribute only works on ScrollViews.

I resolved the same issue only by inserting TableLayout into LinearLayout which is only child of ScrollView. I tried all other variants without success (fillViewport for ScrollView, android:layout_weight="1" for TableLayout).
I used TableLayout to dynamically insert Views to it
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TableLayout
android:id="#+id/activity_displayFields_tableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp" />
</LinearLayout>
</ScrollView>

Related

How to arrange views on the screen?

I have a button, a textView and a scrolView on my screen. I need the button and textView to be beside each other on top and the scrolView under them. How to professionally arrange views on the screen?!
this is what I have done:
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:textDirection="inherit"
tools:context=".MainActivity" >
<Button
android:id="#+id/btnScanAndDraw"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="#string/btnShoePosition"
android:textSize="12sp"
android:onClick="ScanAndDraw"/>
<TextView
android:id="#+id/txvMain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="end">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/imgViewMap"/>
</LinearLayout>
</ScrollView>
Not sure what you want actually. If you are asking questions related to layout, please post a screenshot too. If I understood your question, solution is below.
You are using a LinearLayout, which has only two orientations (vertical and horizontal). Click here to know about LinearLayout. If you want to arrange your UI in a relative manner use RelativeLayout. RelativeLayout. I have changed your code with some new attributes. It's not tested, but it should give you desired output.
<RelativeLayout
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"
tools:context=".MainActivity" >
<TextView
android:id="#+id/txvMain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"/>
<Button
android:id="#+id/btnScanAndDraw"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="#string/btnShoePosition"
android:textSize="12sp"
android:onClick="ScanAndDraw"
android:layout_toRightOf="#+id/txvMain/>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below = "#+id/txvMain
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/imgViewMap"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
I red a book for android app development. reading the book I realized that it is possible to have several LinearLayout s which will go inside of each other. Using this hierarchy of LinearLayout s I am able to arrange views in the .XML file. For instance I arranged a root LinearLayout which by itself contains 3 more LinearLayouts. For the buttons on top, I wrote:
android:gravity="right"
then the buttons went to right on top. For the ImageView - under the buttons - I implemented another LinearLayout that has this line of code inside to horizontally center the ImageView:
android:gravity="center_horizontal"
In this form - as I said - using inner LinearLayouts and gravity it is possible to arrange views on the screen as intended.
may be useful for someone :)

Space between views in LinearLayout

I have a linear layout inside a scroll view, this linear layout contains many table layouts that are inserted dynamically during the application life. When I have more than 1 table layout they are too close to one another:
Here is the code for the table layouts:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/TableLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:orientation="vertical"
android:background="#color/eggshell" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/messageBoardTitleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fill"
android:textAppearance="?android:attr/textAppearanceMedium" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/messageBoardMessageTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fill" />
</TableRow>
and this is the code of the scroll view and the linear layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp" >
<ScrollView
android:id="#+id/messgaeBoardScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/messageBoardLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp" >
</LinearLayout>
</ScrollView>
How can I create some kind of a break between the two table layouts?
why don't you go for the android:layout_margin parameter in android... It will allow you to put some space between any two layout or between layout and screen border..
Check out this Android Developer Link..
Hope it will help you..!!!
Add android:layout_margin instead of padding
Padding adds space inside the layout, not between other layout
Remove your padding from your TableLayout which is android:padding="10dp" besides that try out with the margin android:margin="10dp".
As padding adds space in outer part of the view and margin leaves a space in inner part of your view.
Add
android:margin_top=10dp;
instead of layout_padding.

Scrollview inside Listview

I have a listview with mulitple rows, one of the rows must be a listview also with multiple rows, but only 2 of them need to be displayed, the rest displayed only on scrolling. i added a ScrollView with a LinearLayout inside the listview int he layout file and I'm adding the contents of the rows in the java file. The ScrollView doesn't seem to scroll well. Is there a better way of achieving this?
This is my layout file.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/listLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ListView
android:id="#android:id/list"
android:layout_width="1px"
android:layout_height="1px"
android:layout_weight="1"
android:cacheColorHint="#00000000"
android:scrollbars="vertical" >
</ListView>
<RelativeLayout
android:id="#+id/listItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/formImage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY" />
<include layout="#layout/vertical_list_item_title_area" />
</RelativeLayout>
<ScrollView
android:id="#+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:layout_weight="1">
<LinearLayout
android:id="#+id/childListLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
<com.illumemobile.testapp.Classes.SCClasses.SCActivities.SCCustomActivities.SCCustomGallery
android:id="#+id/horizontallistview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:spacing="33dip" />
ScrollViews insides of ListViews are a VERY VERY bad idea. Not only is it confusing to the user, but the system has problems figuring out which View should get the touch events.
I would recommend rethinking about your layout.
I would recommend making a ScrollView, then inside the scroll view, making a LinearLayout. Inside that LinearLayout you could have more LinearLayouts one or more items as children. I think this would get close to what you're trying to do... I prefer using ScrollViews and LinearLayouts rather than trying to deal with ListViews. LinearLayouts are a lot more dynamic than ListViews in my experience.
-Hope this helps

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" />

ScrollView not scrolling after adding content dynamically

Here is my layout :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ScrollView
android:id="#+id/button_scroll"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:fillViewport="true">
<LinearLayout
android:id="#+id/buttons"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"/>
</ScrollView>
</LinearLayout>
In my code, I am adding buttons into the horizontal LinearLayout id/buttons. Everything goes well except that after I add enough of them, it never scrolls.
I tried :
call invalidate on the ScrollView
Change the layout_width for the LinearLayout to wrap_content
Try using HorizontalScrollView! ScrollView layout only scrolls vertically, as i found out a few weeks ago trying the same thing!

Categories

Resources