How can I create a ListView with fixed header and footer?
I don't want the header/footer to scroll with the items in the ListView.
Is it possible that the header/footer is floating over the ListView so that the header/footer dont need to have a straight bottom/top background and the ListView items scrolls below the background of the header/footer view, but still show the first element of the list?
I solved it by using @blackbelt suggestion and a small ImageView with the source image being transparant with a tile background.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<ListView
android:id="@+id/lv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_above="@+id/tv_footer"
android:layout_below="@+id/tv_header" />
<TextView
android:id="@+id/tv_footer"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/footer_bg"
android:gravity="center"
android:text="Footer" />
<TextView
android:id="@+id/tv_header"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="@drawable/header_bg"
android:gravity="center"
android:orientation="vertical"
android:text="Header" />
<ImageView
android:id="@+id/iconView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="@drawable/ic_launcher" />
<ImageView
android:id="@+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="@+id/lv"
android:background="@drawable/header_bg2"
android:src="@drawable/transparant_bg_tile" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/tv_footer"
android:layout_alignParentRight="true"
android:background="@drawable/footer_bg2"
android:src="@drawable/transparant_bg_tile" />
</RelativeLayout>
Screenshot from device
http://developer.android.com/reference/android/widget/ListView.html#addHeaderView%28android.view.View%29. Check this for addHeaderView(param).
http://developer.android.com/reference/android/widget/ListView.html#addFooterView%28android.view.View%29. Check this for addFooterView(param).
Example of the method usuage by inlfating a layout @ Android listview with header and footer buttons
You can use addHeaderView and addFooterView for the list to add header and footer.
You can do as what @blackbelt suggested. I have used a relative layout instead of LinearLayout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<ListView
android:id="@+id/lv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_above="@+id/textView1"
android:layout_below="@+id/tv1" />
<TextView
android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:text="Footer" />
<TextView
android:id="@+id/tv1"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:gravity="center"
android:layout_alignParentTop="true"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:text="Header" />
</RelativeLayout>
Graphical Layout snap shot
Use a LinearLayout, add your header upon the ListView and the footer above. Gives the ListView layout_weight="1"
Make the header and footer separate Views which you locate over the top and bottom of the ListView. Then set the opacity for those Views.
create your custom header and footer with your list view code as below
header.xml file
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="your custom height" // you may set default too
/>
</RelativeLayout>
footer.xml file
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
add where your listview
LayoutInflater inflaterHeader = getLayoutInflater();
ViewGroup header = (ViewGroup) inflaterFooter.inflate(
R.layout.header, list_view, false);
yourListView.addHeaderView(header);
LayoutInflater inflaterFooter = getLayoutInflater();
ViewGroup footer = (ViewGroup) inflaterFooter.inflate(
R.layout.footer, list_view, false);
yourListView.addFooterView(footer);
we can set header and footer in this way also, i am setting header layout above listview and in same way we cans et footer below listview
<LinearLayout
android:id="@+id/ly_header"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/app_theme_color"
android:orientation="horizontal">
<include layout="@layout/header_icuc"/>
</LinearLayout>
<ListView
android:id="@+id/lv_contacts"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/ly_header"
android:background="#F3F4F6"
android:divider="@drawable/contact_list_divider"
android:dividerHeight="2dp"
android:scrollbars="none" />
