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();
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