Android: How to create a 'SplitContainer' between two 'Views'

Question

According to the screenshots I want to achieve the following ScreenUI (Android API >= 10):

You have a GoogleMapsSupportFragement and a ListView, which share the remaining height of the View (height is calculated at the application start, and application is only runnning in PortraitMode)

The behaviour of the ListView Container should be similar to the Android-Notification Menu, so user can swipe the List in and out, but the animation starts, if user releases the view (touch up).

So far, I implemented the two LinearLayout (Map and ListView) which are divided by the redline (LinearLayout). I managed, that the ListView is shown/hidden on click at the redline, but it`s looking odd if I hide the ListView, because the map is redrawn and leaves a black space..

Question is: Whats best way to implement (LinearLayout? Fragments?)? Do you know examples for theonTouchBehaviour` (similar to open Notication Menu)?

Here's my implementation:

//function is triggered at click on the redline-button
private void toggleOverlayList(){

    //TEST CASE API >= 11 

    int mListHeight = ((LinearLayout) findViewById(R.id.map_list)).getLayoutParams().height;
    Log.i(DEBUG,"toggleOverlayList() -> currentHeight:" + mListHeight );

    if(mListHeight == 0){
        ((LinearLayout) findViewById(R.id.map_wrapper)).getLayoutParams().height = mDisplayHeight;
        ((LinearLayout) findViewById(R.id.map_list)).getLayoutParams().height = mDisplayHeight;
        ((LinearLayout) findViewById(R.id.main_screen)).requestLayout();
    }
    else{
        ((LinearLayout) findViewById(R.id.map_wrapper)).getLayoutParams().height = 2* mDisplayHeight;
        ((LinearLayout) findViewById(R.id.map_list)).getLayoutParams().height = 0;
        ((LinearLayout) findViewById(R.id.main_screen)).requestLayout();
    }
}

Layout.xml

<LinearLayout 
  android:id="@+id/main_screen"
  android:animateLayoutChanges="true"
  android:orientation="vertical" >

  <LinearLayout
      android:id="@+id/map_wrapper">
      <fragment
         android:id="@+id/map"
         android:name="com.google.android.gms.maps.MapFragment"
        />
  </LinearLayout>

  <LinearLayout
    android:id="@+id/map_seperator"
    android:layout_height="20dp" >
  </LinearLayout>

  <LinearLayout
    android:id="@+id/map_list">

   <ListView
        android:id="@+id/listView1" >
   </ListView>

  </LinearLayout>

</LinearLayout>

Answer 1

you can use this library instead of implementing this by yourself. take a look at my answer over here. hope it helps.