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.

How to create a stampcard type layout?

Im trying to create a stampcard system on my application but when its coming to laying out the stamps (they wil be invisable untill requested and shoud be spaced evenly in 2xrows of 3),
I cant get the view to sit right, I want the stamps to appear evenly over an Image view but it just wont happen, I tried to get my linear layout that will hold the 2 rows to stretch to the relative view ( who's size is set by the stampcard ImageView) so i could space them out evenly using their weight but it wouldn't stretch it would allways wrap the content any help would be appreciated.
The layout xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/main_fragment_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/home_page_title"
android:layout_width="match_parent"
android:layout_height="64dp"
android:background="#drawable/bottom_bar"
android:gravity="center_horizontal|fill_vertical"
android:text="#string/home_fragment_title"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#FFFFFF"
android:textStyle="bold" />
<RelativeLayout
android:id="#+id/stamp_card_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/home_page_title"
android:gravity="center" >
<ImageView
android:id="#+id/the_stamp_card"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/stamp_card" />
<LinearLayout
android:id="#id/row_holder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/stamp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/stamp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<Button
android:id="#+id/scanBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/stamp_card_layout"
android:background="#drawable/brown_btn"
android:text="Scan?"
android:textColor="#FFFFFF"
android:textSize="23sp"
android:textStyle="bold"
android:typeface="normal" />
</RelativeLayout>
The Result:
I don't know what to do as they have to be over the image and stay relative to the stampcard and the only way I know how was using a relative layout and it is being designed for api 8 so it has to be simple :/
thanks in advanced!

The solution I came to is to just have multiple Stampcard images each with a one more stamp than the last and to cycle though them.

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>

Relative Layout is causing issues with formatting

I have been working on an app for my school recently and wanted to clean it up a bit before possibly publishing it. On the scheduling portion of the app, I have 5 buttons that perform actions on a ListView that is also on the screen at the same time. However, I have the issue when I have around 6 or more events on the screen as once the list view takes over the screen and pushes the buttons off the screen, making it so that I cannot delete the events, make new ones, and so on.
I tried setting the list view to a static size (400px) which worked for normal screen orientation, but if the phone is set to landscape view you cannot see the buttons either. With my current code it would appear to work in the XML viewer but in practice is not the case.
This is the code without the static size setting:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#551A8B"
android:textColor="#FFD700"
>
<Button android:text="#string/New"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/button3">
</Button>
<Button android:text="#string/Edit"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button3"
android:layout_alignTop="#id/button3">
</Button>
<Button android:text="#string/delete"
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button4"
android:layout_alignTop="#id/button4">
</Button>
<Button android:layout_height="wrap_content"
android:id="#+id/button7"
android:layout_width="wrap_content"
android:text="#string/Previousweek"
android:layout_below="#id/button3">
</Button>
<Button android:layout_height="wrap_content"
android:id="#+id/button6"
android:layout_width="wrap_content"
android:text="#string/Next"
android:layout_below = "#id/button3"
android:layout_toRightOf = "#id/button7">
</Button>
<ListView android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#FFD700"
android:layout_below="#id/button7"
android:textSize="10sp" >
</ListView>
</RelativeLayout>
The XML viewer for this code is:
Which would lead me to believe it would work fine. I tested it on my emulator and got the following result after entering a bunch of silly events however:
This result is consistent with multiple versions of the emulator.
How I can fix this problem without using static size constraints that cause landscape orientation issues?

Separate the buttons into a separate RelativeLayout and enclose this and the ListView in a vertical LinearLayout.
Then:
<LinearLayout android:id="#+id/linearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout [...]
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<!-- Your buttons -->
</RelativeLayout>
<ListView android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" />
</LinearLayout
The key point here is the height and weight on the ListView. This means that it fills the remaining space in the LinearLayout after space has been correctly allocated for the buttons.

Add a android:weigth in your listView tag and set the android:weigth value to 1. This will work when your list view height and width is set to fill_parent and your list view is covering entire layout. So try it, it will work.

One simple solution would be to separate the buttons in their own relative layout and put the whole thing in a linear layout, eg:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#551A8B"
android:textColor="#FFD700">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#551A8B"
android:textColor="#FFD700">
<!-- your buttons -->
</RelativeLayout>
<ListView
android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="#FFD700"
android:layout_below="#id/button7"
android:textSize="10sp">
</ListView>
</LinearLayout>

Use a vertical LinearLayout with two rows of Buttons (each row as a LinearLayout), then give the ListView a layout_weight value of "1". In fact, use layout_weight to clean up the size of your buttons too.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button android:text="#string/New"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:id="#+id/button3" />
<Button android:text="#string/Edit"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button android:text="#string/Delete"
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button android:layout_height="wrap_content"
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="#string/Previousweek" />
<Button android:layout_height="wrap_content"
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="#string/Next" />
</LinearLayout>
<ListView android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:textColor="#FFD700"
android:textSize="10sp" >
</ListView>

trouble with nested layouts

I'm just beginning Android and have gotten myself stuck. I've made a simple app/view. The idea is draw a line-maze in the top, with motion buttons on the bottom. My app only draws an x with a couple lines in the frame, but that works. The problem is that my buttons are being drawn too far down, and are clipped in height.
I assume the problem is all in my layout xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<none.maze.MazeView
android:id="#+id/maze"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text"
android:text="#string/maze_layout_text_text"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:textColor="#ff8888ff"
android:textSize="24sp"/>
</RelativeLayout>
</FrameLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:layout_weight="1"
/>
<Button
android:id="#+id/forward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forward"
android:layout_weight="1"
/>
<Button
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right"
android:layout_weight="1"
/>
</LinearLayout>
</LinearLayout>

I think you shouldn't use layout_height="fill_parent" and layout_weight at the same time. Try to set layout_height="0dip" and layout_weight="1" for the FrameLayout and layout_height="wrap_content" for the lower LinearLayout. The lower LinearLayout mustn't have the layout_weight attribute.

Use Hierarchy Viewer to debug your layout. Its pretty cool.

Your entire layout is just way too bloated and ineffective. You use way too many ViewGroups. I recommend reading about RelativeLayouts and especially the entire Layout Tricks series.