How can I "slide up" a view on android from the bottom of a screen?

Question

I'm trying to make a really simple slide up list view, which is displayed when a user clicks on a button at the bottom of the screen. Here's how it should look:

And a complete implementation in HTML/JS http://jsbin.com/utAQOVA/1/edit

I've tried to use RelativeLayout to position the list just below the button, and put that whole thing into a wrapper and then animate that up/down (same as in the JSBin above).

The problem is that the bottom part which isn't visible in the beginning is somehow clipped, even if I slide it up. Evern if I initially show a portion of the list as the screenshow below shows, the bottom part gets clipped when it moves up and only the part that was initially visible is displayed.

What would be a proper approach to do this kind of animation?

Here's a relevant portion of the layout

Edit: after a brief discussion (in the comments of the accepted answer) I've solved this by removing the wrapping LinearLayout around the part that is animated and I simply changed height of the ListView, which pushes the button up.

Answer 1

The problem you have might come form how ListView does its own layout, basically it fits itself to the size available on screen and paints that part and since you create the ListView without Height or very small height that the size it keeps. You can solve this with two approaches:

1. Replaces the ListView with a simple LinearLayout - filled with all you list items, I would do this if you don't have many items on the list - then the advantages of a ListView over a simple LinearLayout is negligible.
2. Use a ValueAnimator and update the position & height property of the ListView while animating.

Adapted from a post I mentioned in the comments a ValueAnimator should look like this:

ValueAnimator va = ValueAnimator.ofInt(0, height);
    va.setDuration(700);
    va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        public void onAnimationUpdate(ValueAnimator animation) {
            Integer value = (Integer) animation.getAnimatedValue();
            v.getLayoutParams().height = value.intValue();
            v.setTranslationY(-value.intValue());
            v.requestLayout();
        }
    });

• I'm not sure if using setTranslationY is the right way for this question or maybe you should use a negative marginTop value (depends on the layout)

Answer 2

The animation you're looking for would look like this.-

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_longAnimTime"
    android:fromYDelta="100%p"
    android:toYDelta="0" />

You can run it storing it an animation xml resource, and doing.-

Animation anim = AnimationUtils.loadAnimation(this, R.anim.animId);
yourView.startAnimation(anim);