title: How does the Gmail Android app do the webview-header-overlay magic for the mail-conversation view?
body: <p>Using <a href="http://developer.android.com/guide/developing/debugging/debugging-ui.html" rel="nofollow noreferrer">hierarchyviewer</a> on the Gmail conversation view shows an interesting and unusual layout hierarchy:</p>
  
  <ul>
  <li><strong>All</strong> messages in a single conversation are rendered in a <strong>single</strong> WebView (specifically a <code>com.google.android.gm.CustomWebView</code>, seen on the left). Only the body of the messages is rendered - <strong>the spaces where the headers would go are left blank</strong>.</li>
  <li>On top of the WebView is overlaid a <code>com.google.android.gm.MessageHeaderScrollView</code> (seen on the right) which uses a <code>HybridConversationScrollContainer</code> to position a <code>MessageHeaderView</code> in the correct position for each message in the conversation view.</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/bmjxQ.png" alt="CustomWebView"> &lt;-> <img src="https://i.stack.imgur.com/NwryI.png" alt="MessageHeaderScrollView"></p>
  
  <p>So, how (and why) is this achieved? Is it something that an Android developer could &amp; should aspire to re-create in their own apps?</p>
  
  <p>Obviously the probable <em>why</em> 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.</p>
  
  <p>Yet there's an obvious complexity cost to this approach (against naively using an <a href="http://developer.android.com/reference/android/widget/ExpandableListView.html" rel="nofollow noreferrer">ExpandableListView</a> with some TextViews inside it or whatever) - the <code>HybridConversationScrollContainer</code> has to somehow work out where the message headers should go over the web-rendering, in order to position it's <code>MessageHeaderViews</code> correctly. What I'd like to know is: <em>How</em> does it work out those offsets?</p>