Creating a menu like the "Notification Bar"

Question

I need to create a menu like the Notification bar, at the bottom of my application. Which means, you can drag the notification bar right? That is what I need as well.

For an example, before dragging, the menu should stay at the bottom like below

After the dragging, it should be like this

Up to now, all the Menus I have dealt with had something to with the Menu button, but this one doesn't. How can I create like this?

Answer 1

use Sliding Drawer to achieve this

http://developer.android.com/reference/android/widget/SlidingDrawer.html

SlidingDrawerActivity.java

public class SlidingDrawerActivity extends Activity implements OnClickListener {
 Button slideButton, b1, b2, b3;
 SlidingDrawer slidingDrawer;

 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_sliding_drawer);
  slideButton = (Button) findViewById(R.id.slideButton);
  slidingDrawer = (SlidingDrawer) findViewById(R.id.SlidingDrawer);
  b1 = (Button) findViewById(R.id.Button01);
  b2 = (Button) findViewById(R.id.Button02);
  b3 = (Button) findViewById(R.id.Button03);
  b1.setOnClickListener(this);
  b2.setOnClickListener(this);
  b3.setOnClickListener(this);
  slidingDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {
   @Override
   public void onDrawerOpened() {
    slideButton.setText("V");
   }
  });
  slidingDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {
   @Override
   public void onDrawerClosed() {
    slideButton.setText("^");
   }
  });
 }

 @Override
 public void onClick(View v) {
  Button b = (Button) v;
  Toast.makeText(SlidingDrawerActivity.this,
    b.getText() + " is Clicked :)", Toast.LENGTH_SHORT).show();
 }
}

activity_sliding_drawer.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Drag the control at the bottom"
        android:textSize="20dp"
        tools:context=".SlidingDrawerActivity" />

    <SlidingDrawer
        android:id="@+id/SlidingDrawer"
        android:layout_width="wrap_content"
        android:layout_height="250dip"
        android:layout_alignParentBottom="true"
        android:content="@+id/contentLayout"
        android:handle="@+id/slideButton"
        android:orientation="vertical"
        android:padding="10dip" >

        <Button
            android:id="@+id/slideButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="^" >
        </Button>

        <LinearLayout
            android:id="@+id/contentLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="10dip" >

            <Button
                android:id="@+id/Button01"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:text="Button 1" >
            </Button>

            <Button
                android:id="@+id/Button02"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:text="Button 2" >
            </Button>

            <Button
                android:id="@+id/Button03"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="2dp"
                android:text="Button 3" >
            </Button>
        </LinearLayout>
    </SlidingDrawer>

</RelativeLayout>

Answer 2

You need this library in your project. Its Android Sliding Up Panel by Umano.

Answer 3

Here is what you want, just do some change to positioning

Sliding Layer