How to cleanly superpose ScrollableViews in Android
In order to implement a navigation bar ala Facebook I have the following layout configuration:
<FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" > <!-- This is the Lower Layer hosting the navbar --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" > <!-- ListView representing the navbar --> <ListView /> </LinearLayout> <!-- This is the Top Layer hosting the Content --> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" > <!-- This is where the View of the Content will be injected --> </FrameLayout> </FrameLayout>
So the basic idea is that when I want to open the navbar I just shift the TopLayer to the right and the navbar will be revealed. Now this works well and I can interact with the navbar's ListView in order to navigate through the application, as far as the view that gets injected inside the TopLayerisn't a ScrollableView(like another ListView, a ScrollViewor a WebView).
For instance, when the TopLayeris a WebViewinstance, I can't scroll and interact with the navbar's ListViewbecause it is the WebViewthat gets scrolled (althoough I shifted it to the right).
I guess it's not trivial to superpose many ScrollableView's but I hope there are hacks to overcome these issues.
Thanks for your help!
By the way, this is how I am shifting the TopLayerview (using TranslateAnimation):
TranslateAnimation translateAnim = new TranslateAnimation(0.0F, mListView.getWidth(), 0.0F, 0.0F); translateAnim.setDuration(..); translateAnim.setFillAfter(true); mTopLayerView.startAnimation(translateAnim);
According to my app - Android UI Patterns (https://play.google.com/store/apps/details?id=com.groidify.uipatterns), there are 2 sample implementations of Facebook navigation and animation, this is:
- android-sliding-menu-demo: https://github.com/gitgrimbo/android-sliding-menu-demo
- gui-sliding-sidebar: https://github.com/walkingice/gui-sliding-sidebar
Can you take a try if it works.
Turns out the problem was not due to superposing ScrollableViews or anything but to the fact that when using TranslateAnimation the logical position (ie: not visual) of the animated view is still bound to its original position. Thus when I thought I was clicking on the navigation's item, I was in fact interacting with the ContentView that I thought has moved.
Now I am using ObjectAnimator which fixes this issue and it works very well. I only have to assure the compatibility with Pre-Honeycomb devices (I am thinking of using NineOldAndroids for this matter. If someones knows any other alternative to fix this properly using the old animation API, feel free to answer this question).