Drop down menu or view on slide

Question

I was wondering if someone could guide me on how to accomplish the following,

The user has a title bar, when the user holds the title bar and drags down; it shows the user a different view. This is a view residing in a tabhost.

It is similar to android's default statusbar.

Answer 1

You should try to accomplish this (an AccordionView-like behavior) using ViewFlipper with RelativeLayout children and attached OnTouchListeners on the headers. It worked for me.

Sample application

main.xml //inside res/layouts

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent">
    <ViewFlipper android:id="@+id/flipper" 
        android:layout_width="fill_parent" android:layout_height="fill_parent">
        <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent">
            <TextView android:id="@+id/txt_states" android:text="First panel" 
                android:layout_centerHorizontal="true"
                android:textSize="18dp" android:textStyle="bold" android:textColor="@android:color/white"
                android:layout_width="wrap_content" android:layout_height="wrap_content" />
            <Button android:id="@+id/btn_next" android:text="@string/goto_second"
                android:layout_width="fill_parent" android:layout_height="wrap_content" 
                android:gravity="center_horizontal" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true"/>
            <TextView android:id="@+id/txt_content1" android:text="@string/loremipsum1" 
                 android:layout_width="fill_parent" android:layout_height="fill_parent" 
                 android:layout_below="@id/txt_states" android:layout_above="@id/btn_next" 
                 android:layout_marginTop="10dp" />
        </RelativeLayout>
        <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent">
            <Button android:id="@+id/btn_prev" android:text="@string/goto_first"
                android:layout_width="fill_parent" android:layout_height="wrap_content"
                android:gravity="center_horizontal" android:layout_centerHorizontal="true" />
            <TextView android:id="@+id/txt_commands" android:text="Second panel" 
                android:layout_centerHorizontal="true"
                android:textSize="18dp" android:textStyle="bold" android:textColor="@android:color/white"
                android:layout_width="wrap_content" android:layout_height="wrap_content" 
                android:layout_below="@id/btn_prev" />
            <TextView android:id="@+id/txt_content2" android:text="@string/loremipsum2" 
                 android:layout_width="fill_parent" android:layout_height="fill_parent"
                 android:layout_below="@id/txt_commands" android:layout_marginTop="10dp" />
        </RelativeLayout>
    </ViewFlipper>
</RelativeLayout>

androidManifest.xml //activity declaration only

<activity android:name=".AccordionSample" android:label="@string/app_name">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

AccordionSample.java //your main activity

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.ViewFlipper;

public class AccordionSample extends Activity implements View.OnTouchListener 
{
    private float oldTouchValue;
    private ViewFlipper flipper;
    private Button currentButton;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        flipper = (ViewFlipper)findViewById(R.id.flipper);
        findViewById(R.id.btn_prev).setOnTouchListener(this);
        findViewById(R.id.btn_next).setOnTouchListener(this);
    }

    private boolean onButtonTouchEvent(MotionEvent touchevent)
    {
        if (currentButton == null)
            return false;
        switch (touchevent.getAction())
        {
            case MotionEvent.ACTION_DOWN:
            {
                oldTouchValue = touchevent.getY();
                break;
            }
            case MotionEvent.ACTION_UP:
            {
                float currentY = touchevent.getY();
                final float diff = oldTouchValue - currentY;
                if ((diff < -100) && (currentButton.getId() == R.id.btn_prev))
                {
                    //Up --> Bottom
                    flipper.setInAnimation(AccordionAnimation.inFromTopAnimation());
                    flipper.setOutAnimation(AccordionAnimation.outToBottomAnimation());
                    flipper.showNext();
                }
                else if ((diff > 100) && (currentButton.getId() == R.id.btn_next))
                {
                    //Bottom --> Up
                    flipper.setInAnimation(AccordionAnimation.inFromBottomAnimation());
                    flipper.setOutAnimation(AccordionAnimation.outToTopAnimation());
                    flipper.showPrevious();
                }
                break;
            }
        }
        currentButton = null;
        return true;
    }

    @Override
    public boolean onTouch(View v, MotionEvent event)
    {
        currentButton = (Button)v;
        final boolean result = this.onButtonTouchEvent(event);
        return result;
    }
}

AccordionAnimation.java //for the up and down sliding

import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;

public class AccordionAnimation
{
    public static Animation inFromBottomAnimation()
    {
        Animation inFromBottom =
                new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
                        Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
        inFromBottom.setDuration(350);
        inFromBottom.setInterpolator(new AccelerateInterpolator());
        return inFromBottom;
    }

    public static Animation outToTopAnimation()
    {
        Animation outtoTop =
                new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
                        Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, -1.0f);
        outtoTop.setDuration(350);
        outtoTop.setInterpolator(new AccelerateInterpolator());
        return outtoTop;
    }

    public static Animation inFromTopAnimation()
    {
        Animation inFromTop =
                new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
                        Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
        inFromTop.setDuration(350);
        inFromTop.setInterpolator(new AccelerateInterpolator());
        return inFromTop;
    }

    public static Animation outToBottomAnimation()
    {
        Animation outtoBottom =
                new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
                        Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, +1.0f);
        outtoBottom.setDuration(350);
        outtoBottom.setInterpolator(new AccelerateInterpolator());
        return outtoBottom;
    }
}

strings.xml //inside res/values

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="goto_first">Slide down to see the first panel</string>
    <string name="goto_second">Slide up to see the second panel</string>
    <string name="loremipsum1">Lorem ipsum dolor sit amet...</string>
    <string name="loremipsum2">Sed ut perspiciatis unde omnis iste...</string>
    <string name="app_name">AccordionSample</string>
</resources>

Edit
If you'd like to split your different views into different layout xmls, say

1. first_view.xml and
2. second view.xml,

you should modify your onCreate method:

flipper = (ViewFlipper)findViewById(R.id.flipper);
LayoutInflater inflater = getLayoutInflater();

final View firstView = inflater.inflate(R.layout.first_view, flipper, false);
flipper.addView(firstView);

final View secondView = inflater.inflate(R.layout.second_view, flipper, false);
flipper.addView(secondView);

firstView.findViewById(R.id.btn_next).setOnTouchListener(this);
secondView.findViewById(R.id.btn_prev).setOnTouchListener(this);

Edit
or more elegantly and efficiently, simply just include the layout xmls you've created for the different views into your main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent">
    <ViewFlipper android:id="@+id/flipper" 
        android:layout_width="fill_parent" android:layout_height="fill_parent">
        <include android:id="@+id/flipping_view_1" layout="@layout/flipping_view_1" />
        <include android:id="@+id/flipping_view_2" layout="@layout/flipping_view_2" />
    </ViewFlipper>
</RelativeLayout>

where

• the layout/flipping_view_1.xml contains the first RelativeLayout, and
• the layout/flipping_view_2.xml contains the second RelativeLayout

of the ViewFlipper inside your original main.xml.

To learn more about the reusability of android layouts, and layout techniques overall, you should take a look at Romain Guy's great post covering layout tricks.

Answer 2

See these two posts for pointers - Android: Have an arbitrary View slide under another View like the software keyboard does and How can I make my page slide as the user slides finger on the screen?