Search code examples
androidviewflipper

Android ViewFlipper as slide in menu


I'm trying to make a slide in menu for an Android app using a ViewFlipper with 2 layouts, 1 as menu and 1 for the content. When the button in the content layout is touched the menu should slide in from the left and cover 80% of the screen. The way I am doing it now makes the menu slide in for 80% and then, after animation, shows the menu for 100%. Any idea on how to make this work?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <ViewFlipper android:id="@+id/viewflipper"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">   
<!-- content -->
        <LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
                <Button android:id="@+id/bt_test"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="slide"/>
            <TextView android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="hello"/>
        </LinearLayout>
<!-- menu -->
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
        </LinearLayout>
    </ViewFlipper>
</LinearLayout>

Animation: out:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="80%" android:duration="500"/>
</set>

in:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="-100%" android:toXDelta="-20%" android:duration="500"/>
</set>

onclick:

            flipper.setInAnimation(MainActivity.this, R.anim.slide_in);
            flipper.setOutAnimation(MainActivity.this, R.anim.slide_out);
            flipper.showNext();

Solution

  • Use this excellent library project instead. No point reinventing the wheel.

    At the very least you can look at the techniques used as all the source code is available.

    https://github.com/jfeinstein10/SlidingMenu

    https://play.google.com/store/apps/details?id=com.slidingmenu.example