Android, Stop overlapping listview items by the page footer - android

In my Java android application I use a listview to display information loading from the SQLite DB And a page footer also there in this page.
The problem is When there are more items loaded to the listview and need to scroll, since footer appears in the bottom of the page, the footer covers the the last item in the listview.
Simply I want to stop overlapping listview items by the footer.
Can any one help me achieve this please. Thanks inadvance.
Edits
<RelativeLayout android:id="#+id/relativeLayout1" android:layout_height="wrap_content" android:layout_width="match_parent">
<ListView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/companylistView"
android:listSelector="#drawable/item_focus_bkg">
</ListView>
<LinearLayout android:id="#+id/linearLayout1" android:layout_height="wrap_content" android:layout_width="match_parent" android:orientation="vertical" android:layout_alignParentBottom="true" android:background="#android:color/darker_gray" >
<TextView android:text="Footer Text"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000" >
</TextView>
</LinearLayout>
</RelativeLayout>

Based on your requirement(And as you haven't posted XML layout here that you have tried so far), i assume and can suggest the following:
give bottom margin to your listview: android:layout_marginBottom="60dip"
If you are using RelativeLayout then just give listview as android:layout_above="#+id/footer"
I suggest to you go with 2nd option.
Update:
Based on the XML you have posted, try this correct XML layout:
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ListView android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/companylistView"
android:layout_above="#+id/textView1">
</ListView>
<TextView
android:text="Footer Text"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:layout_alignParentBottom="true">
</TextView>
</RelativeLayout>

You should use list footer like this:
View footerView = ((LayoutInflater)getApplicationContext().getSystemService(getApplicationContext().LAYOUT_INFLATER_SERVICE)).inflate(R.layout.listview_footer, null, false);
list.addFooterView(footerView,null,false);
try this:
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical" >
<ListView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/companylistView"
android:listSelector="#drawable/item_focus_bkg" />
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#android:color/darker_gray" >
<TextView
android:text="Footer Text"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:layout_alignParentBottom="true" />
</RelativeLayout>
</LinearLayout>

Related

ListView and ScrollView together does not work

I have ListView and ScrollView in one activity. Now, the problem is that ListView and ScollView does not work together. I have many controls in activity so I need to use ListView.
If ScrollView is there then ListView's height decreased as you can see in image.
Please help me to prevent this problem.
My Code :
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp" >
<TextView
android:id="#+id/tvRQPoint"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:textColor="#color/green"
android:textSize="32sp" />
<TextView
android:id="#+id/tvRQQText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/questiontext"
android:textColor="#color/blue"
android:textSize="16sp" />
<TextView
android:id="#+id/tvRQQuestion"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="16sp" />
<ImageView
android:id="#+id/imgRQImage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:contentDescription="#string/imgdesc" />
<ListView
android:id="#+id/lvRQOptions"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:divider="#b5b5b5"
android:dividerHeight="1dp" />
<TextView
android:id="#+id/tvRQAnswer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp" />
<Button
android:id="#+id/btnRQNext"
android:layout_width="fill_parent"
android:layout_height="35dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:text="#string/next" >
</Button>
<Button
android:id="#+id/btnRQEndTest"
android:layout_width="fill_parent"
android:layout_height="35dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:background="#drawable/blue_bg"
android:text="#string/endtest"
android:textColor="#color/white" >
</Button>
</LinearLayout>
</ScrollView>
Never use a ListView inside a ScrollView. ListView itself already has a built-in scroll so you should use it, as the approach you've used goes against the Android's design.
If you can't remove the ScrollView, you probably should consider simplifying your design or redesign it in another way.
One thing you can do is use only the listView and add the above elements as a header view, and the below elements as a footer view.
List view has properties:
addHeaderView(View view);
addFooterView(View view)
Which you can set before setting the list's adapter
Hi as #nKn said its not good to use ListView inside ScrollView and it also gives bad performance if worked, ListView has its own scrolling property you do not need to use scrollview in it, create seperate layout for listview and other stuff and align layouts the way u want.It worked very well for me.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:overScrollMode="ifContentScrolls"
android:scrollbarStyle="insideOverlay"
android:scrollbars="vertical" >
<RelativeLayout
android:id="#+id/listContainingLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/buttonsLayout"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:overScrollMode="ifContentScrolls"
android:scrollbarStyle="insideOverlay"
android:scrollbars="vertical" >
<ListView
android:id="#id/android:list"
android:layout_width="wrap_content"
android:layout_height="fill_parent" >
</ListView>
</RelativeLayout>
<LinearLayout
android:id="#+id/buttonsLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/button1" />
<ImageButton
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:src="#drawable/button2" />
<ImageButton
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/button3" />
</LinearLayout>
I suggest to align your buttons according to priority if you want your buttons fixed on screen then above format can be used but if u want buttons to come after list then align buttonsLayout belowlistContainingLayout
Hope it helps,Cheers!...
ListView already has scrolling feature. That's why is make problem inside ScrollView. But try give hardcoded width to your ListView. May this solve problem
<ListView
android:id="#+id/lvRQOptions"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:layout_marginTop="8dp"
android:divider="#b5b5b5"
android:dividerHeight="1dp" />

Vertical RelativeLayout: how to achieve fixed header and footer and scrollable main area?

This is a layout I'm having problems with (this is for ListActivity):
<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" >
<TextView
android:id="#+id/path"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/path" />
<TextView
android:id="#android:id/empty"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#android:id/list" />
<Button
android:id="#+id/negative_button"
style="#style/Button"
android_alignParentBottom="true"
android:layout_below="#android:id/empty"
android:layout_weight="1" />
</RelativeLayout>
What happens right now is the list is below header TextView ("path") as it should be, the button is at the bottom also as it should be, but the ListView is not aligned between the header (textview) and footer (button). Instead, the button is simply slapped on top of listview. How can I fix that?
You need to define the footer and header before the list, try something like this:
<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" >
<TextView
android:id="#+id/path"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<!-- to see the button, you must to declare its width/height here
and not (as I think you did) in the style.xml -->
<Button
android:id="#+id/negative_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Button"
android:layout_alignParentBottom="true" />
<!-- also layout_weight doesnot change anything in RelativeLayout -->
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/path"
android:layout_above="#id/negative_button" />
<TextView
android:id="#android:id/empty"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#android:id/list" />
</RelativeLayout>
The TextView "empty" should not be below the TextView "empty".
If the Button must be at the bottom of the screen you can use
android:layout_alignParentBottom="true"
For the Button
Otherwise you can use this layout :
<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" >
<TextView
android:id="#+id/path"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<LinearLayout
android:id="#+id/container"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/path">
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#android:id/empty"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#android:id/list" />
</LinearLayout>
<Button
android:id="#+id/negative_button"
style="#style/Button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/container" />
</RelativeLayout>
Or ever add the Button as a footer of you Listview :
mListView.addFooterView(mButton);
http://developer.android.com/reference/android/widget/ListView.html#addFooterView(android.view.View)
The only things that you used are the ListView, the first TextView as a "top bar" and the Button as a "bottom bar", right? If it is the case, why did you keep the empty TextView?
Try to remove it and try this 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:id="#+id/path"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<!-- work also with android:layout_height="0dip" -->
<Button
android:id="#+id/negative_button"
style="#style/Button"
android:layout_gravity="bottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Saw on these questions, it might be help you:
1. Layout for ListView at top and Buttons in Bottom?
2. Android Layout with ListView between a "top bar" and "bottom bar"
3. Add a button in bottom of listview when the listview is empty (using ListActivity)
Hope this will be helpful and you'll have the expected result.

Wrapping a ListView inside a LinearLayout

I'm trying to make a screen with a TextView at the top, the ListView in the middle and a Button at the bottom. I'd like it to be so that the TextView always is the top at the screen and the button always is the bottom, and then the ListView is in between. When the ListView exceeds the "space in the middle" I'd like the scroll-function to be only between the TextView and Button. With my attempt it just expands beyond the TextView and Button.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/paper" >
<TextView
android:id="#+id/tvLOL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Standardvarer"
android:textSize="40dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/tvLOL"
android:layout_alignBottom="#+id/bNyVare"
android:orientation="vertical" >
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
<Button
android:id="#+id/bNyVare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Tilføj ny vare"
android:textSize="30dp" />
</RelativeLayout>
See if this helps(the LinearLayout wrapping the ListView should be removed(and move the layout_above/below to the ListView) if you only use it to wrap the ListView and nothing else):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/paper" >
<TextView
android:id="#+id/tvLOL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Standardvarer"
android:textSize="40dp" />
<Button
android:id="#+id/bNyVare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Tilføj ny vare"
android:textSize="30dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tvLOL"
android:layout_above="#id/bNyVare"
android:orientation="vertical" >
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
Just an alternative solution to that of #Luksprog, although that's definitely the way to go for more complex layouts. I would ditch the LinearLayout that surrounds the ListView though, as it doesn't add anything, except for unnecessary complexity in the view hierarchy.
A relatively simple layout as described in your question can also be written using a LinearLayout as root and a weight on the ListView to dynamically fill up all space inbetween the TextView and Button. This weight also pushes the Button all the way to the bottom, without pushing it off.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/paper" android:orientation="vertical">
<TextView android:id="#+id/tvLOL" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="center_horizontal"
android:text="Standardvarer" android:textSize="40dp" />
<ListView android:id="#android:id/list" android:layout_width="fill_parent"
android:layout_height="0dp" android:layout_weight="1" />
<Button android:id="#+id/bNyVare" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="Tilføj ny vare"
android:textSize="30dp" />
</LinearLayout>

List and image in the same ScrollView

I'm trying to get an image and a list in the same 'scroll' (I don't know how else to put it). My basic (vertical) layout is:
TextView
ImageView
ListView
I'm trying to get the scrolling as if the image is a list item itself. So the textview has to stay in place at the top and everything else has to scroll under it.
At the moment I have the following 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:background="#color/background"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/app_purple"
android:orientation="vertical" >
<TextView
android:id="#+id/about_app_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="15dp"
android:text="#string/about_app_label"
android:textColor="#color/background"
android:textSize="20dp"
android:textStyle="bold" />
<ImageView
android:id="#+id/app_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/logo" />
</LinearLayout>
<ListView
android:id="#+id/information_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background"
android:divider="#drawable/listdivider"
android:dividerHeight="1dp"
android:fadingEdge="none" >
<!-- Preview: listitem=#layout/row -->
</ListView>
Any help would be greatly appreciated!
EDIT
The custom row layout for the listView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/listview"
android:orientation="horizontal"
android:padding="4dip" >
<ImageView
android:id="#+id/list_icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:layout_marginRight="5dp"
android:contentDescription="#string/icon_content_description" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/list_label"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:maxLines="1"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:textColor="#color/result_label"
android:textStyle="bold" />
<TextView
android:id="#+id/list_count"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/list_label"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
android:textColor="#color/text" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/list_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textColor="#color/text"
android:textColorLink="#color/app_purple" />
<ProgressBar
android:id="#+id/list_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:visibility="gone" />
</RelativeLayout>
</LinearLayout>
You would have a vertical LinearLayout holding the fixed TextView and the ListView. Your ImageView would be a header on the ListView, added via addHeaderView(). Headers, despite their name, scroll with the contents of the ListView.
to make custom list views you need to create a single_list_item.xml file to arrange everything you want to scroll for example the image with a description text next to it. Also you need to add a ListView on your Xml file so the program can process the view. And them, you can process everything on your java file using an adapter. and the the list will appear at the bottom of the text.
There is a great example of how to do it here
it's not clear what exactly are you trying to do. ScrolView can have only ONE child. so I guess you should put the ImageView and the Listview in a LinearLayout.
but any way - it's a bad idea to put a Listview inside a ScrollView - how would the OS now what are you trying to scroll? the ListItem or the whole list. if you can be more specific - I can try help more...

android element below list is gone when the list fills the screen

I have a LinearLayhout that contains a listView and below it an ImageButton.
When I add items to the list, the imageButton is moving lower and lower, which is what I want but when there are many elements in the list so that is the list is big enough to fill the screen, I can scroll down to the bottom of the list, but no further, meaning I can't see the imageButton anymore.
Code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/add_interest_layout_root"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="#color/back"
android:layout_height="match_parent">
<ListView android:id="#android:id/list"
android:layout_width="match_parent"
android:divider="#drawable/downa"
android:footerDividersEnabled="false"
android:cacheColorHint="#android:color/transparent"
android:layout_gravity="center"
android:layout_marginTop="6dp"
android:layout_height="wrap_content">
</ListView>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/linearLayout2"
android:gravity="center">
<LinearLayout
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/LinearLayout16">
<ImageButton
android:src="#drawable/add"
android:id="#+id/btn_interest_more"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#android:color/transparent"></ImageButton>
<TextView
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="wrap_content"
android:id="#+id/TextView08"
android:text="be more\nspecific"
android:gravity="center"></TextView>
</LinearLayout>
</LinearLayout>
What am I doing wrong? I want to be able to see the ImageButton even when I scroll down.
You should do something like this. Mind you this is a pseudo code so you better fill the correct attributes.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/add_interest_layout_root"
android:layout_width="match_parent"
android:background="#color/back" android:layout_height="match_parent">
<LinearLayout android:layout_height="wrap_content"
android:layout_width="match_parent" android:id="#+id/linearLayout2"
android:gravity="center" android:layout_alignParentBottom="true">
<!-- LinearLayout elements same as above -->
</LinearLayout>
<ListView android:id="#android:id/list"
android:layout_above="#+id/linearLayout2"
android:layout_width="match_parent"
android:divider="#drawable/downa"
android:footerDividersEnabled="false"
android:cacheColorHint="#android:color/transparent"
android:layout_gravity="center"
android:layout_marginTop="6dp" android:layout_height="match_parent">
</ListView>
</RelativeLayout>
Here is exactly the solution to your problem: http://www.curious-creature.org/2010/08/15/scrollviews-handy-trick/ which is solved by setting fillviewport on your listview.
Add this to your LinearLayout that holds the ImageButton
android:layout_alignParentBottom="true"
UPDATE:
Forget the above code. I misunderstand you. Sorry.
Do this instead: Add this layout as your root layout
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/scroll"
android:scrollbars="none"
android:layout_weight="1">
<!-- Your code -->
</ScrollView>

Categories

Resources