Android show hide a view using an animation

Question

I ve been looking through many google results   questions on here to determine how to show hide a view via a vertical animation  but I can t seem to find one that s exactly right or not too vague   I have a layout  undo bar  that s below another layout and above multiple other widgets  this undo bar should vertically slide open and slide closed  depending on the circumstances   Currently all I do right now is set the view to be visible or gone

User · Answer

First of all get the height of the view yo want to saw and make a boolean to save if the view is showing:

int heigth=0;
boolean showing=false;
LinearLayout layout = (LinearLayout) view.findViewById(R.id.layout);

        proDetailsLL.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

            @Override
            public void onGlobalLayout() {
                // gets called after layout has been done but before display
                // so we can get the height then hide the view

                proHeight = proDetailsLL.getHeight(); // Ahaha!  Gotcha

                proDetailsLL.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                proDetailsLL.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, 0));
            }
        });

Then call the method for showing hide the view, and change the value of the boolean:

slideInOutAnimation(showing, heigth, layout);
proShowing = !proShowing;

The method:

/**
     * Method to slide in out the layout
     * 
     * @param isShowing
     *            if the layout is showing
     * @param height
     *            the height to slide
     * @param slideLL
     *            the container to show
     */
private void slideInOutAnimation(boolean isShowing, int height, final LinearLayout slideLL, final ImageView arroIV) {

        if (!isShowing) {
        Animation animIn = new Animation() {
        protected void applyTransformation(float interpolatedTime, Transformation t) {
                    super.applyTransformation(interpolatedTime, t);
        // Do relevant calculations here using the interpolatedTime that runs from 0 to 1
        slideLL.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, (int) (heigth * interpolatedTime)));

                }
            };
            animIn.setDuration(500);
            slideLL.startAnimation(animIn);
        } else {

            Animation animOut = new Animation() {
                protected void applyTransformation(float interpolatedTime, Transformation t) {
                    super.applyTransformation(interpolatedTime, t);
                    // Do relevant calculations here using the interpolatedTime that runs from 0 to 1


                        slideLL.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,
                                (int) (heigth * (1 - interpolatedTime))));

                }
            };
            animOut.setDuration(500);
            slideLL.startAnimation(animOut);


        }

    }

User · Answer

I created an extension for RelativeLayout that shows hides Layouts with animations  It can extend any kind of View to gain these features   import android content Context  import android util AttributeSet  import android view View  import android view animation Animation  import android view animation AnimationSet  import android view animation AnimationUtils  import android widget RelativeLayout   public class AnimatingRelativeLayout extends RelativeLayout       Context context      Animation inAnimation      Animation outAnimation       public AnimatingRelativeLayout Context context                super context           this context   context          initAnimations                public AnimatingRelativeLayout Context context  AttributeSet attrs                super context  attrs           this context   context          initAnimations               public AnimatingRelativeLayout Context context  AttributeSet attrs  int defStyle                super context  attrs  defStyle           this context   context          initAnimations               private void initAnimations                 inAnimation    AnimationSet  AnimationUtils loadAnimation context  R anim in animation           outAnimation    Animation  AnimationUtils loadAnimation context  R anim out animation              public void show                 if  isVisible    return          show true              public void show boolean withAnimation                if  withAnimation  this startAnimation inAnimation           this setVisibility View VISIBLE              public void hide                 if   isVisible    return          hide true              public void hide boolean withAnimation                if  withAnimation  this startAnimation outAnimation           this setVisibility View GONE              public boolean isVisible                 return  this getVisibility      View VISIBLE              public void overrideDefaultInAnimation Animation inAnimation                this inAnimation   inAnimation             public void overrideDefaultOutAnimation Animation outAnimation                this outAnimation   outAnimation            You can override the original Animations using overrideDefaultInAnimation and overrideDefaultOutAnimation  My original Animations were fadeIn Out  I am adding XML animation files for Translating in out of the screen  Translate to top and from top   in animation xml        lt  xml version  1 0  encoding  utf-8   gt   lt translate xmlns android  http   schemas android com apk res android      android duration  600      android fillAfter  false      android fromXDelta  0      android fromYDelta  -100 p      android toXDelta  0      android toYDelta  0    gt    out animation xml       lt  xml version  1 0  encoding  utf-8   gt   lt translate xmlns android  http   schemas android com apk res android      android duration  600      android fillAfter  false      android fromXDelta  0      android fromYDelta  0      android toXDelta  0      android toYDelta  -100 p    gt

User · Answer

ViewAnimator   In XML      lt ViewAnimator     android id    id animator message      android layout width  match parent      android layout height  match parent      android inAnimation   anim slide down text      android outAnimation   anim slide up text  gt        lt TextView         android id    id text message authentication          android layout width  match parent          android layout height  wrap content          android gravity  center horizontal          android text  message error authentication    gt        lt TextView         android id    id text message authentication connection          android layout width  match parent          android layout height  wrap content          android gravity  center horizontal          android text  message error authentication connection    gt        lt TextView         android id    id text message authentication empty          android layout width  match parent          android layout height  wrap content          android gravity  center horizontal          android text  message error authentication field empty    gt    lt  ViewAnimator gt    Functions   public void show int viewId        ViewAnimator animator    ViewAnimator  findView animatorId       View view   findViewById viewId        if  animator getDisplayedChild      animator indexOfChild view             animator setDisplayedChild animator indexOfChild view                 private void showAuthenticationConnectionFailureMessage         show R id text message authentication connection

User · Answer

Set the attribute      android animateLayoutChanges  true  inside the parent layout     Put the view in a layout if its not and set android animateLayoutChanges  true  for that layout   NOTE  This works only from API Level 11   Android 3 0

User · Answer

This can reasonably be achieved in a single line statement in API 12 and above  Below is an example where v is the view you wish to animate   v animate   translationXBy -1000  start      This will slide the View in question off to the left by 1000px  To slide the view back onto the UI we can simply do the following   v animate   translationXBy 1000  start      I hope someone finds this useful

User · Answer

If you only want to animate the height of a view  from say 0 to a certain number  you could implement your own animation   final View v   getTheViewToAnimateHere    Animation anim new Animation        protected void applyTransformation float interpolatedTime  Transformation t            super applyTransformation interpolatedTime  t              Do relevant calculations here using the interpolatedTime that runs from 0 to 1         v setLayoutParams new LinearLayout LayoutParams LayoutParams FILL PARENT   int  30 interpolatedTime             anim setDuration 500   v startAnimation anim

User · Answer

I have used this two function to hide and show view with transition animation smoothly    TargetApi Build VERSION CODES HONEYCOMB      public void expand final View v  int duration  int targetHeight  final int position             int prevHeight   v getHeight             v setVisibility View VISIBLE           ValueAnimator valueAnimator   ValueAnimator ofInt 0  targetHeight           valueAnimator addUpdateListener new ValueAnimator AnimatorUpdateListener                  Override             public void onAnimationUpdate ValueAnimator animation                    v getLayoutParams   height    int  animation getAnimatedValue                    v requestLayout                                      valueAnimator setInterpolator new DecelerateInterpolator             valueAnimator setDuration duration           valueAnimator start            valueAnimator addListener new AnimatorListenerAdapter                   Override             public void onAnimationEnd Animator animation                    v clearAnimation                                           TargetApi Build VERSION CODES HONEYCOMB      public void collapse final View v  int duration  int targetHeight  final int position            if  position     data size   - 1                 return                    int prevHeight   v getHeight            ValueAnimator valueAnimator   ValueAnimator ofInt prevHeight  targetHeight           valueAnimator setInterpolator new DecelerateInterpolator             valueAnimator addUpdateListener new ValueAnimator AnimatorUpdateListener                  Override             public void onAnimationUpdate ValueAnimator animation                    v getLayoutParams   height    int  animation getAnimatedValue                    v requestLayout                                      valueAnimator setInterpolator new DecelerateInterpolator             valueAnimator setDuration duration           valueAnimator start            valueAnimator addListener new AnimatorListenerAdapter                  Override             public void onAnimationEnd Animator animation                    animBoolArray put position  false                   v clearAnimation

User · Answer

Try to use TranslateAnimation class  which creates the animation for position changes  Try reading this for help - http   developer android com reference android view animation TranslateAnimation html  Update  Here s the example for this  If you have the height of your view as 50 and in the hide mode you want to show only 10 px  The sample code would be -   TranslateAnimation anim new TranslateAnimation 0 0 -40 0   anim setFillAfter true   view setAnimation anim     PS  There are lot s or other methods there to help you use the animation according to your need  Also have a look at the RelativeLayout LayoutParams if you want to completely customize the code  however using the TranslateAnimation is easier to use   EDIT -Complex version using LayoutParams  RelativeLayout relParam new RelativeLayout LayoutParam RelativeLayout LayoutParam FILL PARENT RelativeLayout LayoutParam WRAP CONTENT     you can give hard coded width and height here in  width height  format  relParam topMargin -50    any number that work Set it to 0  when you want to show it  view setLayoutParams relparam     This example code assumes you are putting your view in RelativeLayout  if not change the name of Layout  however other layout might not work  If you want to give an animation effect on them  reduce or increase the topMargin slowly  You can consider using Thread sleep   there too

User · Answer

Try this   view animate        translationY 0       alpha 0 0f       setListener new AnimatorListenerAdapter              Override         public void onAnimationEnd Animator animation                super onAnimationEnd animation               view setVisibility View GONE

[android] Android: show/hide a view using an animation

Examples related to android

Examples related to android-layout

Examples related to android-animation

Examples related to android-relativelayout