Mbio

This brief tutorial covers a simple approach to place a view in the bottom of its parent in order complement the information provided by any kind of scrolling view. Due to the massive usage of ListViews, this example will use it as a basis. The container suggested behaves similarly as a list footer does, with the difference that this one stays at the bottom, independently of the view, even when there’s no sufficient content within the list to cover it. At the bottom of this text, links to the source code, a demo video and the covered sample app to download from Google Play are included. Note that it has been intended to work the same way in pre-ICS versions of Android.

Before getting into business I need to give credit to those who always remind me that we’d  be as twice as ignorant if others wouldn’t have shared every small piece of knowledge or finding they had come to. Precisely in my case I’d knew almost nothing without those generous and smart people behind. Still feels ridiculous to see other individuals being reluctant to such a clear positive practice.

Objective

This demo shows an easy and cross-version way to move a container accordingly to the displacement of a scroll view of any kind. Note that the same technique can also be applied for different purposes within the same visual transformation category. Basically the goal is the following:

The concept

There are a pair of ways to achieve that. The simplest I’ve come to meets the following key factors:

1. The List or scrollingView needs a footer. If you have a ListView, add an empty footer to it with the same height as your sticky container. (if you already have a footer, append a view to it). That won’t only help to make the list able to scroll up enough to give the necessary space for the container to show up, but it’ll provide of an easy way to guess the current position of the last element of the list. Instead of having to find out the height of it by iterating through all the views of the list, it is as easy as to get the top position of the “fake footer” which is by definition the last view within it. <getTop()>
2. Set the scroll listener of your ListView <setOnScrollListener>. The state of the sticky container will by updated from its onScroll method.
3. The math: That really depends on what you want to achieve, yet it is extremely simple stuff compared to any kind of high-school physics class. It should be easy to see from the code provided. <updateFooter()> method.
4. Extra point: To make it look a bit nicer you can add some margin between the last element of the list and the footer container. That would be included in the calculation. <listVsMovingViewMargin>

*Adding effects on top of that is fairly easy. You can see an example of a basic shadow and alpha blending in the provided code, but the possibilities are limitless, especially when targeting API 11 onwards.

Resources

Feel free to explore, get and use the sample code provided.

If you want to see how it works on your device, go and install the app directly from Google Play.

Finally and if you already have come across this case and have a different approach and/or suggestion, please feel free to share it around. First it’ll be me and then all the potential readers who will appreciate it.

Happy customizing.