title: Android animate my Relative Layout from bottom to Top and Top to Bottom using translate animation on image view click
body: <p>I Need to make animate my Relative Layout when click on image view..</p>
  
  <p>1.Moving Relative Layout from Bottom to Top (when clicking him on image view).</p>
  
  <p>2.Moving back from Top to Bottom (when clicking him again on image view).</p>
  
  <p>First when i click on image view it's works fine and Relative Layout move up from bottom to top, but when i click again on image view it's animate from top to bottom, when it's reached to the original position it's hide on my activity..any help and Thanks in advance.</p>
  
  <p>This is my Activity :</p>
  
  <pre><code> public class MainActivity extends Activity {
  
  RelativeLayout rl_footer;
  ImageView iv_header;
  boolean isBottom = true;
  Button btn1;
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      rl_footer = (RelativeLayout) findViewById(R.id.rl_footer);
      iv_header = (ImageView) findViewById(R.id.iv_up_arrow);
      iv_header.setOnClickListener(new OnClickListener() {
  
          @Override
          public void onClick(View v) {
              // TODO Auto-generated method stub
              iv_header.setImageResource(R.drawable.down_arrow);
              // iv_header.setVisibility(View.INVISIBLE);
              // iv_down.setVisibility(View.VISIBLE);
              iv_header.setPadding(0, 10, 0, 0); // substitute parameters for
                                                  // left, top, right, bottom
              rl_footer.setBackgroundResource(R.drawable.up_manu_bar);
              // FooterAnimation();
  
              if (isBottom) {
                  FooterAnimation();
                  isBottom = false;
              } else {
                  iv_header.setImageResource(R.drawable.up_arrow);
                  iv_header.setPadding(0, 0, 0, 10);
                  rl_footer.setBackgroundResource(R.drawable.down_manu_bar1);
                  headerAnimation();
                  isBottom = true;
              }
  
          }
      });
  
  }
  
  public void FooterAnimation() {
      Animation slide = null;
      slide = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f,
              Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
              0.0f, Animation.RELATIVE_TO_SELF, -5.0f);
  
      slide.setDuration(400);
      slide.setFillAfter(true);
      slide.setFillEnabled(true);
      rl_footer.startAnimation(slide);
  
      slide.setAnimationListener(new AnimationListener() {
  
          @Override
          public void onAnimationStart(Animation animation) {
  
          }
  
          @Override
          public void onAnimationRepeat(Animation animation) {
          }
  
          @Override
          public void onAnimationEnd(Animation animation) {
  
              rl_footer.clearAnimation();
  
              if (isBottom) {
                  RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
                          rl_footer.getWidth(), rl_footer.getHeight());
                  lp.setMargins(rl_footer.getWidth(), 0, 0, 0);
                  rl_footer.setLayoutParams(lp);
              } else {
                  RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
                          rl_footer.getWidth(), rl_footer.getHeight());
                  lp.setMargins(0, 0, 0, 0);
                  rl_footer.setLayoutParams(lp);
              }
  
          }
  
      });
  
  }
  
  public void headerAnimation() {
  
      Animation slide = null;
      slide = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f,
              Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
              0.0f, Animation.RELATIVE_TO_SELF, 5.2f);
  
      slide.setDuration(400);
      slide.setFillAfter(true);
      slide.setFillEnabled(true);
      rl_footer.startAnimation(slide);
  
      slide.setAnimationListener(new AnimationListener() {
  
          @Override
          public void onAnimationStart(Animation animation) {
  
          }
  
          @Override
          public void onAnimationRepeat(Animation animation) {
          }
  
          @Override
          public void onAnimationEnd(Animation animation) {
  
              rl_footer.clearAnimation();
  
              if (isBottom) {
                  RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
                          rl_footer.getWidth(), rl_footer.getHeight());
                  lp.setMargins(rl_footer.getWidth(), 0, 0, 0);
                  rl_footer.setLayoutParams(lp);
              } else {
                  RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
                          rl_footer.getWidth(), rl_footer.getHeight());
                  lp.setMargins(0, 0, 0, 0);
                  rl_footer.setLayoutParams(lp);
              }
  
          }
  
      });
  
  }
  
  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
      // Inflate the menu; this adds items to the action bar if it is present.
      getMenuInflater().inflate(R.menu.main, menu);
      return true;
  }
  
   }
  </code></pre>
  
  <p>and my Xml:</p>
  
  <pre><code> &lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/rl_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@drawable/autograph_bg" &gt;
  
  &lt;RelativeLayout
      android:id="@+id/rl_footer"
      android:layout_width="fill_parent"
      android:layout_height="70dp"
      android:layout_alignParentBottom="true"
      android:background="@drawable/down_manu_bar1" &gt;
  
      &lt;ImageView
          android:id="@+id/iv_new_file"
          android:layout_width="25dp"
          android:layout_height="25dp"
          android:layout_alignParentLeft="true"
          android:layout_centerVertical="true"
          android:layout_marginLeft="18dp"
          android:onClick="onNewFileClick"
          android:src="@drawable/file_icon" /&gt;
  
      &lt;TextView
          android:id="@+id/tv_new_file"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignLeft="@+id/iv_new_file"
          android:layout_below="@+id/iv_new_file"
          android:text="New"
          android:textColor="#ffffff" /&gt;
  
      &lt;ImageView
          android:id="@+id/iv_insert"
          android:layout_width="25dp"
          android:layout_height="25dp"
          android:layout_alignTop="@+id/iv_new_file"
          android:layout_marginLeft="30dp"
          android:layout_toRightOf="@+id/iv_new_file"
          android:src="@drawable/insert_icon" /&gt;
  
      &lt;TextView
          android:id="@+id/tv_insert"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignLeft="@+id/iv_insert"
          android:layout_below="@+id/iv_insert"
          android:text="Insert"
          android:textColor="#ffffff" /&gt;
  
      &lt;ImageView
          android:id="@+id/iv_up_arrow"
          android:layout_width="45dp"
          android:layout_height="45dp"
          android:layout_centerHorizontal="true"
          android:layout_centerVertical="true"
          android:paddingBottom="10dp"
          android:src="@drawable/up_arrow" /&gt;
  
      &lt;ImageView
          android:id="@+id/iv_down_arrow"
          android:layout_width="45dp"
          android:layout_height="45dp"
          android:layout_centerHorizontal="true"
          android:layout_centerVertical="true"
          android:background="@drawable/down_arrow"
          android:paddingBottom="10dp"
          android:visibility="gone" /&gt;
  
      &lt;ImageView
          android:id="@+id/iv_save"
          android:layout_width="25dp"
          android:layout_height="25dp"
          android:layout_alignTop="@+id/iv_insert"
          android:layout_marginLeft="30dp"
          android:layout_toRightOf="@+id/iv_up_arrow"
          android:src="@drawable/save" /&gt;
  
      &lt;TextView
          android:id="@+id/tv_save"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignLeft="@+id/iv_save"
          android:layout_alignParentBottom="true"
          android:text="Save"
          android:textColor="#ffffff" /&gt;
  
      &lt;ImageView
          android:id="@+id/iv_settings"
          android:layout_width="25dp"
          android:layout_height="25dp"
          android:layout_alignTop="@+id/iv_save"
          android:layout_marginLeft="27dp"
          android:layout_toRightOf="@+id/tv_save"
          android:paddingTop="2dp"
          android:src="@drawable/icon_settings" /&gt;
  
      &lt;TextView
          android:id="@+id/tv_settings"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentBottom="true"
          android:layout_marginLeft="260dp"
          android:text="Settings"
          android:textColor="#ffffff" /&gt;
   &lt;/RelativeLayout&gt;
  
  &lt;/RelativeLayout&gt;
  </code></pre>