Android sliding panels

Question

I'm trying to start an application and I'm kind of lost on how to do what I want.

This is what I want

Both red panels should be able to slide to the sides and the white one should expand if one of them (or both) them is collapsed, occupying that panel space. When I have the red panels on the screen, the white panel show all the content and not be under any of the panels.

What have I tried so far: I started by trying with two SlidingDrawers, but the white panel got behind the red ones, so, no luck there. After that I tried with 2 LinearLayouts (red panels) and a RelativeLayout (white panel), and tried to change width of the layouts with buttons (like is on the image on top). This caused always problems that I didn't know how to resolve.

Suggestions?

Edit: xml of the SlidingDrawer example:

<LinearLayout 
android:id="@+id/LinearLayout01"
android:layout_width="fill_parent" 
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" 
android:gravity="bottom" 
android:background="#FFFFFFFF">
<SlidingDrawer 
    android:layout_width="100dip" 
    android:id="@+id/SlidingDrawer" 
    android:handle="@+id/slideHandleButton" 
    android:content="@+id/contentLayout" 

    android:layout_height="fill_parent"
    android:orientation="horizontal">

    <LinearLayout 
        android:layout_width="wrap_content" 
        android:id="@+id/contentLayout" 
        android:orientation="horizontal" 

        android:background="#C0C0C0" 
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Meio"
            android:layout_toRightOf="@+id/buttonEsq" />
    </LinearLayout>
    <Button 
        android:layout_width="30dip" 
        android:layout_height="30dip" 
        android:id="@+id/slideHandleButton" 
        android:background="@drawable/arrowup">        
    </Button>
</SlidingDrawer>
</LinearLayout>

And the xml of the LinearLayout example:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >

    <RelativeLayout
    android:id="@+id/relativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"                
    android:orientation="horizontal"
    android:layout_toLeftOf="@+id/linearLayout3"
    android:layout_toRightOf="@+id/linearLayout1"
    android:background="#FFFFFFFF">
    <Button
        android:id="@+id/buttonEsq"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"


        android:text="v--" />
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Meio"
        android:layout_toRightOf="@+id/buttonEsq" />

    <Button
        android:id="@+id/buttonDir"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_toRightOf="@+id/textView1"
        android:text="--v" />
</RelativeLayout>
<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="50dip"
    android:layout_height="fill_parent"
    android:layout_alignParentLeft="true"


    android:background="#FFFF0000">
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Esquerda" />
</LinearLayout>



<LinearLayout
    android:id="@+id/linearLayout3"
    android:layout_width="50dip"
    android:layout_height="fill_parent"
    android:layout_alignParentRight="true"



    android:background="#FFF00000">
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Direita" />
</LinearLayout>

</RelativeLayout>

The android code (the commented part is the code of the 1st example):

public class Main extends Activity {
Button slideHandleButton;
Button slideHandleButtonLeft;
Button slideHandleButtonRight;
SlidingDrawer slidingDrawer;

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.mainlayouts);
/*  slideHandleButton = (Button) findViewById(R.id.slideHandleButton);
    slidingDrawer = (SlidingDrawer) findViewById(R.id.SlidingDrawer);

    slidingDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {
        @Override
        public void onDrawerOpened() {
            slideHandleButton.setBackgroundResource(R.drawable.arrowdown);
        }
    });

    slidingDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {
        @Override
        public void onDrawerClosed() {
            slideHandleButton.setBackgroundResource(R.drawable.arrowup);
        }
    });*/
    slideHandleButtonLeft = (Button) findViewById(R.id.buttonEsq);
    slideHandleButtonLeft.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            LinearLayout lll = (LinearLayout) findViewById(R.id.linearLayout1);
            RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(50, LinearLayout.LayoutParams.FILL_PARENT);              
            lll.setLayoutParams(params);            
        }
    }); 
}
}

Answer 1

SlidingDrawer can only slide in from the right or the bottom, it is unable to slide in from the top or the left. You can try the answer from this question: Android SlidingDrawer from top? or you can get try rewrite the source code http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/1.5_r4/android/widget/SlidingDrawer.java.

However, a SlidingDrawer wont allow

the white panel show all the content and not be under any of the panels

as it will slide over the white panel

The only solution I can think of is to use a series of scale/translate, translate the left or right panel off-screen and set visibility to gone, while at the same time scale the center panel out in the direction of whichever red panel is being removed.

I tried to make a similar prototype some time ago and used this method but the scale animations looked terrible, not to mention the onAnimationEnd listener doesn't work, you'll have to extend a LinearLayout and override onAnimationEnd there for it to work.