Develop Reference

One of two Android ListView filling too much space

I would like to obtain this layout for an Android app for mobile phones:
Icon - Object1
List with entries related to Object1
Icon - Object2
List with entries related to Object2
So far I have used the following layout tree (edited graphically with the editor in Android Studio):
Root-LinearLayout
Vertical LinearLayout
Horizontal LinearLayout with icon and text
ListView
Vertical LinearLayout
Horizontal LinearLayout with icon and text
ListView
May be this is not the best way to organize such layout (may be I should use lists with header, but suggestions very welcome), however it can be a good case for understanding deeper how ListView works.
This is the graphical layout generated:
the blue row corresponds to the first LinearLayout. As you can see from the second screenshot that follows, the second list goes all the way down to Hell, bringing me with her. Is there any way to make the lists respect the wrap_content+ weight behaviour?
The XML code follows. I have tried several combos (both reasonable and unreasonable) of layout:weights but none works. I also tried to set the min-width of the first LinearLayout (the hidden one), but nothing changes.
Could you please help me?
<?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"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:minHeight="50dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView15"
android:src="#drawable/abc_ic_menu_share_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object1"
android:id="#+id/textView24"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView2"
android:layout_weight="1" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView16"
android:src="#drawable/abc_ic_commit_search_api_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object2"
android:id="#+id/textView25"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_weight="1" />
</LinearLayout>

It should work if you put your ListViews inside of the child LinearLayouts which hold the LinearLayout that has the TextView and ImageView. You also should be using "0dp" for the height when using weight with a vertical layout.
Something like this, I believe, should work
<?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"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:gravity="center_vertical"
android:minHeight="50dp"
android:layout_weight=".2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView15"
android:src="#drawable/abc_ic_menu_share_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object1"
android:id="#+id/textView24"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:id="#+id/listView2"
android:layout_weight=".8" />
</LinearLayout>
Note the other changes: I gave the inner-LinearLayout an arbitrary weight of ".2" then the ListView a weight of ".8". And, of course, set the height to "0dp". You may need to play with those weights a bit but I think doing something like that for both first child LinearLayouts should get you close.
That may get your current layout to work but using headers and/or an ExpandableListView may be a better option.

Android : Unable to set TableLayout properly as wanted

I am showing data from DB in an Activity. I want a Table and buttons on bottom. For data thought TableLayout would be best option for it. I added TableLayout to HorizontalView & to ScrollView making it scroll vertically & Horizontally. Am adding all rows dynamically - including header. This part is working fine.
I want is when the contents is less than the screen width, it should yet occupy the whole screen width. For eg. If a table fits well in Portrait mode then ofcourse for Landscape mode their will be blank space left on the right. I don't want that space to eb empty, instead to occupy by all columns. If the row width is greater than the screen width then no issues at all - as horiontal scrollbar appears.
I tried few variations, but nothing helped out. Any idea what settings to make to utlize all space (if at all avbl) & show it.
And yes, 1 more issue of horizontal scrollbar, it appears just on the last row. I want it to
appear below last row - so the border of last row is visible. My XML :
<?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">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:scrollbars="horizontal|vertical">
<HorizontalScrollView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="10dp" android:layout_marginBottom="10dp" >
<TableLayout android:id="#+id/browseTable" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_marginBottom="20dp"
android:background="#FF0000" android:stretchColumns="1,2,3">
</TableLayout>
</HorizontalScrollView>
</ScrollView>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:orientation="horizontal" android:gravity="center"
android:layout_marginTop="15dp">
<Button android:id="#+id/browseAddBtn" android:text="Add" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:layout_marginRight="10dp" />
<Button android:id="#+id/browseViewBtn" android:text="Edit" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:layout_marginRight="10dp" />
<Button android:id="#+id/browseReturnBtn" android:text="Return" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
OUTPUT :

I found one thing while solving your problem, about TableLayout when used inside a HorizontalScrollView. The android:stretchColumns is not working when we use Table Layout inside Horizontal Scroll View. So that you are getting blank space when screen is rotated or columns have less width data.
I hope you understand this. I am trying to solve this problem by replacing Horizontal Scroll View with some other. I will post answer if i get solution. Bye.
EDIT
Hi Tvd finally I got the solution for your problem. make below changes to your XML layout file.
In <HorizontalScrollView>
use
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
Use stretchColumns = "*" in TableLayout if you want all columns to be stretched.
Bye. :-)

I did some changes. some of your problem will solve by below layout code
<?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" >
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scrollbars="horizontal|vertical" >
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp" >
<TableLayout
android:id="#+id/browseTable"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:background="#FF0000" >
</TableLayout>
</HorizontalScrollView>
</ScrollView>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
style="#android:style/ButtonBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/browseAddBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="Add" />
<Button
android:id="#+id/browseViewBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="Edit" />
<Button
android:id="#+id/browseReturnBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Return" />
</LinearLayout>

Android: Centralized TableLayout?

Please take a look at this XML code:
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dip"
android:isScrollContainer="true"
android:scrollbarStyle="outsideInset">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageButton
<!-- Some Code -->
/>
<ImageButton
<!-- Some Code -->
/>
<ImageButton
<!-- Some Code -->
/>
</TableRow>
</TableLayout>
The three ImageButtons are displayed fine in my device (Centralized exactly). However, when I test the app in another device with larger screen, the three images seems to be aligned to the left.
Is there a way to make the layout centralized? No matter what the screen width is?

this should do it.. if i have understood your problem in right manner...
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dip"
android:isScrollContainer="true"
android:scrollbarStyle="outsideInset"
android:gravity="center_Horizontal|Center_Vertical">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_Horizontal|Center_Vertical"
>

wrap with linearlayout every image button in similar format . set gravity for each linearlayout to be center. and layout width = fill_parent for all linearlayouts.

How to line up intger output in custom Android dialog

I am displaying integer data from an SQLite database using a SimpleCursorAdaptor.
Everything shows up but the alignment is all wrong:
The dialog looks like this:
<?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">
<ListView android:id="#+id/lvwScores"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:id="#+id/btnOK "
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="OK" android:layout_below="#id/lvwScores">
</Button>
</RelativeLayout>
With the row xml file:
<?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">
<TableLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:stretchColumns="0,1,2,3">
<TableRow >
<TextView android:id="#+id/tvwPlayer1Score" xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="right"/>
<TextView android:id="#+id/tvwPlayer2Score" xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="right"/>
<TextView android:id="#+id/tvwPlayer3Score" xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="right"/>
<TextView android:id="#+id/tvwPlayer4Score" xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="right"/>
</TableRow>
</TableLayout>
</RelativeLayout>

TableLayout is a bad choice. It's inherent fluidity will cause the columns to vary in width based on the content inside of them (although the stretching does minimize some of this), which you have no control over (see below). Also, the namespace declaration only needs to be on the root element of the XML, not each one ;)
Simplify your row layout drastically by using this instead:
<?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="wrap_content"
android:orientation="horizontal">
<TextView android:id="#+id/tvwPlayer1Score"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"/>
<TextView android:id="#+id/tvwPlayer2Score"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"/>
<TextView android:id="#+id/tvwPlayer3Score"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"/>
<TextView android:id="#+id/tvwPlayer4Score"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"/>
</LinearLayout>
The combination of layout_width="fill_parent" and layout_weight="1" on each element tells the system to lay out all four elements, equally spaced (since they have the same weight sum) to fill the row. I almost always use nested LinearLayout in place of TableLayout whenever possible (that's all TableLayout really is anyway).
Another thing from the row XML you posted: it's not a good idea to set the root element of a list item's layout with layout_height=fill_parent like you have in the RelativeLayout tag. Depending on where this layout get's drawn, the layout manager might actually listen to you and one row might end up taking the entire window!
NOTE ABOUT TABLELAYOUT PARAMS:
If you insist on sticking with TableLayout, know that you can (and should) omit all the layout_width and layout_height attributes from every child of TableLayout and TableRow. Those two widgets ignore what you say and set the values of their children to MATCH_PARENT and WRAP_CONTENT (respectively), so adding them to your code will only serve to confuse you if you think they're supposed to take effect.
Hope that Helps!

you should specify the android:gravity attribute:
<TextView android:gravity="right" />
more about this: Android TextView
Update:
I've modified a bit the row.xml layout.
changed the TextViews' width to
fill_parent (they are stretched
anyway, so it shouldn't do any harm),
and
added some attributes to the
TableRow tag
So it looks like:
[...]
<TableRow android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="match_parent">
<TextView android:id="#+id/tvwPlayer1Score"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:gravity="right" />
<TextView android:id="#+id/tvwPlayer2Score"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:gravity="right" />
<TextView android:id="#+id/tvwPlayer3Score"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:gravity="right" />
<TextView android:id="#+id/tvwPlayer4Score"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:gravity="right" android:layout_margin="2dp" />
</TableRow>
[...]
And the output looks right now:
Please let me know if this helped (still very embarrassed...)

GestureOverlayView causes strange TableRow blending

Simple problem:
With the XML layout shown below, I have some views wrapped in a GestureOverlayView. As shown below, my first row is blended with the second row, as-if the first row is transposed right on top of the second.
Now when I take the GestureOverlayView out of the code and leave everything else as-is, my table looks fine - the rows are separate and not on top of each other.
I'm wondering why the rows overlap like that with the gestureOverlayView present?
Screenshot showing the problem: http://img413.imageshack.us/img413/4994/overlayblending.png
Thank you
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll1"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<android.gesture.GestureOverlayView
android:id="#+id/gesturePage01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0">
<TableRow android:id="#+id/TableRow01" android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView
android:text="Connection info"
android:id="#+id/tvCon1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#F0F0F0"
android:textColor="#FF0000"
/>
</TableRow>
<TableRow android:id="#+id/TableRow02" android:layout_width="fill_parent" android:layout_height="wrap_content">
<ScrollView
android:id="#+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/tvMessages"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text=""
/>
</ScrollView>
</TableRow>
</android.gesture.GestureOverlayView>
</LinearLayout>

I went ahead and put my tableRow into a TableLayout and that fixed the problem.