Question

I’m attempting to replicate the Facebook app’s new menu slider. Creating a slider that comes in from the left is easy enough. However, the Facebook app takes the Activity’s layout and slides it right, with only a small part of its left edge still showing on the right side of the screen. I’m a bit confused about how to do this. Does anyone have any ideas?

This best thing I can think of, which I have not tried, is to use the Display class to determine the width of the screen, set the width of the outer-most View to that and display it to the right of the slider (obviously wrapped by a RelativeView).

Update: I’ve tried the following.

My outer-most View is a RelativeLayout. Inside this RelativeLayout there are two sibling Views. Both of them are LinearLayouts. The first one is a layout containing the side bar (in my XML, this is accomplished through an include). The second one, which sits on top, is a layout containing the main body of the Activity (the screen as I want the user to normally see it).

Here is my 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"
    android:background="@color/black" >

    <include
        android:id="@+id/mainnew_slider"
        layout="@layout/layout_slidermenu" />

    <LinearLayout
        android:id="@+id/mainfeed_mainlayout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/loginbg"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="64dip"
            android:background="@drawable/titlebar_background"
            android:orientation="vertical"
            android:padding="4dip" >

            <ImageButton
                android:id="@+id/mainfeed_slider"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/selector_titlebar_button"
                android:src="@drawable/sidebarico" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="1dip"
            android:background="@color/store_toolbar_bottom_border" />
    </LinearLayout>

</RelativeLayout>

When the user clicks the ImageButton, I use some animation code to make the main layout move to the right. The code I use to animation the main layout is:

        AnimationSet set = new AnimationSet(true);
        Animation animation = 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
        );
        animation.setDuration(1000);
        set.addAnimation(animation);

        LayoutAnimationController controller = new LayoutAnimationController(set, 0.0f);
        LinearLayout main = (LinearLayout) findViewById(R.id.mainfeed_mainlayout);
        main.setLayoutAnimation(controller);

When I click the slider button, the two children of the main layout slide to the right, but not the main layout itself (its background stays static). When the animation is complete, everything snaps back to its original position.

I don’t understand why it’s not moving the whole main layout and keeping it at its resting place.

Answer 1

A simple TranslateAnimation applied to your top-level view should do it. Don’t do it via layout, it’ll be way too slow.