Question

I have a view like this

When a user clicks on any button like say “Audi”.

what I want is to show a view above of this with animation like

What I have tried is

I make a layout like this (Just for test the animation)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
    android:id="@+id/hideLayout"
    android:layout_width="200dip"
    android:layout_height="wrap_content"
    android:layout_above="@+id/buttonLayout"
    android:background="#f0f"
    android:visibility="gone" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
</LinearLayout>

<LinearLayout
    android:id="@+id/buttonLayout"
    android:layout_width="200dip"
    android:layout_height="wrap_content" >

    <Button
        android:id="@+id/btn_showView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show View" />
</LinearLayout>

and then make animation like

Animation showView=(Button)findViewById(R.id.btn_showView);

and my anim file is

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="300"
        android:fromYDelta="100%p"
        android:toYDelta="0" />

</set>

and then

showView=(Button)findViewById(R.id.btn_showView);

    showView.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            hideLayout.startAnimation(animShow);
            animShow.setAnimationListener(new AnimationListener() {

                @Override
                public void onAnimationStart(Animation animation) {
                    hideLayout.setVisibility(View.VISIBLE);

                }

                @Override
                public void onAnimationRepeat(Animation animation) {
                    // TODO Auto-generated method stub

                }

                @Override
                public void onAnimationEnd(Animation animation) {
                    hideLayout.setVisibility(View.VISIBLE);

                }
            });

        }
    });

It is working but not how I want. the text View is coming from the bottom. I hope my image shows what I want.

Thanks in advance.

Answer 1

I found a solution for android >=3.0, Object Animator

I fix the height of the view as it is not a problem in my case.

I make two view

1) Top View width fix height 100dip(Which need to be animate) make it invisible

2) Bottom View fix height 100dip(Visible)

3) when I click showView I call following lines

ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(topLayout,
            "y", 100, 0);
objectAnimator.addListener(new AnimatorListener() {

        @Override
        public void onAnimationStart(Animator animation) {
            // TODO Auto-generated method stub
            topLayout.setVisibility(View.VISIBLE);
            showView.bringToFront();
        }

        @Override
        public void onAnimationRepeat(Animator animation) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onAnimationEnd(Animator animation) {

        }

        @Override
        public void onAnimationCancel(Animator animation) {
            // TODO Auto-generated method stub

        }
    });
            objectAnimator.setDuration(500);
    objectAnimator.start();

may be it will help some one. 🙂