Setting a footer in a ListView - android

I need to add a button at the end of my application, without the items covering the button. With my current code the button is being covered by the items in the ListView. I wanna be able to scroll through the ListView and see all the items, without the button being covered with them. I need button with id "bSave" below the Listview. My XML code:
Button
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content" android:orientation="vertical"
android:id="#+id/bottom_control_bar"
android:layout_alignParentBottom="true">
<Button android:layout_width="match_parent"
android:layout_height="wrap_content" android:text="Spara total tid"
android:id="#+id/bSave" android:textStyle="bold"
android:visibility="invisible"></Button>
</LinearLayout>
ListView
<RelativeLayout
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView android:id="#android:id/list"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_above="#id/bottom_control_bar"></ListView>
<TextView android:id="#android:id/empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>

Do you want the button to always be visible, or to only be visible once you read the end of the list? If the former, then you use something like a relativelayout with a footer button set to alignparentbottom and below the listview. If the latter, then call listview.addFooterView, passing in whatever view you'd like.

Try using a ScrollView http://developer.android.com/reference/android/widget/ScrollView.html
<LinearLayout>
<ScrollView>
</ScrollView>
<Button>
</Button>
</LinearLayout>

Related

Android - How to set maximum size for listview

I would like to make a listview with dynamic size. When I press the button, it will add a row to the listview. And I want the button is always aligned to bottom of the list view.
The problem is listview will push the button out of screen when it have enough rows. So in this case, how to make the button align to bottom of the screen or set the max height for the listview? But when the listview just have 1 or 2 rows, I want the button is right below the listview.
If you want the button to be displayed even though the user is at the top of the list view see other answers, but if you prefer to display the button when the user scrolls to the bottom of the listView use this approach with a footer.
View footer = getLayoutInflater().inflate(R.layout.footer, null);
ListView listView = getListView();
listView.addFooterView(footer);
The footer layout contains the button.
You can have into Linear Layout a ListView and a button with different weight. Something like this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/reportCommentsLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/reportCommentsListView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9"
android:paddingTop="5dp" >
</ListView>
<Button
android:id="#+id/reportCommnets_Addbutton"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:text="Button" />
</LinearLayout>
According to your question, you have to dynamically change the position of your button. From my comment, this is the answer.
Attach listener to your ListView : see https://stackoverflow.com/a/4433294/1377145
In the listener callback, check the visibility of your button :
Rect videoBounds = new Rect();
yourButton.getGlobalVisibleRect(videoBounds);
getGlobalVisibleRect will return true if the button is visible > 0%, false either.
To fix button on the bottom : change the LayoutParams of your button and set alignParentButtom to true. Else set alignParentButtomto false.
bis : depending on your layout, you will have to "move" your button in the view tree with removeView/addView. Don't forget to removeview so the view will not have a parent naymore before adding it to another view.
Additional note : to have a % visibility on your button, you can use the videoBounds.height() and a rule of three :
100 * videoBounds.height() / yourButton.getHeight
EDIT : change answer to match accepted one.
You can make a RelativeLayout with the Button using the rule alignParentBottom=true and the ListView using the rule above. Something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/button" >
</ListView>
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"/>
Something like this should help:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/add"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Add"/>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/add"
/>
</RelativeLayout>
Sorry, to inject my own personal opinions, but I think a "add more" or :load more button" always be the last view within a ListView.
To answer your question, to achieve what you need, the Listview and the "add row" button should be siblings within a ViewGroup.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<Button
android:layout_width="wrap_content"
android:layout_height="48dp"
android:minHeight="48dp"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
The key point here is that the Button has a fixed height and the ListView takes the rest of the space. The button also aligns to the bottom of the parent view.
Use Relative Layout.
Put the button at the bottom of screen, and set the listView position above him:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ListView
android:layout_width="match_parent"
android:id="#+id/list"
android:layout_above="#+id/button1"
android:layout_height="wrap_content">
</ListView>
<Button
android:layout_width="match_parent"
android:id="#+id/button1"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content" />
</RelativeLayout>

Button moving out of view - android

I have a vertical LinearLayout with 3 Buttons vertically aligned one below the other. In between each button, i have set a LinearLayout whose visibility is GONE initially. When the 1st button is clicked, the LinearLayout beneath it is changed to VISIBLE and the list view which i have defined in that layout comes in view while the remaining 2 Buttons remain attached to the LinearLayout.
The problem is that if the list view within the LinearLayoutt (which i have added using java code) is too big, then the 2 Buttons below the 1st one go out of view. What remains is the layout beneath the 1st button.
I want the 2 Buttons to be bound to the view. Any help will be appreciated. Thanks.
Here is my layout:
LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="350dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/buttonContact"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Contacts"
android:background="#drawable/button_style"
android:textColor="#E6E6E6"/>
<LinearLayout
android:id="#+id/layoutContact"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone">
</LinearLayout>
<Button
android:id="#+id/buttonLog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Call Logs"
android:background="#drawable/button_style" />
<LinearLayout
android:id="#+id/layoutLog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone" >
</LinearLayout>
<Button
android:id="#+id/buttonVm"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Voicemail"
android:background="#drawable/button_style"/>
<LinearLayout
android:id="#+id/layoutVm"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone">
</LinearLayout>
</LinearLayout>
If i understand your problem correct, you want the last buttons to be in the view irrespective of the list height. Then i would suggest you to use weight for the hidden LinearLayout, use android:layout_weight=1 to achieve your requirement.
android:scrollbars="true"
Try putting scrollbars

scrollview is not working

I got a list in my main but problem is that when I scan the barcodes for more than 15 barcodes, then it didn't show the"scan" button already and I tried to use the scroll view for that but it is not working :
Any helps?
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:fillViewport="true">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello" />
<ListView
android:id="#android:id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#android:id/empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="no notes"
/>
<Button
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="scan"/>
</LinearLayout>
</ScrollView>
Any suggestions?
Generally it is a bad idea to place a listview inside of the scrollview. It doesn't work as expected. See the following post:
https://groups.google.com/forum/?fromgroups#!topic/android-beginners/LRpLgGOy2Pc
In Android it's not possible to use a ListView in a ScrollView. In order to achieve the same result you can use a ListView and add a header and a footer.
addHeaderView()
You can use a ListActivity. Create one xml layout file for your header and add it to the ListView: (put the Code in your onCreate() function before calling setAdapter())
LayoutInflater inflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
getListView().addHeaderView(inflater.inflate(R.layout.header, null));
getListView().addFooterView(inflater.inflate(R.layout.footer, null));
The footer works exactly the same way.
Hi, you can use RelativeLayout instead of LinearLayout.
In such case you should place your button at the bottom of the layout. After that other controls should be placed above the button. RelativeLayout has special xml-attributes to help you do this. After that you do not need a ScrollView.

ListView pushes other Views off the screen

I'm struggling to get a layout looking correctly, and I've tried to produce the shortest, smallest possible example of my problem.
My goal is to have a header and footer View, at the top and bottom of the screen, with a ListView in between the two, with another View (let's call it the label, it's the gray box from the screen shots) directly below the ListView. This label, and the footer should always be shown when ListView needs to scroll.
Visual Result
When the ListView does not need to scroll (this is correct):
When the ListView needs to scroll, the footer and the gray box are pushed off screen (wrong):
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:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="header"
android:padding="20dp"
android:textSize="18sp"
android:background="#color/red"/>
<ListView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#android:id/list" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="this should be directly below the ListView, but not pushed off screen when the ListView needs to scroll"
android:padding="5dp"
android:background="#color/light_gray"
android:textColor="#color/black"/>
<!-- Used to push the footer to the bottom -->
<View android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="1"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="footer"
android:padding="20dp"
android:textSize="18sp"
android:background="#color/blue"/>
</LinearLayout>
Test Activity
public class TestActivity extends ListActivity
{
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
ArrayList<String> items = new ArrayList<String>();
items.add("one");
items.add("two");
items.add("three");
items.add("four");
items.add("five");
items.add("six");
items.add("seven");
items.add("eight");
items.add("nine");
items.add("ten");
setListAdapter(new ArrayAdapter<String>(this, R.layout.simple_list_item_1, items));
setContentView(com.myproject.android.R.layout.test);
}
}
I've tried a few different approaches, such as giving the ListView layout_weight="1" and removing the blank View that I use to push the footer to the bottom. This is almost what I want, it keeps the footer and label visible when the ListView scrolls, but when it only has 1 or 2 items, I need the gray box right below the ListView. I've also attempted to use a RelativeLayout, without success. I guess I'm completely misunderstanding things.
EDIT
Here's my attempt with a RelativeLayout which still isn't correct.
<?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">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="header"
android:padding="20dp"
android:textSize="18sp"
android:background="#color/red"
android:id="#+id/header"
/>
<ListView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#android:id/list"
android:layout_below="#id/header"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="this should be directly below the ListView, but not pushed off screen when the ListView needs to scroll"
android:padding="5dp"
android:background="#color/light_gray"
android:textColor="#color/black"
android:layout_below="#android:id/list"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="footer"
android:padding="20dp"
android:textSize="18sp"
android:background="#color/blue"
android:layout_alignParentBottom="true"
android:id="#+id/footer"/>
</RelativeLayout>
Relative Layout (Still Wrong):
Add android:layout_weight="1" to the listview. That will make it the biggest element in the LinearLayout, without pushing the other ones off the screen.
This layout adds the header a top of the screen and the footter and the bottom. The list fills the rest of the screen. With theses aproach list elements never be obscured by the footer. See how to add the gray box below the XML...
<?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">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="header"
android:padding="20dp"
android:textSize="18sp"
android:background="#color/red"
android:id="#+id/header"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="footer"
android:padding="20dp"
android:textSize="18sp"
android:background="#color/blue"
android:layout_alignParentBottom="true"
android:id="#+id/footer"/>
<ListView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#android:id/list"
android:layout_below="#id/header"
android:layout_above="#id/footer"/>
</RelativeLayout>
Ok. This XML solves the problem of the missing footer. Now we have to add a gray box at the end of the list. I think there is two ways to do it:
Use the addFooterView method: http://developer.android.com/reference/android/widget/ListView.html#addFooterView(android.view.View)
Play with the adapter and the getViewTypeCount() method so you can define two types or elements: normal elements and footer element. http://developer.android.com/reference/android/widget/BaseAdapter.html#getViewTypeCount()
A solution that worked for me was to add positive padding to the bottom of the list view and negative padding to the top of the "footer". This will work in a linear layout or a relative layout.
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="50dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-50dp"/>
Two years late to answer the question, but I will leave my solution so it may help someone with the same problem. I solve this problem using 2 nested LinearLayouts and using layout_weigth. Maybe not the best performatic layout, but it reaches the desired effect.
You need to arrange your layout this way:
Your ListView will have wrap_content height to take only the needed space when not filling the entire screen.
Your ListView will be inside a layout with height using layout_weight so the list will take only the needed space when not filling the entire screen and to take only a limited space of the screen when it have size enouth to push the views out of screen.
The grey box view the should be immediately below the list will have wrap_content height and will be a sinbling of the layout of step 2.
This layout and the grey box will be inside a second layout with wrap_content height so they can stay together.
Now you have a layout with the list and the grey view and the list won't push the other views out of screen if it gets too big; you only need to move the footer view to the bottom of the screen.
5a. If you are using RelativeLayout as your root layout, you can do as sgallego said and use android:layout_alignParentBottom.
5b. But if you are using LinearLayout you need to create a third layout with layout_weigth and put inside the layout of step 4 and a empty view also with layout_weigth to fill the empty space.
Here is a commented example.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- Header -->
<TextView
android:id="#+id/RecordStudy_StudyLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/RecordStudy_StudyLabel"
android:textSize="#dimen/text_large" />
<!-- Body -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<!--
This layout encapsules the list and the button that must be immediately
below the list with a wrap_content height, so the list plus the button
fills only as much space as they need (if the list is not big enouth to
fill the entire screen).
-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!--
Layout with varaible size with a list inside.
Using layout_weight tells android that this layout should not grow
greater then the screen, but uses only the free space.
-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<!--
Inside this limited height layout, there is a list with height
wrap_content so it can grow as much as it needs INSIDE the
layout (through scrolling).
-->
<ListView
android:id="#+id/RecordStudy_StudyList"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<!-- Button immediately below the list -->
<Button
android:id="#+id/RecordStudy_AddStudy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/RecordStudy_AddStudy" />
</LinearLayout>
<!-- Space between the list and the footer -->
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
<!-- Footer -->
<Button
android:id="#+id/RecordStudy_ConfirmButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/RecordStudy_ConfirmButton" />
</LinearLayout>
One solution that I implemented and found useful was to keep the listview inside a linear layout with fixed height so that it doesn't extend and overlap other items.
Something like this:
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="header"
android:padding="20dp"
android:textSize="18sp"
android:background="#color/red"
android:id="#+id/header"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="150dip" //assume 150dip height is sufficient
<ListView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#android:id/list"
android:layout_below="#id/header"/>
</LinearLayout>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="this should be directly below the ListView, but not pushed off screen when the ListView needs to scroll"
android:padding="5dp"
android:background="#color/light_gray"
android:textColor="#color/black"
android:layout_below="#android:id/list"/>

How to create fixed footer in android layout?

I am using following code to display button at the bottom of activity.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
>
<Button android:id="#+id/btnGetMoreResults"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Get more"
/>
</RelativeLayout>
and listview above it. when i display more data in listview this button pannel is moved down.can any one guide me how can i fix it at the bottom of activity?
any help would be appreciated.
The answer selected as correct is faulty, the button will hide the lower part of the list view. The correct way is to declare the button first and position the list above the button.
<Button android:id="#+id/btnGetMoreResults"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Get more"
android:layout_alignParentBottom="true"/>
<ListView
...
android:layout_above="#id/btnGetMoreResults"/>
The android:layout_alignParentBottom attribute has to be declared in an element of the RelativeLayout not in the RelativeLayout himself (unless there is another RelativeLayout as a parent).
You should do something like this, with the ListView inside the RelativeLayout also :
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<ListView ...>
<Button android:id="#+id/btnGetMoreResults"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Get more"
android:layout_alignParentBottom="true" />
</RelativeLayout>
If you had, for example, all the scrollable elements in a ScrollView, you should do like the following:
<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"
style="#style/rootElement"
>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- texts, buttons, images and anything that you want to scroll -->
</ScrollView>
<LinearLayout
android:orientation="vertical"
style="#style/footer"
android:id="#+id/footer"
android:layout_alignParentBottom="true"
>
</LinearLayout>
</RelativeLayout>
Note that if you want the footer to be fixed, then you shouldn't put it in the ScrollView, where the scrollable content will be placed. Make it child of RelativeLayout and set layout_alignParentBottom to true. Maybe you'll need to add a padding at the bottom of the ScrollView in this case (so that the last element do not get hidden by the footer).
The idea is similar for elements other than ScrollView

Categories

Resources