Show and hide a View with a slide up down animation

Question

I have a LinearLayout that I want to show or hide with an Animation that pushes the layout upwards or downwards whenever I change its visibility   I ve seen a few samples out there but none of them suit my needs   I have created two xml files for the animations but I do not know how to start them when I change the visibility of a LinearLayout

User · Answer

One of the simple ways   containerView setLayoutTransition LayoutTransition    containerView layoutTransition enableTransitionType LayoutTransition CHANGING

User · Answer

Here is my solution  Just get a reference to your view and call this method   public static void animateViewFromBottomToTop final View view        view getViewTreeObserver   addOnGlobalLayoutListener new ViewTreeObserver OnGlobalLayoutListener               Override         public void onGlobalLayout                  view getViewTreeObserver   removeOnGlobalLayoutListener this                final int TRANSLATION Y   view getHeight                view setTranslationY TRANSLATION Y               view setVisibility View GONE               view animate                    translationYBy -TRANSLATION Y                   setDuration 500                   setStartDelay 200                   setListener new AnimatorListenerAdapter                           Override                     public void onAnimationStart final Animator animation                             view setVisibility View VISIBLE                                                             start                          No need to do anything else

User · Answer

I had a corner case where my view s height was still zero so     import android animation Animator  import android animation AnimatorListenerAdapter  import android view View   public final class AnimationUtils      public static void slideDown final View view            view animate                    translationY view getHeight                     alpha 0 f                   setListener new AnimatorListenerAdapter                          Override                     public void onAnimationEnd Animator animation                               superfluous restoration                         view setVisibility View GONE                           view setAlpha 1 f                           view setTranslationY 0 f                                                        public static void slideUp final View view            view setVisibility View VISIBLE           view setAlpha 0 f            if  view getHeight    gt  0                slideUpNow view             else                  wait till height is measured             view post new Runnable                      Override                 public void run                         slideUpNow view                                                          private static void slideUpNow final View view            view setTranslationY view getHeight             view animate                    translationY 0                   alpha 1 f                   setListener new AnimatorListenerAdapter                          Override                     public void onAnimationEnd Animator animation                            view setVisibility View VISIBLE                           view setAlpha 1 f

User · Answer

Using ObjectAnimator  private fun slideDown view  View        val height   view height     ObjectAnimator ofFloat view   translationY   0 toFloat    height toFloat    apply           duration   1000         start            private fun slideUp view  View        val height   view height     ObjectAnimator ofFloat view   translationY   height toFloat   0 toFloat    apply           duration   1000         start

User · Answer

I was having troubles understanding an applying the accepted answer  I needed a little more context  Now that I have figured it out  here is a full example     MainActivity java  public class MainActivity extends AppCompatActivity        Button myButton      View myView      boolean isUp        Override     protected void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout activity main            myView   findViewById R id my view           myButton   findViewById R id my button               initialize as invisible  could also do in xml          myView setVisibility View INVISIBLE           myButton setText  Slide up            isUp   false                slide the view from below itself to the current position     public void slideUp View view           view setVisibility View VISIBLE           TranslateAnimation animate   new TranslateAnimation                  0                     fromXDelta                 0                     toXDelta                 view getHeight        fromYDelta                 0                     toYDelta         animate setDuration 500           animate setFillAfter true           view startAnimation animate                 slide the view from its current position to below itself     public void slideDown View view           TranslateAnimation animate   new TranslateAnimation                  0                     fromXDelta                 0                     toXDelta                 0                     fromYDelta                 view getHeight        toYDelta         animate setDuration 500           animate setFillAfter true           view startAnimation animate              public void onSlideViewButtonClick View view            if  isUp                slideDown myView               myButton setText  Slide up              else               slideUp myView               myButton setText  Slide down                      isUp    isUp            activity mail xml   lt  xml version  1 0  encoding  utf-8   gt   lt 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      tools context  com example slideview MainActivity  gt        lt Button         android id    id my button          android layout centerHorizontal  true          android layout marginTop  100dp          android onClick  onSlideViewButtonClick          android layout width  150dp          android layout height  wrap content   gt        lt LinearLayout         android id    id my view          android background   a6e1aa          android orientation  vertical          android layout alignParentBottom  true          android layout width  match parent          android layout height  200dp  gt        lt  LinearLayout gt    lt  RelativeLayout gt    Notes   Thanks to this article for pointing me in the right direction  It was more helpful than the other answers on this page  If you want to start with the view on screen  then don t initialize it as INVISIBLE  Since we are animating it completely off screen  there is no need to set it back to INVISIBLE  If you are not animating completely off screen  though  then you can add an alpha animation and set the visibility with an AnimatorListenerAdapter  Property Animation docs

User · Answer

Suragch s answer in Kotlin  This worked for me   class MainActivity   AppCompatActivity      var isUp  Boolean   false  override fun onCreate savedInstanceState  Bundle         super onCreate savedInstanceState      setContentView R layout activity main       var myView  View   findViewById R id my view      var myButton  Button   findViewById R id my button         Initialize as invisible     myView visibility   View INVISIBLE     myButton setText  Slide up        isUp   false      fun View slideUp duration  Int   500       visibility   View VISIBLE     val animate   TranslateAnimation 0f  0f  this height toFloat    0f      animate duration   duration toLong       animate fillAfter   true     this startAnimation animate     fun View slideDown duration  Int   500        visibility   View VISIBLE     val animate   TranslateAnimation 0f  0f  0f  this height toFloat        animate duration   duration toLong       animate fillAfter   true     this startAnimation animate     fun onSlideViewButtonClick view  View       if isUp           my view slideDown           my button setText  Slide Up              else          my view slideUp           my button setText  Slide Down             isUp    isUp

User · Answer

With Kotlin extensions you can use this    enum class SlideDirection      UP      DOWN      LEFT      RIGHT    enum class SlideType      SHOW      HIDE    fun View slideAnimation direction  SlideDirection  type  SlideType  duration  Long   250       val fromX  Float     val toX  Float     val fromY  Float     val toY  Float     val array   IntArray 2      getLocationInWindow array      if  type    SlideType HIDE  amp  amp   direction    SlideDirection RIGHT    direction    SlideDirection DOWN               type    SlideType SHOW  amp  amp   direction    SlideDirection LEFT    direction    SlideDirection UP                val displayMetrics   DisplayMetrics           val windowManager   context getSystemService Context WINDOW SERVICE  as WindowManager         windowManager defaultDisplay getMetrics displayMetrics          val deviceWidth   displayMetrics widthPixels         val deviceHeight   displayMetrics heightPixels         array 0    deviceWidth         array 1    deviceHeight           when  direction            SlideDirection UP - gt                fromX   0f             toX   0f             fromY   if type    SlideType HIDE  0f else  array 1    height  toFloat               toY   if type    SlideType HIDE  -1f    array 1    height   else 0f                   SlideDirection DOWN - gt                fromX   0f             toX   0f             fromY   if type    SlideType HIDE  0f else -1f    array 1    height              toY   if type    SlideType HIDE  1f    array 1    height   else 0f                   SlideDirection LEFT - gt                fromX   if type    SlideType HIDE  0f else 1f    array 0    width              toX   if type    SlideType HIDE  -1f    array 0    width  else 0f             fromY   0f             toY   0f                   SlideDirection RIGHT - gt                fromX   if type    SlideType HIDE  0f else -1f    array 0    width              toX   if type    SlideType HIDE  1f    array 0    width  else 0f             fromY   0f             toY   0f                     val animate   TranslateAnimation          fromX          toX          fromY          toY           animate duration   duration     animate setAnimationListener object  Animation AnimationListener          override fun onAnimationRepeat animation  Animation                         override fun onAnimationEnd animation  Animation                 if type    SlideType HIDE                   visibility   View INVISIBLE                                  override fun onAnimationStart animation  Animation                 visibility   View VISIBLE                       startAnimation animate      Example for the extension   view slideAnimation SlideDirection UP  SlideType HIDE   to make it disappear through top of the screen view slideAnimation SlideDirection DOWN  SlideType SHOW   to make it reappear from top of the screen  view slideAnimation SlideDirection DOWN  SlideType HIDE   to make it disappear through bottom of the screen view slideAnimation SlideDirection UP  SlideType SHOW   to make it reappear from bottom of the screen

User · Answer

Use this class   public class ExpandCollapseExtention     public static void expand View view        view setVisibility View VISIBLE        final int widthSpec   View MeasureSpec makeMeasureSpec 0  View MeasureSpec UNSPECIFIED       final int heightSpec   View MeasureSpec makeMeasureSpec 0  View MeasureSpec UNSPECIFIED       view measure widthSpec  heightSpec        ValueAnimator mAnimator   slideAnimator view  0  view getMeasuredHeight         mAnimator start        public static void collapse final View view        int finalHeight   view getHeight         ValueAnimator mAnimator   slideAnimator view  finalHeight  0        mAnimator addListener new Animator AnimatorListener               Override         public void onAnimationEnd Animator animator                               view setVisibility View GONE                        Override         public void onAnimationStart Animator animation                          Override         public void onAnimationCancel Animator animation                          Override         public void onAnimationRepeat Animator animation                           mAnimator start        private static ValueAnimator slideAnimator final View v  int start  int end         ValueAnimator animator   ValueAnimator ofInt start  end        animator addUpdateListener new ValueAnimator AnimatorUpdateListener               Override         public void onAnimationUpdate ValueAnimator valueAnimator                 int value    Integer  valueAnimator getAnimatedValue                ViewGroup LayoutParams layoutParams   v getLayoutParams                layoutParams height   value              v setLayoutParams layoutParams                         return animator

User · Answer

you can slide up and down any view or layout by using bellow code in android app  boolean isClicked false  LinearLayout mLayoutTab    LinearLayout findViewById R id linearlayout            if isClicked                       isClicked   false                      mLayoutTab animate                        translationYBy 120                       translationY 0                            setDuration getResources   getInteger android R integer config mediumAnimTime              else                  isClicked   true                  mLayoutTab animate                    translationYBy 0                   translationY 120                   setDuration getResources   getInteger android R integer config mediumAnimTime

User · Answer

With the new animation API that was introduced in Android 3 0  Honeycomb  it is very simple to create such animations   Sliding a View down by a distance   view animate   translationY distance     You can later slide the View back to its original position like this   view animate   translationY 0       You can also easily combine multiple animations  The following animation will slide a View down by its height and fade it in at the same time      Prepare the View for the animation view setVisibility View VISIBLE   view setAlpha 0 0f       Start the animation view animate        translationY view getHeight         alpha 1 0f       setListener null     You can then fade the View back out and slide it back to its original position  We also set an AnimatorListener so we can set the visibility of the View back to GONE once the animation is finished   view animate        translationY 0       alpha 0 0f       setListener new AnimatorListenerAdapter              Override         public void onAnimationEnd Animator animation                super onAnimationEnd animation               view setVisibility View GONE

User · Answer

if  filter section getVisibility      View GONE        filter section animate                translationY filter section getHeight    alpha 1 0f               setListener new AnimatorListenerAdapter                      Override                 public void onAnimationStart Animator animation                        super onAnimationStart animation                       filter section setVisibility View VISIBLE                       filter section setAlpha 0 0f                                       else       filter section animate                translationY 0  alpha 0 0f               setListener new AnimatorListenerAdapter                      Override                 public void onAnimationEnd Animator animation                        super onAnimationEnd animation                       filter section setVisibility View GONE

User · Answer

Now visibility change animations should be done via Transition API which available in support  androidx  package  Just call TransitionManager beginDelayedTransition method with Slide transition then change visibility of the view      import androidx transition Slide  import androidx transition Transition  import androidx transition TransitionManager   private void toggle boolean show        View redLayout   findViewById R id redLayout       ViewGroup parent   findViewById R id parent        Transition transition   new Slide Gravity BOTTOM       transition setDuration 600       transition addTarget R id redLayout        TransitionManager beginDelayedTransition parent  transition       redLayout setVisibility show   View VISIBLE   View GONE       activity main xml   lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout xmlns android  http   schemas android com apk res android      android id    id parent      android layout width  match parent      android layout height  match parent      android orientation  vertical  gt        lt Button         android id    id btn          android layout width  wrap content          android layout height  wrap content          android text  play    gt        lt LinearLayout         android id    id redLayout          android layout width  match parent          android layout height  400dp          android background   5f00          android layout alignParentBottom  true    gt   lt  RelativeLayout gt    Check this answer with another default and custom transition examples

User · Answer

Easiest solution  set android animateLayoutChanges  true  on the container holding your views   To put it into some context  If you have a layout like below  all visibility changes to the views in this container will be animated automatically    lt LinearLayout android id    id container      android layout width  match parent      android layout height  match parent      android animateLayoutChanges  true       gt        lt Views which change visibility gt    lt  LinearLayout gt    You can find more details about this on Animating Layout Changes - Android Developer

User · Answer

Here s another way to do for multiple Button In this case ImageView  MainActivity java findViewById R id arrowIV  setOnClickListener new View OnClickListener                  Override             public void onClick View v                     if  strokeWidthIV getAlpha      0f                        findViewById R id arrowIV  animate   rotationBy 180                        strokeWidthIV animate   translationXBy -120   4  alpha 1f                       findViewById R id colorChooseIV  animate   translationXBy -120   3  alpha 1f                       findViewById R id saveIV  animate   translationXBy -120   2  alpha 1f                       findViewById R id clearAllIV  animate   translationXBy -120  alpha 1f                     else                       findViewById R id arrowIV  animate   rotationBy 180                        strokeWidthIV animate   translationXBy 120   4  alpha 0f                       findViewById R id colorChooseIV  animate   translationXBy 120   3  alpha 0f                       findViewById R id saveIV  animate   translationXBy 120   2  alpha 0f                       findViewById R id clearAllIV  animate   translationXBy 120  alpha 0f                                                 activity main xml  lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt androidx constraintlayout widget ConstraintLayout xmlns android  quot http   schemas android com apk res android quot   xmlns app  quot http   schemas android com apk res-auto quot   xmlns tools  quot http   schemas android com tools quot   android layout width  quot match parent quot   android layout height  quot match parent quot   tools context  quot  activity MainActivity quot  gt     lt ImageView      android id  quot   id strokeWidthIV quot       android layout width  quot 48dp quot       android layout height  quot 48dp quot       android layout margin  quot 8dp quot       android alpha  quot 0 quot       android contentDescription  quot Clear All quot       android padding  quot 4dp quot       android scaleType  quot fitXY quot       android src  quot  drawable ic edit quot       app layout constraintEnd toEndOf  quot parent quot       app layout constraintTop toTopOf  quot parent quot       tools ignore  quot HardcodedText quot    gt     lt ImageView      android id  quot   id colorChooseIV quot       android layout width  quot 48dp quot       android layout height  quot 48dp quot       android layout margin  quot 8dp quot       android alpha  quot 0 quot       android contentDescription  quot Clear All quot       android padding  quot 4dp quot       android scaleType  quot fitXY quot       android src  quot  drawable ic palette quot       app layout constraintEnd toEndOf  quot parent quot       app layout constraintTop toTopOf  quot parent quot       tools ignore  quot HardcodedText quot    gt     lt ImageView      android id  quot   id saveIV quot       android layout width  quot 48dp quot       android layout height  quot 48dp quot       android layout margin  quot 8dp quot       android alpha  quot 0 quot       android contentDescription  quot Clear All quot       android padding  quot 4dp quot       android scaleType  quot fitXY quot       android src  quot  drawable ic save quot       app layout constraintEnd toEndOf  quot parent quot       app layout constraintTop toTopOf  quot parent quot       tools ignore  quot HardcodedText quot    gt     lt ImageView      android id  quot   id clearAllIV quot       android layout width  quot 48dp quot       android layout height  quot 48dp quot       android layout margin  quot 8dp quot       android alpha  quot 0 quot       android contentDescription  quot Clear All quot       android padding  quot 4dp quot       android scaleType  quot fitXY quot       android src  quot  drawable ic clear all quot       app layout constraintEnd toEndOf  quot parent quot       app layout constraintTop toTopOf  quot parent quot       tools ignore  quot HardcodedText quot    gt     lt ImageView      android id  quot   id arrowIV quot       android layout width  quot 48dp quot       android layout height  quot 48dp quot       android layout margin  quot 8dp quot       android contentDescription  quot Arrow quot       android padding  quot 4dp quot       android scaleType  quot fitXY quot       android src  quot  drawable ic arrow quot       app layout constraintEnd toEndOf  quot parent quot       app layout constraintTop toTopOf  quot parent quot       tools ignore  quot HardcodedText quot    gt   lt  androidx constraintlayout widget ConstraintLayout gt

User · Answer

Kotlin  Based on Suragch s answer  here is an elegant way using View extension   fun View slideUp duration  Int   500        visibility   View VISIBLE     val animate   TranslateAnimation 0f  0f  this height toFloat    0f      animate duration   duration toLong       animate fillAfter   true     this startAnimation animate     fun View slideDown duration  Int   500        visibility   View VISIBLE     val animate   TranslateAnimation 0f  0f  0f  this height toFloat        animate duration   duration toLong       animate fillAfter   true     this startAnimation animate      And then wherever you want to use it  you just need myView slideUp   or myView slideDown

User · Answer

You can used the simple three lines of code to show the animation       getting the hiding view by animation   mbinding butn setOnClickListener                    val SlideOutLeft   AnimationUtils loadAnimation this  R anim slide out left                  simplelayout visibility   View INVISIBLE                 simplelayout startAnimation SlideOutLeft                    val SlideInRight   AnimationUtils loadAnimation applicationContext  R anim slide in right                  animation1 visibility   View VISIBLE                 animation1 startAnimation SlideInRight                               again unhide the view animation             mbinding buttn setOnClickListener                    val SlideInLeft AnimationUtils loadAnimation this R anim slide in left                    set the layout                simplelayout visibility View VISIBLE                simplelayout startAnimation SlideInLeft                  val SlideOutRight AnimationUtils loadAnimation this R anim slide out right                 animation1 visibility View INVISIBLE                animation1 startAnimation SlideOutRight

User · Answer

You can start the correct Animation when the visibility of the LinearLayout changes by creating a new subclass of LinearLayout and overriding setVisibility   to start the Animations  Consider something like this   public class SimpleViewAnimator extends LinearLayout       private Animation inAnimation      private Animation outAnimation       public SimpleViewAnimator Context context                super context              public void setInAnimation Animation inAnimation                this inAnimation   inAnimation             public void setOutAnimation Animation outAnimation                this outAnimation   outAnimation              Override     public void setVisibility int visibility                if  getVisibility      visibility                        if  visibility    VISIBLE                                if  inAnimation    null  startAnimation inAnimation                             else if   visibility    INVISIBLE      visibility    GONE                                 if  outAnimation    null  startAnimation outAnimation                                    super setVisibility visibility

[android] Show and hide a View with a slide up/down animation

Examples related to android

Examples related to animation

Examples related to android-animation