Android: Adding static header to the top of a ListActivity

Question

Currently I have a class that is extending the ListActivity class. I need to be able to add a few static buttons above the list that are always visible. I've attempted to grab the ListView using getListView() from within the class. Then I used addHeaderView(View) to add a small layout to the top of the screen.

Header.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" >
    <Button 
        android:id="@+id/testButton"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:text="Income" 
        android:textSize="15dip"
        android:layout_weight="1" />
</LinearLayout>

Before I set the adapter I do:

ListView lv = getListView();
lv.addHeaderView(findViewById(R.layout.header));

This results in nothing happening to the ListView except for it being populated from my database. No buttons appear above it.

Another approach I tried as adding padding to the top of the ListView. When I did this it successfully moved down, however, if I added any above it, it pushed the ListView over. No matter what I do it seems as though I cannot put a few buttons above the ListView when I used the ListActivity.

synic, I tried your suggestion previously. I tried it again just for the sake of sanity, and the button did not display. Below is the layout file for the activity and the code I've implemented in the oncreate().

//My listactivity I am trying to add the header to

public class AuditActivity extends ListActivity {

    Budget budget;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        Cursor test;
        super.onCreate(savedInstanceState);
        setContentView(R.layout.audit);
        ListView lv = getListView();
        LayoutInflater infalter = getLayoutInflater();
        ViewGroup header = (ViewGroup) infalter.inflate(R.layout.header, lv, false);
        lv.addHeaderView(header);
        budget = new Budget(this);
        /*
        try {
            test = budget.getTransactions();
            showEvents(test);
        } finally {
    
        }
        */
//      switchTabSpecial();
    }

Layout.xml for activity:

<?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">
    <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="@string/empty" />
</LinearLayout>

Duthie

Answer 1

findViewById() only works to find subviews of the object View. It will not work on a layout id.

You'll have to use layout inflater to convert the xml to it's corresponding View components. Something like this:

ListView lv = getListView();
LayoutInflater inflater = getLayoutInflater();
View header = inflater.inflate(R.layout.header, lv, false);
lv.addHeaderView(header, null, false);

I'm not sure why your code wasn't just throwing an error. findViewById() was probably just returning null, and so no header was added to your list.

Illustrious

I don't think you need to assign and cast the inflated header to a ViewGroup. ViewGroup extends View, and the addHeaderView method of the ListView accepts any View object. – Sheryl

@Glenn Bech iam agree with your statement – Rowboat

Perfect, +1! Just an additional comment: assure to set the list adapter after adding the header view. Adding the adapter prior to the header gave me a run time exception "Cannot add header view to list -- setAdapter as already been called" – Stylize

@GlennBech you are right. I have updated the solution to improve that part. – Matthewmatthews

By far the most elegant solution that actually works! – Chutney

Now how can I fix the place of header on top when the list is scrolling? – Toner

Answer 2

Here is the simpliest sollution:

<?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"
 android:background="@color/background">
 <include layout="@layout/actionbar"/>
   <ListView
    android:id="@+id/tasklist_TaskListView"
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:layout_weight="1"
    android:textColor="@color/baseFont"/>
   <include layout="@layout/bottombar"/>
</LinearLayout>

or

<?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"
 android:background="@color/background">
   <Button 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"/>
   <ListView
    android:id="@+id/tasklist_TaskListView"
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:layout_weight="1"
    android:textColor="@color/baseFont"/>
   <Button 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"/>

</LinearLayout>

instead of button you can add another horizontal linear layout

Jacquejacquelin

There is nothing special in code. actionbar and bottombar are just another xml layouts defined in actionbar.xml and bottombar.xml. – Jacquejacquelin

Answer 3

After some research I was able to figure out that mixing TableLayout and LinearLayout within my ListActivity XML document I was able to add a header to the document. Below is my XML document if anyone is interested to see it. While synic's approach is probably the right approach after work with his solution for sometime I was unable to make it function the way I wanted it.

AuditTab.java

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.audittab);
        getListView().setEmptyView(findViewById(R.id.empty));
}

audittab.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 
    android:layout_width="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent">
    <TableRow 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" 
        android:layout_gravity="center_horizontal">
        <LinearLayout 
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"
            android:orientation="horizontal" 
            android:layout_weight="1">
            <Button 
                android:id="@+id/btnFromDate" 
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" 
                android:text=""
                android:layout_weight="1" />
            <Button 
                android:id="@+id/btnToDate" 
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" 
                android:text=""
                android:layout_toRightOf="@+id/btnFromDate"
                android:layout_weight="1" />
            <Button 
                android:id="@+id/btnQuery" 
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" 
                android:text="Query"
                android:layout_toRightOf="@+id/btnToDate"
                android:layout_weight="1" />

        </LinearLayout>
    </TableRow>
    <TableRow 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" 
        android:layout_gravity="center_horizontal">
        <LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <ListView 
                android:id="@android:id/list"
                android:layout_width="300dip" 
                android:layout_height="330dip"
                android:scrollbars="none" />
            <TextView 
                android:id="@+id/empty"
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:paddingTop="10dip"
                android:text="- Please select a date range and press query." />
        </LinearLayout>
    </TableRow>
</TableLayout>

AuditItem.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent" 
        android:orientation="horizontal" 
        android:padding="10sp">
    <TextView 
        android:id="@+id/transactionDateLabel" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Date: " />
    <TextView 
        android:id="@+id/transactionDate" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_toRightOf="@id/transactionDateLabel" />
    <TextView 
        android:id="@+id/transactionTypeLabel" 
        android:layout_below="@id/transactionDate" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Type: " />
    <TextView 
        android:id="@+id/transactionType" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_marginLeft="10dip" 
        android:layout_below="@id/transactionDate"
        android:layout_toRightOf="@id/transactionTypeLabel" />

    <TextView 
        android:id="@+id/transactionAmountLabel" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_marginLeft="10dip"
        android:text="Amount: " 
        android:layout_below="@id/transactionDate"
        android:layout_toRightOf="@id/transactionType" />
    <TextView 
        android:id="@+id/transactionAmount" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_below="@id/transactionDate"
        android:layout_toRightOf="@id/transactionAmountLabel" />
    <TextView 
        android:id="@+id/transactionCategoryLabel" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Category: " 
        android:layout_below="@id/transactionAmountLabel" />
    <TextView 
        android:id="@+id/transactionCategory" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/transactionAmountLabel" 
        android:layout_toRightOf="@id/transactionCategoryLabel"
        />
    <TextView 
        android:id="@+id/transactionToAccountLabel" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="To Account: " 
        android:layout_below="@id/transactionCategoryLabel" />
    <TextView
        android:id="@+id/transactionToAccount"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_below="@+id/transactionCategoryLabel"
        android:layout_toRightOf="@id/transactionToAccountLabel" />
    <TextView 
        android:id="@+id/transactionFromAccountLabel" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="From Account: " 
        android:layout_below="@id/transactionToAccountLabel" />
    <TextView
        android:id="@+id/transactionFromAccount"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_below="@id/transactionToAccountLabel"
        android:layout_toRightOf="@id/transactionFromAccountLabel" />
    <TextView 
        android:id="@+id/transactionNoteLabel" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Note: " 
        android:layout_below="@id/transactionFromAccountLabel" />
    <TextView 
        android:id="@+id/transactionNote" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_below="@id/transactionFromAccountLabel" 
        android:layout_toRightOf="@id/transactionNoteLabel" />
    <Button 
        android:id="@+id/editTransactionBtn" 
        android:layout_width="wrap_content"
        android:layout_height="40sp" 
        android:visibility="gone" 
        android:text="Edit"
        android:layout_below="@id/transactionNoteLabel"/>
    <Button 
        android:id="@+id/deleteTransactionBtn" 
        android:layout_width="wrap_content"
        android:layout_height="40sp" 
        android:text="Delete" 
        android:layout_below="@+id/transactionNoteLabel" 
        android:visibility="gone" 
        android:layout_toRightOf="@+id/editTransactionBtn" 
        android:ellipsize="end"/>
</RelativeLayout>

Duthie

Answer 4

The ListView answer above is useful but scrolls with the list and doesn't keep the header graphics at the top. The best solution I've found is to set a custom title to the activity. Here is what my constructor looks like:

public void onCreate(Bundle savedInstanceState) {
    requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
    setContentView(R.layout.your_listview_layout);
    getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.your_header);
    ...

Where your_listview_layout.xml configures a ListView, and your_header.xml contains whatever custom header layout that you like. Just note that the three lines above must be called in exactly that order to not cause run-time problems.

The tutorial that helped me was http://www.londatiga.net/it/how-to-create-custom-window-title-in-android/ and you can find many related pages on Stack Overflow by searching for the term "setFeatureInt"

Perinephrium

Answer 5

Adding a static header is easy, just make a separate relative view that has the alignParentTop (or bottom, right or left) attribute set to true.

Tussock

This is not so much about how to create a layout with a header, this is about ListActivities which has its own ideas about its layout. – Perinephrium