How does the Gmail Android app do the webview-header-overlay magic for the mail-conversation view?

Question

Using hierarchyviewer on the Gmail conversation view shows an interesting and unusual layout hierarchy:

• All messages in a single conversation are rendered in a single WebView (specifically a com.google.android.gm.CustomWebView, seen on the left). Only the body of the messages is rendered - the spaces where the headers would go are left blank.
• On top of the WebView is overlaid a com.google.android.gm.MessageHeaderScrollView (seen on the right) which uses a HybridConversationScrollContainer to position a MessageHeaderView in the correct position for each message in the conversation view.

<->

So, how (and why) is this achieved? Is it something that an Android developer could & should aspire to re-create in their own apps?

Obviously the probable why is performance - WebView uses the fast native WebKit rendering of the message text, and a single WebView is probably more efficient than a separate WebView for each message. If anyone has seen any good blogposts on the performance benefits of this I'd be interested.

Yet there's an obvious complexity cost to this approach (against naively using an ExpandableListView with some TextViews inside it or whatever) - the HybridConversationScrollContainer has to somehow work out where the message headers should go over the web-rendering, in order to position it's MessageHeaderViews correctly. What I'd like to know is: How does it work out those offsets?

Answer 1

Incidentally, the only approach I can think of is javascript-based - use javascript in the WebView to gather the header coordinates, and then use WebView.addJavascriptInterface() to pass those coordinates on to Java and the HybridConversationScrollContainer. I haven't tried doing this myself though so I'm not sure if it could actually work.

There is a short post on the android Developer blog talking about the addJavascriptInterface() method:

http://android-developers.blogspot.com/2008/09/using-webviews.html

It would be wonderful if MessageHeaderScrollView could be released as an open-source library - I'd use it! - but seeing as the Gmail app is closed, it doesn't seem immediately likely.