Develop Reference

Android detects clicks when it shouldn't

I have an image button and associated click handler.
When I animate button (using translate animation) the button, obviously, changes it's position on screen.
But there is a problem: Android detects clicks when I touch initial button location and not the current.
How can I make Android respect actual location of the button?
fragment_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="#+id/addButton"
android:src="#android:drawable/ic_input_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="plusButtonClick"/>
</RelativeLayout>
MainActivity.java
public class MainActivity extends ActionBarActivity
{
public void plusButtonClick(View v)
{
Toast.makeText(this, "Clicked!", Toast.LENGTH_SHORT).show();
animateButton(R.id.addButton, R.anim.anim_move);
}
private void animateButton(int buttonId, int animationId)
{
View button = findViewById(buttonId);
AnimationSet animationSet = (AnimationSet)AnimationUtils.loadAnimation(this, animationId);
animationSet.setAnimationListener(getStartingButtonsListener(button));
button.setVisibility(View.VISIBLE);
button.startAnimation(animationSet);
}
private Animation.AnimationListener getStartingButtonsListener(final View v)
{
return new Animation.AnimationListener()
{
#Override
public void onAnimationEnd(Animation arg0)
{
v.setVisibility(View.GONE);
}
};
}
}
anim_move.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="true"
android:fillAfter="true"
android:duration="1000">
<translate
android:fromXDelta="0"
android:toXDelta="180"
android:fromYDelta="0"
android:toYDelta="0"/>
</set>

I had a similar problem here : Button moves to different part of screen but can only press it at its initial spot?
The animation is animating the pixels, not the touch zones of a widget.
You need to animate the properties as well : https://developer.android.com/guide/topics/graphics/prop-animation.html

The translate animation doesn't actually move your object, it just moves the image of it. You should reposition your button yourself at the end of the animation by editing its LayoutParams

Use onTouchEvent for your button. Moreover, give this onTouch implementation through java file, but not with the XML layout file. This is far better than using onClick event.
See this : Triggering event when Button is pressed down in Android

How to animate a slide in notification view that pushes the content view down

I have two views on the screen
one sits at the top of the screen and on sits directly below it
I need the green view to slide out the top - and make the blue view take up the entire screen as a result
this is what i am trying to do:
-- the problem is , when the animation is finished, the blue view just "jumps" up - and i want it to ease up with the disappearing green view, how do i do that?
slide_in_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="1000"
android:fromYDelta="-100%"
android:toYDelta="0%" />
</set>
slide_out_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="1000"
android:fromYDelta="0%"
android:toYDelta="-100%" />
</set>
MainActivity.java
slideInAnimation = AnimationUtils.loadAnimation(mActivity, R.anim.slide_in_animation);
slideOutAnimation = AnimationUtils.loadAnimation(mActivity,R.anim.slide_out_animation);
slideInAnimation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
mGreenView.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationEnd(Animation animation) {
}
});
slideOutAnimation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
mGreenView.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
// To change body of implemented methods use File | Settings
// | File Templates.
}
});

This worked for me
First you must import this library: http://nineoldandroids.com/
The import is done by importing existing android project into your workspace, afterwards right click your Poject -> Properties -> Android. Here you will see a library section, click the Add button and add the nineoldandroids library.
First off, here is the layout xml used for this to work:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/parentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:divider="#android:color/transparent"
android:fastScrollEnabled="false"
android:listSelector="#android:color/transparent"
android:scrollbars="vertical"
android:smoothScrollbar="true" />
<View
android:id="#+id/greenView"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#ff00ff00"
android:alpha="0"/>
</FrameLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/animate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="clickHandler"
android:text="animate" />
<Button
android:id="#+id/close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="clickHandler"
android:text="close" />
</LinearLayout>
Notice: Both the ListView and the green View could be layouts of any types with any kind of content.
And next a proof of concept Activity.
public class TestActivity extends Activity {
private View greenView;
private ListView listView;
private int greenHeight;
private boolean isShowingBox;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test);
// The animated view
greenView = (View)findViewById(R.id.greenView);
listView = (ListView)findViewById(R.id.listView1);
// Instanciating an array list (you don't need to do this, you already have yours)
ArrayList<String> your_array_list = new ArrayList<String>();
your_array_list.add("1");
your_array_list.add("2");
your_array_list.add("3");
your_array_list.add("4");
your_array_list.add("5");
your_array_list.add("6");
your_array_list.add("7");
your_array_list.add("8");
your_array_list.add("9");
your_array_list.add("10");
your_array_list.add("11");
your_array_list.add("12");
your_array_list.add("13");
your_array_list.add("14");
your_array_list.add("15");
// This is the array adapter, it takes the context of the activity as a first // parameter, the type of list view as a second parameter and your array as a third parameter
ArrayAdapter<String> arrayAdapter =
new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, your_array_list);
listView.setAdapter(arrayAdapter);
final LinearLayout layout = (LinearLayout)findViewById(R.id.parentLayout);
final ViewTreeObserver vto = layout.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT < 16) {
layout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
layout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
greenHeight = greenView.getHeight();
}
});
}
public void clickHandler(View v) {
if (isShowingBox) {
isShowingBox = false;
slideOut(1500, 0);
} else {
isShowingBox = true;
slideIn(1500, 0);
}
}
private void slideIn(int duration, int delay) {
AnimatorSet set = new AnimatorSet();
set.playTogether(
// animate from off-screen in to screen
ObjectAnimator.ofFloat(greenView, "translationY", -greenHeight, 0),
ObjectAnimator.ofFloat(listView, "translationY", 0, greenHeight),
ObjectAnimator.ofFloat(greenView, "alpha", 0, 0.25f, 1)
// add other animations if you wish
);
set.setStartDelay(delay);
set.setDuration(duration).start();
}
private void slideOut(int duration, int delay) {
AnimatorSet set = new AnimatorSet();
set.playTogether(
// animate from on-screen and out
ObjectAnimator.ofFloat(greenView, "translationY", 0, -greenHeight),
ObjectAnimator.ofFloat(listView, "translationY", greenHeight, 0),
ObjectAnimator.ofFloat(greenView, "alpha", 1, 1, 1)
// add other animations if you wish
);
set.setStartDelay(delay);
set.setDuration(duration).start();
}
}
Important note: Remember to import the AnimatorSet and ObjectAnimator from nineoldandroids in your class and not the Android SDK ones!!!

One potential solution that makes a nice and fluid exit is using the weight attribute of LinearLayout with a ValueAnimator. Assuming you're using LinearLayout as your parent view for your green and blue blocks, your code would look something like this.
layout.xml
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<!--Let's assume this is the view you wish you disappear-->
<View
android:id="#+id/view1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"/>
<View
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"/>
</LinearLayout>
Now with this, in your code you can use the ValueAnimator as follows:
public class MainActivity extends Activity implements AnimatorUpdateListener
{
View view1;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
view1 = (View)findViewById(R.id.view1);
}
public void someAction()
{
//This is the important part, because it is FROM the first value TO
//the second. Notice that it must be a float type
ValueAnimator anim = ValueAnimator.ofFloat(1f, 0f);
anim.setDuration(200);
anim.addUpdateListener(this);
anim.start();
}
#Override
public void onAnimationUpdate(ValueAnimator animation)
{
view1.setLayoutParams(new LinearLayout.LayoutParams(0,
LayoutParams.MATCH_PARENT,
(Float) animation.getAnimatedValue()));
}
}
The ValueAnimator will automatically calculate the increments and execute them to get the smooth transition you want with the added benefit of keeping your view running.
You may also need to handle some strange UI occurrences as a result of shrinking the view (i.e., TextViews may act funny on the transition out), but I didn't run into too much trouble patching those up and keeping it neat.
Good luck! Hope this helps.

Use following code.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:interpolator="#android:anim/linear_interpolator"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>

android imageview with multiple image fade in fade out animation

its my first time to ask question here...
im hoping that somebody could help me....
i want to animate multiple images that animates as fade in and fade out. i was able to animate one imageview but what i need is once the first imageview fade out, the second imageview must fade in and so on...
it should loop once the application is opened. thanks
here is how i call the animation in my java onCreate(),
final ImageView image = (ImageView)findViewById(R.id.bsc);
final Animation animationFadeIn = AnimationUtils.loadAnimation(this, R.anim.fadein);
image.startAnimation(animationFadeIn);
final Animation animationFadeOut = AnimationUtils.loadAnimation(this, R.anim.fadeout);
image.startAnimation(animationFadeOut);
fade in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<alpha
android:fromAlpha="0.1"
android:toAlpha="1.0"
android:duration="2000"
/>
</set>
fade out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.1"
android:duration="2000"
/>
</set>

Try using AnimationListener.
final ImageView image = (ImageView)findViewById(R.id.bsc);
final Animation animationFadeIn = AnimationUtils.loadAnimation(this, R.anim.fadein);
final Animation animationFadeOut = AnimationUtils.loadAnimation(this, R.anim.fadeout);
AnimationListener animListener = new AnimationListener(){
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
image.setImageResource(R.drawable.hsc);
image.startAnimation(animationFadeIn);
}
};
image.startAnimation(animationFadeOut);
animationFadeOut.setAnimationListener(animListener);
If you want to loop, then put another listener on animationFadeIn also. This will again start animationFadeOut. Pick images from an array and display.

In your Activity.xml layout create a new ImageView, please note I'm not using the attribute android:src="#drawable/...." in this ImageView , like this
<ImageView
android:id="#+id/uno"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
/>
So you will have two imageViews in your Activity.xml finally
1.-Your first image (the original in your code)
<ImageView
android:id="#+id/bsc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/your_first_image/>
2.-the new image without android:src attribute
<ImageView
android:id="#+id/uno"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
/>
In your activity class onCreate() define the new image you want to use, of course you need to save this image in your drawable folder, and then set the image with its drawable using setImageResource() method, the code will be something like this;
ImageView nueva = null;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//....your code...
nueva = (ImageView) findViewById(R.id.uno);
//Here set the new image
nueva.setImageResource(R.drawable.your_new_image);
}
Now just need to add the animations, in onResume() method for example:
#Override
protected void onResume() {
super.onResume();
//the imagen you are using in your code
image.startAnimation(animationFadeOut);
//the new image fadein
nueva.startAnimation(animationFadeIn);
}

Delays within the Animation (TranslateAnimation)

Is there a way to have the Animation pause for a half a second?
I am trying to make an infinite animation using the TranslateAnimation API. So, I use the RepeatCount as Infinite. I also noticed that there's a setStartOffset(...) method that covers the case when I'd like to have a delay in starting the animation. However, I can't find a way to have a delay before each 'restart'. Since animation is gonna happen infinite amount of times, every time the animation restarts I need to put a delay in.
Any ideas?
Thanks!!

Here is an example:
First the layout (main.xml) with an image we would like to animate:
<?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"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Next one is the animation. Placed in res/anim and is called anim_img.xml. The file contains the translation animation with android:startOffset="500" (in millisec). This will set the offset, which is used every time animation starts:
<?xml version="1.0" encoding="utf-8"?>
<set>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXDelta="0%"
android:fromYDelta="0%"
android:toXDelta="0%"
android:toYDelta="100%"
android:zAdjustment="top"
android:repeatCount="infinite"
android:startOffset="500"/>
</set>
And last but not least - the activity. Which starts the animation:
public class StackOverflowActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView iv_icon = (ImageView) findViewById(R.id.imageView1);
Animation a = AnimationUtils.loadAnimation(this, R.anim.anim_img);
a.setFillAfter(true);
a.reset();
iv_icon.startAnimation(a);
}
}

To achieve a pause of x milliseconds between each restart:
myAnimation.setAnimationListener(new AnimationListener(){
#Override
public void onAnimationStart(Animation arg0) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
myAnimation.setStartOffset(x);
}
});

myanimation.setStartDelay(int);

An easy way to make GONE animation work

I have a custom search panel, which is a part of main layout. Most of time the panel is hidden. I would like to add appearing/disappearing animation to the panel. Here is the simplified layout excerpt:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/layoutSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone" >
<EditText
android:id="#+id/editSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<<Other inner views to be animated>>
</RelativeLayout>
<<Other views, which should not be affected by the animation>>
</LinearLayout>
Try 1: I added animation resources and attach them to the #id/layoutSearch with this line in XML:
android:layoutAnimation="#anim/search_in_layout"
anim/search_in.xml:
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/overshoot_interpolator"
android:fromYDelta="-100%p"
android:toYDelta="0"
android:duration="#android:integer/config_longAnimTime" />
anim/search_in_layout.xml:
<layoutAnimation
xmlns:android="http://schemas.android.com/apk/res/android"
android:animation="#anim/search_in" />
The animation works fine, but only for the panel appearing. The panel disappears in a moment without animation when I hide it with:
mSearchLayout.setVisibility(View.GONE);
Try 2: I guess the above solution does not work as the animation destination parameters match the current panel position. OK, I created two more animation resources: anim/search_out.xml and anim/search_out_layout.xml. The only differences are exchanged "fromYDelta" and "toYDelta" values and updated "android:animation" value. Then I load the resources in the code and set them to the #id/layoutSearch like this:
LayoutAnimationController controller =
AnimationUtils.loadLayoutAnimation(this, R.anim.search_out_layout);
mSearchLayout.setLayoutAnimation(controller);
The "out" animation triggered on calling of setLayoutAnimation(). After the animation the search panel returns to it original position on the screen it had before "out" animation. If I try to call mSearchLayout.setVisibility(View.GONE) just after setLayoutAnimation(), I see no animation, the panel disappears at once.
Try 3: I guess I need to create the animation in the code and then set a listener on it. Then I should call mSearchLayout.setVisibility(View.GONE) in the onAnimationEnd() handler to hide the panel after the animation played. I did not tried this yet. I think it's over complicated.
I guess I missed something important. Is there a way to implement GONE animation a bit easy?

To follow on to the answers above : here is how I solved this problem.
Please note that setting setFillBefore and setFillAfter in your animation will lead to the following bug! Issue 5272: View with visibility View.GONE still generates touch events
http://code.google.com/p/android/issues/detail?id=5272
File : MyWebViewActivity.java
private View mBottomOverlay;
private View mTopOverlay;
private boolean mControlsOverlayVisible;
private Animation mSlideBottomUpAnimation;
private Animation mSlideBottomDownAnimation;
private Animation mSlideTopDownAnimation;
private Animation mSlideTopUpAnimation;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.reader_layout);
// load the overlay resources
mTopOverlay = findViewById(R.id.reader_overlay_top_toolbar);
mBottomOverlay = findViewById(R.id.reader_overlay_bottom_toolbar);
initAnimations();
}
private void initAnimations() {
final AnimationListener makeTopGone = new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {
Log.d(TAG, "onAnimationEnd - makeTopGone");
mTopOverlay.setVisibility(View.GONE);
}
};
final AnimationListener makeBottomGone = new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
Log.d(TAG, "onAnimationEnd - makeBottomGone");
mBottomOverlay.setVisibility(View.GONE);
}
};
final AnimationListener makeTopVisible = new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
Log.d(TAG, "onAnimationStart - makeTopVisible");
mTopOverlay.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {}
};
final AnimationListener makeBottomVisible = new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
Log.d(TAG, "onAnimationStart - makeBottomVisible");
mBottomOverlay.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {}
};
mSlideTopUpAnimation = AnimationUtils.loadAnimation(this, R.anim.slide_top_up);
mSlideBottomDownAnimation = AnimationUtils.loadAnimation(this, R.anim.slide_bottom_down);
mSlideTopUpAnimation.setAnimationListener(makeTopGone);
mSlideBottomDownAnimation.setAnimationListener(makeBottomGone);
mSlideTopDownAnimation = AnimationUtils.loadAnimation(this, R.anim.slide_top_down);
mSlideBottomUpAnimation = AnimationUtils.loadAnimation(this, R.anim.slide_bottom_up);
mSlideTopDownAnimation.setAnimationListener(makeTopVisible);
mSlideBottomUpAnimation.setAnimationListener(makeBottomVisible);
}
private void hideControlOverlays() {
Log.d(TAG, "hideControlOverlays");
mTopOverlay.startAnimation(mSlideTopUpAnimation);
mBottomOverlay.startAnimation(mSlideBottomDownAnimation);
mControlsOverlayVisible = false;
}
private void showControlOverlays() {
Log.d(TAG, "showControlOverlays");
mTopOverlay.startAnimation(mSlideTopDownAnimation);
mBottomOverlay.startAnimation(mSlideBottomUpAnimation);
mControlsOverlayVisible = true;
}
File : /res/layout/reader_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/reader_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<WebView
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/reader_overlay_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/reader_overlay_top_toolbar"
android:layout_width="fill_parent"
android:layout_height="140dp"
android:background="#80000000" >
<include layout="#layout/toolbar_top" />
</LinearLayout>
<LinearLayout
android:id="#+id/reader_overlay_bottom_toolbar"
android:layout_width="fill_parent"
android:layout_height="140dp"
android:layout_gravity="bottom"
android:background="#80000000"
android:orientation="horizontal" >
<include layout="#layout/toolbar_bottom_left" />
</LinearLayout>
</FrameLayout>
</FrameLayout>
File : /res/anim/slide_bottom_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillEnabled="true"
android:interpolator="#android:anim/accelerate_interpolator" >
<translate
android:duration="#android:integer/config_shortAnimTime"
android:fromYDelta="0"
android:toYDelta="100%" />
</set>
File : /res/anim/slide_bottom_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_interpolator" >
<translate
android:duration="#android:integer/config_shortAnimTime"
android:fromYDelta="100%"
android:toYDelta="0" />
</set>
File : /res/anim/slide_top_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_interpolator" >
<translate
android:duration="#android:integer/config_shortAnimTime"
android:fromYDelta="-100%"
android:toYDelta="0" />
</set>
File : /res/anim/slide_top_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillEnabled="true"
android:interpolator="#android:anim/accelerate_interpolator" >
<translate
android:duration="#android:integer/config_shortAnimTime"
android:fromYDelta="0"
android:toYDelta="-100%" />
</set>

Try 3: I guess I need to create the animation in the code and then set a listener on it. Then I should call mSearchLayout.setVisibility(View.GONE) in the onAnimationEnd() handler to hide the panel after the animation played. I did not tried this yet. I think it's over complicated.
That's what you should do and actually that's not hard to achieve.
Sample code:
public class YourClass extends Foo implements AnimationListener {
//...
#Override
public void onAnimationEnd(Animation a) {
// Do stuff.
}
#Override
public void onAnimationRepeat(Animation a) {
}
#Override
public void onAnimationStart(Animation a) {
}
}

you need to call setFillAfter() of Animation Class to hold the animation after playing.
RelativeLayout layout = (RelativeLayout) findViewById(R.id.layoutSearch);
Animation a = AnimationUtils.loadAnimation(this, R.anim.push_down);
a=setFillAfter(true);
layout.setLayoutAnimation(new LayoutAnimationController(a));
layout.startLayoutAnimation();

Setting a View to GONE effectively removes it from the layout. Instead you should set it to INVISIBLE, and then GONE after the animation has completed if you need to.