Merging two listviews one above another with a common scroll

Question

I am currently working on an application in which I have to taken into account two ListViews one above another and that too with a common scroll. I know this is not the best practice, instead I should have taken just a single ListView but the problem is with the layouts that doesn't seem to be possible with a sinlge ListView. Actually my first ListView will contain list of friend requests that I can accept or ignore and that are not static and can vary with no limit and second list will contain my friends which may vary too i.e not static. If i have to only show these two things, then I should have preferred single ListView and can be easily done but the actual problem arises when i have to add an Alphabetical sorting of my second list i.e my friends list using side bar and that is applicable only for my second list not for first one. This one is the screenshot without side bar

but alphabetical side bar will be there for new connections. So I don't think, this can be possible with a single list since alphabetical side bar will be added to the whole list not the part of a list. so right now I am trying to save myself from using ScrollView for my two ListViews since that will be very expensive. so I need the best way as how to go with this type of structure. Should take two ListView inside ScrollView or it can be done with a single ListView that will be more preferred.

Please pour your suggestions. Thanks in advance.

Answer 1

What about putting your two ListViews one after the other inside a LinearLayout container and you put that container inside a ScrollView? Then (programatically) you calculate the total height that the ListView needs to be in order to wrap all it's content, so your ListViews will never scroll but your ScrollView will. Here is the idea:

Layout

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <!-- Container -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        <!-- Your list views -->
        <ListView
            android:id="@+id/listView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
        </ListView>
        <ListView
            android:id="@+id/listView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
        </ListView>
    </LinearLayout>
</ScrollView>

Code

private void resizeListView(ListView listView) {
    ListAdapter adapter = listView.getAdapter(); 
    int count = adapter.getCount();
    int itemsHeight = 0;
    // Your views have the same layout, so all of them have
    // the same height
    View oneChild = listView.getChildAt(0);
    if( oneChild == null)
        return;
    itemsHeight = oneChild.getHeight();
    // Resize your list view
    LinearLayout.LayoutParams params = (LinearLayout.LayoutParams)listView.getLayoutParams();
    params.height = itemsHeight * count;
    listView.setLayoutParams(params);
}

You may want to (actually you need to) wait for the ListView to get drawn so getChildAt(int index) can actually return a View and avoid getting a null. You can achieve this adding this to your onCreate:

ViewTreeObserver listVTO = listView.getViewTreeObserver();
listVTO.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        listView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        resizeListView(listView);
    }
});

Just a suggestion, you may want to try the new RecyclerView because it can handle recycling with different types of Views