Adding Header and Footer for iOS TableView and Android ListView

Hi guys, I’m back with another blog post, this time covering how to use the a custom view for header and footer to be used alongside iOS TableView / Android TableView. You’ll see how you can easily create custom views and use them as headers and footers in your Crosslight apps.

Screen Shot 2015-11-19 at 3.38.19 PM

After this project has completed, you’ll end up with a custom header and footer in your ListView/TableView. When you click on the Add Item button on the top, new item will be added to the list, and you can see how the header and footer is correctly persisted when the items collection is updated.

To complete this project, there are several steps need to be completed:

  • Preparing the project
  • Creating custom views for iOS
  • Preparing the BIndingProvider
  • Preparing the ViewModel
  • Modify iOS ViewController and running the project
  • Creating custom views for Android
  • Modifying Android ListActivity and running the project

Without further ado, let’s get started.

Preparing the project

For this sample, I’ll keep it nice and simple. This time, I’ll start from the Navigation template created using Crosslight Project Wizard. I’ll name this project: HeaderAndFooter.

Creating custom views for iOS

Let’s begin by creating a new custom header view for iOS, by right-clicking on the VIews folder in HeaderAndFooter.iOS/Views folder and choose Add, New File.

Screen Shot 2015-11-19 at 4.57.27 PM

Then choose Crosslight, Crosslight iOS View for iPhone.

Screen Shot 2015-11-19 at 4.54.59 PM

Give it a name of CustomHeader. This will generate two files, CustomHeader.xib and CustomHeader.cs for the designer files.

Then open the CustomHeader.xib using Xcode Interface Builder.

Screen Shot 2015-11-19 at 4.59.08 PM

In Xcode Interface Builder, drag a Label and a button.

Screen Shot 2015-11-19 at 5.03.12 PM

Set the label outlet as TxtHeader and the button as BtnHeader. I won’t go too much on the layouting details, but you can ensure the followings are set:

  • Set the View size as Freeform, so you can adjust the view size freely.
    Screen Shot 2015-11-19 at 5.06.01 PM
  • Turn off Auto Layout.
    Screen Shot 2015-11-19 at 5.06.24 PM
  • Ensure that the View background is set to Default (no fill), this will avoid clipping issues when placed as the header view.
    Screen Shot 2015-11-19 at 5.07.15 PM

Your custom header is now ready. Let’s move on to custom footer.

Basically, you’re going to perform the same tasks as adding a custom header, but the difference is that you’re going to give it a file name of CustomFooter, then provide a label with the outlet of TxtCopyright.

Screen Shot 2015-11-19 at 9.14.16 PM

Preparing the BindingProvider

Since you’ve successfully created the custom views, let’s prepare the BindingProvider first to prepare the properties and commands you wish to bind to the View. Open up NavigationBindingProvider (I renamed this file to MainBindingProvider to avoid confusion) and add the highlighted lines.

From the added lines, notice that we’re going to do the following:

  • Bind ButtonText property in the ViewModel to the BtnHeader button.
  • Bind the ViewModel’s built-in AddCommand to the BtnHeader button. This is available in the EditableListViewModel shipped in Crosslight.
  • Bind the HeaderText property in the ViewModel to the TxtHeader label.
  • Bind the CopyrightText property in the ViewModel to TxtCopyright label. This is for the footer.

Since you’ve prepared everything in the BindingProvider, let’s modify the ViewModel.

Modifying the ViewModel

The  NavigationViewModel now looks like the following. It’s located inside the HeaderAndFooter.Core/ViewModels folder.

Let’s take a deeper look at this class, starting from the top. In the constructor, we’ve prepared our SourceItems with ObservableCollection. We then initialize the ButtonText property and the CopyrightText property. The ButtonText and CopyrightText property are all MVVM-ready properties. The HeaderText is also an MVVM-ready property, but in the property getter, the text is always updated according to the number of items which exists in the list.

Right after the properties, we then override the built-in CanExecuteAdd method to return true so that the AddCommand can be executed, as well as overriding the actions for the ExecuteAdd method. Here, we simply add a new NavigationItem to the list. Just right after the method, Crosslight has provided an elegant way to perform any additional changes to other properties or any other implementation by overriding the OnCollectionChanged method. In the method, we trigger the OnPropertyChanged of the HeaderText, so that the number of items is always updated in our custom header.

Modify iOS ViewController and running the project

Now that you got the Core project covered, let’s modify the MainViewController (located inside HeaderAndFooter.iOS/ViewControllers) a bit.

In the MainViewController, we’ve overridden the HeaderViewTemplate as well as FooterViewTemplate to return the Nib for each custom header and footer view that we’ve just defined. We also made things simpler by not showing the group header as wellas ensuring that the used TableViewStyle is Plain. Run the project. You should get the following result.

If you’re curious about the separator that exists between the header with the table view, as well as the footer with the table view, it’s because I’ve added an additional view in the custom header and footer layout, with the height of 1 unit and giving it a light gray background, to show the boundaries of the custom header and custom footer view. We’re going to do the same with Android layout later. You’ve completed the iOS version. Let’s move on to the Android.

Creating custom views for Android

Similar to iOS, you’ll need to create a custom header view first for Android. To do this, simply right click on the Resources/layout folder in the HeaderAndFooter.Android/Views folder, then choose Add, New Item.

Screen Shot 2015-11-19 at 9.42.51 PM


From the dialog that appears, choose AndroidLayout, and give it a name of CustomHeader.

Screen Shot 2015-11-19 at 9.43.39 PM


And here’s the contents of the CustomHeader.axml file.

This layout simply contains a pretty much similar layout with iOS, that contains a label, a button, and a gray separator at the bottom. Repeat the same procedure for the custom footer layout. Here’s the contents of the CustomFooter.axml file.

Modifying Android ListActivity and running the project

Since you’ve prepared the custom views let’s modify the Android ListActivity to display our custom header and footer. Open up MainActivity in the HeaderAndFooter.Android/Activities folder and take note of the following changes.

All you need to do is just override the FooterLayoutId as well HeaderLayoutId and provide the layout you’ve just created. If you notice in the template, right in the InitializeView method, we’re registering the ListView with the TableView identifier at runtime. This is how you would register a view at runtime. For more information in registering view at runtime, check out this document in the Developer Center.

You’re now ready to run the project. You should get the result similar to the following.

Wrapping Up

You’ve seen how easy it is to set up a custom header and footer view to use with iOS TableView and Android ListView. With Crosslight, the custom views are automatically compatible with data binding and Crosslight takes care of the magic, so you can focus on building your app instead of having to worry about wiring behind the scenes. Hopefully this gives you a good insight on how Crosslight accomplishes business scenarios elegantly, without compromising any of the MVVM-design pattern enforced throughout the app.

As always, you can find the source code to this post here:

See you in the next post,
Nicholas Lie

Leave a Reply