How to Add a Footer in Listview

How to add a footer in ListView?

Create a footer view layout consisting of text that you want to set as footer and then try

View footerView = ((LayoutInflater) ActivityContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.footer_layout, null, false);
ListView.addFooterView(footerView);

Layout for footer could be something like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="7dip"
android:paddingBottom="7dip"
android:orientation="horizontal"
android:gravity="center">

<LinearLayout
android:id="@+id/footer_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_gravity="center">

<TextView
android:text="@string/footer_text_1"
android:id="@+id/footer_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14dip"
android:textStyle="bold"
android:layout_marginRight="5dip" />
</LinearLayout>
</LinearLayout>

The activity class could be:

public class MyListActivty extends ListActivity {
private Context context = null;
private ListView list = null;

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
list = (ListView)findViewById(android.R.id.list);

//code to set adapter to populate list
View footerView = ((LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.footer_layout, null, false);
list.addFooterView(footerView);
}
}

Set an item to the footer of listview

Please see the sample code to set the footer to a ListView

mListview = (ListView) mContentView.findViewById(R.id.myListView);

// Inflating header and footer view to ListView
ViewGroup header = (ViewGroup) inflater.inflate(R.layout.header_item, mListview,false);
ViewGroup footer = (ViewGroup) inflater.inflate(R.layout.footer_item,mListview,false);

// Adding view to mlist header and footer
mListview.addHeaderView(header, null, false);
mListview.addFooterView(footer, null, false);

// Initializing the adapter
ListAdapter adapter = new ListAdapter(getNGAActivity(), myData);

// Setting the listview adapter
mListview.setAdapter(adapter);

I hope the code comments are self explanatory

Android adding footer to ListView addFooterView()?

Alrighty Iv found a solution to my problem if i do this it works as intended:

View view = mInflater.inflate(R.layout.list_load_more_row, null);

TextView footer = (TextView) view.findViewById(R.id.loadMore);

getListView().addFooterView(footer);

setListAdapter(ListViewHelper.getAdapterForContentList(mContent, this));

I'm guessing that since I put null in the inflater as the parent parameter, the view has not been added to the current content view and so mainActivity is unable to find it and now since I am explicitly using the parent view that is returned by the inflater to find the TextView it is working.

How to add a Footer View (TextView) to the end of a ListView?

Use

ListView.addFooterView(View v)

to add a footer to your ListView. You do not need to define the footer in .xml

Example:

TextView tv = new TextView(Context);
tv.setText("I am a footer")

ListView.addFooterView(tv);

Inflate from .xml:

View footer = LayoutInflater.from(Context).inflate(R.layout.your_footer_layout, null);
ListView.addFooterView(footer);

Make sure you add your footer or header View before you add other items to the list.

Add a header/footer in a listview in xml

No, I don't think that it is possible. Based on ListView source code there are only overScrollHeader/overScrollFooter are available from XML attributes. But these attributes accept only drawables.

If you don't want to use tricks with layouts above/below ListView. You can extend ListView and implement your own footer and header support in customized View. It is not so hard because of footer and header are already implemented. You only have to add XML attributes parsing in your customized View's constructor.

Android ListView with fixed header and footer

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
Sample Image

Listview with scrolling Footer at the bottom

You will need to create a custom RenderBox for this. As there's no widgets which supports this out of the box.

SliverFillRemaining comes pretty close. But it's sizing/scrolling behavior is different then what you'd expect. As, if present, will almost always make the Scrollable... scrollable.

Instead, we can copy paste the sources of SliverFillRemaining. And make some edits

class SliverFooter extends SingleChildRenderObjectWidget {
/// Creates a sliver that fills the remaining space in the viewport.
const SliverFooter({
Key key,
Widget child,
}) : super(key: key, child: child);

@override
RenderSliverFooter createRenderObject(BuildContext context) => new RenderSliverFooter();
}

class RenderSliverFooter extends RenderSliverSingleBoxAdapter {
/// Creates a [RenderSliver] that wraps a [RenderBox] which is sized to fit
/// the remaining space in the viewport.
RenderSliverFooter({
RenderBox child,
}) : super(child: child);

@override
void performLayout() {
final extent = constraints.remainingPaintExtent - math.min(constraints.overlap, 0.0);
var childGrowthSize = .0; // added
if (child != null) {
// changed maxExtent from 'extent' to double.infinity
child.layout(constraints.asBoxConstraints(minExtent: extent, maxExtent: double.infinity), parentUsesSize: true);
childGrowthSize = constraints.axis == Axis.vertical ? child.size.height : child.size.width; // added
}
final paintedChildSize = calculatePaintOffset(constraints, from: 0.0, to: extent);
assert(paintedChildSize.isFinite);
assert(paintedChildSize >= 0.0);
geometry = new SliverGeometry(
// used to be this : scrollExtent: constraints.viewportMainAxisExtent,
scrollExtent: math.max(extent, childGrowthSize),
paintExtent: paintedChildSize,
maxPaintExtent: paintedChildSize,
hasVisualOverflow: extent > constraints.remainingPaintExtent || constraints.scrollOffset > 0.0,
);
if (child != null) {
setChildParentData(child, constraints, geometry);
}
}
}

Here I changed one 3 things

  • Unconstrained the child maxExtent. Because if there's no more screen-space available, that would enforce a height of 0 to the footer.
  • changed SliverGeometry scrollExtent from "full screen height" to "actual available size". So that it actually only fill the remaining visible space. Not fill the screen.
  • added a minimum value to that same scrollExtent, equal to the actual footer height. So that if there's no more space remaining in the viewport, the children is simply added without any spacing around it.

We can now use it inside our CustomScrollView as usual.

End result :

new CustomScrollView(
slivers: <Widget>[
new SliverFixedExtentList(
itemExtent: 42.0,
delegate: new SliverChildBuilderDelegate((context, index) {
return new SizedBox.expand(
child: new Card(),
);
}, childCount: 42),
),
new SliverFooter(
child: new Align(
alignment: Alignment.bottomCenter,
child: new Container(
height: 42.0,
color: Colors.red,
),
),
),
],
),


Related Topics



Leave a reply



Submit