How can I create a sliding layout, like the main android menu?

Question

Hi Android Guru,

I need to create an application with 4 view. I need to pass from a view to an other simply by a touch and a move to the left or to the right (no button). The effect I would like is the same that you see when you navigate in the main menu of android when you pass from a page to another.

I have tested the ViewFlipper, but I cannot use it: it seems not to catch the touch event correctly. I don't even know if it is the right component.

What is the right way to handle this?

Answer 1

I think what you're looking for is a SlidingDrawer. With that, you could so something like this:

<SlidingDrawer
     android:id="@+id/drawer"
     android:layout_width="match_parent"
     android:layout_height="match_parent"

     android:handle="@+id/handle"
     android:content="@+id/content">

     <ImageView
         android:id="@id/handle"
         android:layout_width="88dip"
         android:layout_height="44dip" />

     <GridView
         android:id="@id/content"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />

 </SlidingDrawer>

Answer 2

I think you can use layout animation for the purpose.. // Creating a Layout Animation //res/anim/popin.xml

//res/anim/popinlayout.xml

// Applying a Layout Animation and Animation Listener aViewGroup.setLayoutAnimationListener(new AnimationListener() { public void onAnimationEnd(Animation _animation) { // TODO: Actions on animation complete. } public void onAnimationRepeat(Animation _animation) {} public void onAnimationStart(Animation _animation) {} });

aViewGroup.scheduleLayoutAnimation();

Answer 3

You mean like the home screen where you can swipe between views and it snaps at each one?
This might help you out.

Answer 4

Finally I made it. This is my solution. First of all you need to define a main layout, that contains the child layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >


<ViewFlipper android:id="@+id/ViewFlipper01" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    >
    <include android:id="@+id/libraryView1"  layout="@layout/page_1" />
    <include android:id="@+id/libraryView2"  layout="@layout/page_2" />


</ViewFlipper>

</RelativeLayout>

where page_1 and page_2 are the layout that I need to exchange. Those layout are absolutely standard layout, made as you prefear.

Then you need an activity:

public class Main extends Activity {

    private ViewFlipper vf;

    private float oldTouchValue;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        vf=(ViewFlipper)findViewById(R.id.ViewFlipper01);
    }

    @Override
    public boolean onTouchEvent(MotionEvent touchevent) {
        switch (touchevent.getAction())
        {
            case MotionEvent.ACTION_DOWN:
            {
                oldTouchValue = touchevent.getX();
                break;
            }
            case MotionEvent.ACTION_UP:
            {
                //if(this.searchOk==false) return false;
                float currentX = touchevent.getX();
                if (oldTouchValue < currentX)
                {
                   vf.setInAnimation(inFromLeftAnimation());
                   vf.setOutAnimation(outToRightAnimation());
                    vf.showNext();
                }
                if (oldTouchValue > currentX)
                {
                    vf.setInAnimation(inFromRightAnimation());
                    vf.setOutAnimation(outToLeftAnimation());
                    vf.showPrevious();
                }
            break;
            }
        }
        return false;
    }

    //for the previous movement
    public static Animation inFromRightAnimation() {

        Animation inFromRight = new TranslateAnimation(
        Animation.RELATIVE_TO_PARENT,  +1.0f, Animation.RELATIVE_TO_PARENT,  0.0f,
        Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
        );
        inFromRight.setDuration(350);
        inFromRight.setInterpolator(new AccelerateInterpolator());
        return inFromRight;
        }
    public static Animation outToLeftAnimation() {
        Animation outtoLeft = new TranslateAnimation(
         Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,  -1.0f,
         Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
        );
        outtoLeft.setDuration(350);
        outtoLeft.setInterpolator(new AccelerateInterpolator());
        return outtoLeft;
        }    
    // for the next movement
    public static Animation inFromLeftAnimation() {
        Animation inFromLeft = new TranslateAnimation(
        Animation.RELATIVE_TO_PARENT,  -1.0f, Animation.RELATIVE_TO_PARENT,  0.0f,
        Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
        );
        inFromLeft.setDuration(350);
        inFromLeft.setInterpolator(new AccelerateInterpolator());
        return inFromLeft;
        }
    public static Animation outToRightAnimation() {
        Animation outtoRight = new TranslateAnimation(
         Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,  +1.0f,
         Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
        );
        outtoRight.setDuration(350);
        outtoRight.setInterpolator(new AccelerateInterpolator());
        return outtoRight;
        }    
}

Tada! Done!