How to get a Gesture View like in official Facebook app

Question

I want to implement the same behaviour of the notification view in the official Facebook app. The "notifications" tab are at the bottom and can drag/drop via fingers to full screen.

How can i do that?

I've tried it via ViewFlipper and Animation.... But no success.

Does anyone know how we can do this?

The app "Zedge" has the same in the "search" function. Via drag/drop you can open the "search" view.

Answer 1

Those Apps are using a SlidingDrawer. The SlidingDrawer will do all the opening and closing for you only have to define the content view and the view for the handle.

It is the same view that is also used as the application drawer on the home screen.

Answer 2

Additionally, here is a litte demo how the SlideingDrawer is used:

/src - SliderActivity.java:

import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.SlidingDrawer;
import android.widget.SlidingDrawer.OnDrawerCloseListener;
import android.widget.SlidingDrawer.OnDrawerOpenListener;

public class SliderActivity extends Activity {
    Button slideHandleButton;
    SlidingDrawer slidingDrawer;

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

        setContentView(R.layout.main);
        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);
            }
        });
    }
}

/res/layout - main.xml

<?xml version="1.0" encoding="utf-8"?>
<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">
    <SlidingDrawer android:layout_width="wrap_content"
        android:id="@+id/SlidingDrawer" android:handle="@+id/slideHandleButton"
        android:content="@+id/contentLayout" android:padding="10dip"
        android:layout_height="200dip">
        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:id="@+id/slideHandleButton"
            android:background="@drawable/arrowup"></Button>
        <LinearLayout android:layout_width="wrap_content"
            android:id="@+id/contentLayout" android:orientation="vertical"
            android:gravity="center|top" android:padding="10dip"
            android:background="#505050" android:layout_height="wrap_content">
            <TextView android:id="@+id/TextView01" android:layout_width="wrap_content"
                android:layout_height="fill_parent" android:layout_weight="8" android:text="Hello Slider"></TextView>
            <Button android:id="@+id/Button02" android:layout_weight="2" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:text="Do anything"></Button>
        </LinearLayout>
    </SlidingDrawer>
</LinearLayout>

Additionally you need to images in your /res/drawable folder - in this case like arrowup.png and arrowdown.png

If you put that all together it turns out to look like that: