Animate EditText out of a window

Question

I have a RelativeLayout with a "search bar" (EditText) and a ListView under it:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/etSearch"
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:inputType="text" >

    <ListView
        android:id="@+id/listView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginTop="0dp"
        android:clipToPadding="false"
        android:listSelector="@drawable/listview_selector" >
    </ListView>
</LinearLayout>

After the user "searches" I want the EditText to animate out of the screen and the ListView to push to the top. I put together a very rough GIF of what I need:

enter image description here

Does anyone have an idea on how I can accomplish this? thanks

UPDATE

I found out how to make the EditText animate out of the screen with this:

slide_out_top.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="0%" android:toYDelta="-100%" android:duration="600"/>
</set>

and then using it on the EditText like this:

mSlideOutTop = AnimationUtils.loadAnimation(this, R.anim.slide_out_top);
et.startAnimation(mSlideOutTop);

but then the ListView stays at its current height. What I want is for the ListView to extend to the top as the EditText animates out.

of course but that doesn't shift it up, it just hides it and the ListView just jumps up — Harry, Jan 22 '15 at 16:29
I updated my answer, the EditText is animating out, but I want the ListView to extend up to fill the screen now — Harry, Jan 22 '15 at 17:06

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

You can add TranslateAnimation to the ViewGroup( which is LinearLayout for you), the y-axis moving distance is the hight of the editText View. Then trigger this animation when you need. (update: just thought this way may create a blank bar at bottom, bad idea)

I have an another tricky idea.

set the EditText view in the ListView with position 0 , then simply call the smoothScrollToPostion(1) method to scroll. see this may help you smoothScrollToPositionFromTop() is not always working like it should

edited May 23 '17 at 12:28

Community

1
1

answered Jan 22 '15 at 16:37

Bruce_Van

46
5

I used Animation and the EditText successfully animates out of the screen. BUT, the ListView isn't expanding with it. Any ideas? I updated my answer btw – Harry Jan 22 '15 at 17:06
1

listview's height doesn't change, the measure function wasn't call will editText slide out. – Bruce_Van Jan 22 '15 at 17:23
I understand why the height doesn't change, but I'm trying to figure out how to make it scale to the top – Harry Jan 22 '15 at 17:28
it won't change , you didn't scale the EditText view , animation just draw it to somewhere else, the real position of that view still there, so the listView can't popup. – Bruce_Van Jan 22 '15 at 17:37
So if I change the EditText view down to 0, the ListView will expand up? – Harry Jan 22 '15 at 17:44
yes , but if you use ValueAnimator to set the height of EditText dynamically , it will be ugly.... I think extend ListView, and use my second idea will be ok. – Bruce_Van Jan 22 '15 at 17:48
unfortunately your send suggestion won't work because I want to be able to open/close the EditText in any position of the ListView, not just the top – Harry Jan 22 '15 at 17:50
sorry for misunderstood. If so, I need some time to think about the better idea :) – Bruce_Van Jan 22 '15 at 17:54
no problem, I'm still looking, thanks for the help :) – Harry Jan 22 '15 at 17:55

Animate EditText out of a window

1 Answers1