Android Expand collapse animation

Question

Let s say I have a vertical linearLayout with     v1   v2    By default v1 has visibily   GONE  I would like to show v1 with an expand animation and push down v2 at the same time   I tried something like this   Animation a   new Animation         int initialHeight        Override     protected void applyTransformation float interpolatedTime  Transformation t            final int newHeight    int  initialHeight   interpolatedTime           v getLayoutParams   height   newHeight          v requestLayout                Override     public void initialize int width  int height  int parentWidth  int parentHeight            super initialize width  height  parentWidth  parentHeight           initialHeight   height              Override     public boolean willChangeBounds             return true             But with this solution  I have a blink when the animation starts  I think it s caused by v1 displaying full size before the animation is applied   With javascript  this is one line of jQuery  Any simple way to do this with android

User · Answer

If you don t want to expand or collapse all the way - here is a simple HeightAnimation -   import android view View  import android view animation Animation  import android view animation Transformation   public class HeightAnimation extends Animation       protected final int originalHeight      protected final View view      protected float perValue       public HeightAnimation View view  int fromHeight  int toHeight            this view   view          this originalHeight   fromHeight          this perValue    toHeight - fromHeight               Override     protected void applyTransformation float interpolatedTime  Transformation t            view getLayoutParams   height    int   originalHeight   perValue   interpolatedTime           view requestLayout                Override     public boolean willChangeBounds             return true            Usage   HeightAnimation heightAnim   new HeightAnimation view  view getHeight    viewPager getHeight   - otherView getHeight     heightAnim setDuration 1000   view startAnimation heightAnim

User · Answer

Adding to Tom Esterez s excellent answer and Erik B s excellent update to it  I thought I d post my own take  compacting the expand and contract methods into one  This way  you could for example have an action like this     button setOnClickListener v - gt  expandCollapse view          which calls the method below and letting it figure out what to do after each onClick       public static void expandCollapse View view         boolean expand   view getVisibility      View GONE      Interpolator easeInOutQuart   PathInterpolatorCompat create 0 77f  0f  0 175f  1f        view measure          View MeasureSpec makeMeasureSpec   View  view getParent    getWidth    View MeasureSpec EXACTLY           View MeasureSpec makeMeasureSpec 0  View MeasureSpec UNSPECIFIED              int height   view getMeasuredHeight        int duration    int   height view getContext   getResources   getDisplayMetrics   density        Animation animation   new Animation              Override protected void applyTransformation float interpolatedTime  Transformation t                if  expand                    view getLayoutParams   height   1                  view setVisibility View VISIBLE                   if  interpolatedTime    1                        view getLayoutParams   height   ViewGroup LayoutParams WRAP CONTENT                    else                       view getLayoutParams   height    int   height   interpolatedTime                                     view requestLayout                  else                   if  interpolatedTime    1                        view setVisibility View GONE                     else                       view getLayoutParams   height   height -  int   height   interpolatedTime                       view requestLayout                                                       Override public boolean willChangeBounds                 return true                        animation setInterpolator easeInOutQuart       animation setDuration duration       view startAnimation animation

User · Answer

Use ValueAnimator   ValueAnimator expandAnimation   ValueAnimator ofInt mainView getHeight    400   expandAnimation addUpdateListener new ValueAnimator AnimatorUpdateListener          Override     public void onAnimationUpdate final ValueAnimator animation            int height    Integer  animation getAnimatedValue            RelativeLayout LayoutParams lp    LayoutParams  mainView getLayoutParams            lp height   height              expandAnimation setDuration 500   expandAnimation start

User · Answer

You are on the right track   Make sure you have v1 set to have a layout height of zero right before the animation starts   You want to initialize your setup to look like the first frame of the animation before starting the animation

User · Answer

This is a proper working solution  I have tested it   Exapnd   private void expand View v        v setVisibility View VISIBLE        v measure View MeasureSpec makeMeasureSpec PARENT VIEW getWidth    View MeasureSpec EXACTLY               View MeasureSpec makeMeasureSpec 0  View MeasureSpec UNSPECIFIED         final int targetHeight   v getMeasuredHeight         mAnimator   slideAnimator 0  targetHeight       mAnimator setDuration 800       mAnimator start        Collapse   private void collapse View v        int finalHeight   v getHeight         mAnimator   slideAnimator finalHeight  0        mAnimator addListener new Animator AnimatorListener              Override         public void onAnimationStart Animator animator                         Override         public void onAnimationEnd Animator animator                  Height 0  but it set visibility to GONE             llDescp setVisibility View GONE                       Override         public void onAnimationCancel Animator animator                         Override         public void onAnimationRepeat Animator animator                           mAnimator start        Value Animator   private ValueAnimator slideAnimator int start  int end        ValueAnimator mAnimator   ValueAnimator ofInt start  end        mAnimator addUpdateListener new ValueAnimator AnimatorUpdateListener              Override         public void onAnimationUpdate ValueAnimator valueAnimator                  Update Height             int value    Integer  valueAnimator getAnimatedValue                ViewGroup LayoutParams layoutParams   llDescp getLayoutParams                layoutParams height   value              v setLayoutParams layoutParams                         return mAnimator      View v is the view to be animated  PARENT VIEW is the container view containing the view

User · Answer

This was my solution  my ImageView grows from 100  to 200  and return to his original size  using two animation files inside res anim  folder  anim grow xml   lt  xml version  1 0  encoding  utf-8   gt   lt set xmlns android  http   schemas android com apk res android   android interpolator   android anim accelerate interpolator  gt    lt scale   android fromXScale  1 0    android toXScale  2 0    android fromYScale  1 0    android toYScale  2 0    android duration  3000    android pivotX  50     android pivotY  50     android startOffset  2000    gt   lt  set gt    anim shrink xml   lt  xml version  1 0  encoding  utf-8   gt   lt set xmlns android  http   schemas android com apk res android   android interpolator   android anim accelerate interpolator  gt    lt scale   android fromXScale  2 0    android toXScale  1 0    android fromYScale  2 0    android toYScale  1 0    android duration  3000    android pivotX  50     android pivotY  50     android startOffset  2000    gt   lt  set gt    Send an ImageView to my method setAnimationGrowShrink    ImageView img1    ImageView findViewById R id image1   setAnimationGrowShrink img1     setAnimationGrowShrink   method   private void setAnimationGrowShrink final ImageView imgV       final Animation animationEnlarge   AnimationUtils loadAnimation getApplicationContext    R anim anim grow       final Animation animationShrink   AnimationUtils loadAnimation getApplicationContext    R anim anim shrink        imgV startAnimation animationEnlarge        animationEnlarge setAnimationListener new AnimationListener                       Override         public void onAnimationStart Animation animation               Override         public void onAnimationRepeat Animation animation               Override         public void onAnimationEnd Animation animation                imgV startAnimation animationShrink                          animationShrink setAnimationListener new AnimationListener                        Override         public void onAnimationStart Animation animation               Override         public void onAnimationRepeat Animation animation               Override         public void onAnimationEnd Animation animation                imgV startAnimation animationEnlarge

User · Answer

I took  LenaYan  s solution that didn t work properly  to me  because it was transforming the View to a 0 height view before collapsing and or expanding  and made some changes    Now it works great  by taking the View s previous height and start expanding with this size  Collapsing is the same   You can simply copy and paste the code below   public static void expand final View v  int duration  int targetHeight         int prevHeight    v getHeight         v setVisibility View VISIBLE       ValueAnimator valueAnimator   ValueAnimator ofInt prevHeight  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       public static void collapse final View v  int duration  int targetHeight        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        Usage     Expanding the View    expand yourView  2000  200       Collapsing the View         collapse yourView  2000  100     Easy enough   Thanks LenaYan for the initial code

User · Answer

An alternative is to use a scale animation with the following scaling factors for expanding   ScaleAnimation anim   new ScaleAnimation 1  1  0  1     and for collapsing   ScaleAnimation anim   new ScaleAnimation 1  1  1  0

User · Answer

I was trying to do what I believe was a very similar animation and found an elegant solution  This code assumes that you are always going from 0- h or h- 0  h being the maximum height   The three constructor parameters are view   the view to be animated  in my case  a webview   targetHeight   the maximum height of the view  and down   a boolean which specifies the direction  true   expanding  false   collapsing    public class DropDownAnim extends Animation       private final int targetHeight      private final View view      private final boolean down       public DropDownAnim View view  int targetHeight  boolean down            this view   view          this targetHeight   targetHeight          this down   down              Override     protected void applyTransformation float interpolatedTime  Transformation t            int newHeight          if  down                newHeight    int   targetHeight   interpolatedTime             else               newHeight    int   targetHeight    1 - interpolatedTime                      view getLayoutParams   height   newHeight          view requestLayout                Override     public void initialize int width  int height  int parentWidth              int parentHeight            super initialize width  height  parentWidth  parentHeight               Override     public boolean willChangeBounds             return true

User · Answer

I adapted the currently accepted answer by Tom Esterez  which worked but had a choppy and not very smooth animation  My solution basically replaces the Animation with a ValueAnimator  which can be fitted with an Interpolator of your choice to achieve various effects such as overshoot  bounce  accelerate  etc   This solution works great with views that have a dynamic height  i e  using WRAP CONTENT   as it first measures the actual required height and then animates to that height    public static void expand final View v        v measure ViewGroup LayoutParams MATCH PARENT  ViewGroup LayoutParams WRAP CONTENT       final int targetHeight   v getMeasuredHeight            Older versions of android  pre API 21  cancel animations for views with a height of 0      v getLayoutParams   height   1      v setVisibility View VISIBLE        ValueAnimator va   ValueAnimator ofInt 1  targetHeight       va addUpdateListener new ValueAnimator AnimatorUpdateListener             public void onAnimationUpdate ValueAnimator animation                v getLayoutParams   height    Integer  animation getAnimatedValue                v requestLayout                          va addListener new Animator AnimatorListener              Override         public void onAnimationEnd Animator animation                v getLayoutParams   height   ViewGroup LayoutParams WRAP CONTENT                      Override public void onAnimationStart Animator animation              Override public void onAnimationCancel Animator animation              Override public void onAnimationRepeat Animator animation                 va setDuration 300       va setInterpolator new OvershootInterpolator         va start       public static void collapse final View v        final int initialHeight   v getMeasuredHeight         ValueAnimator va   ValueAnimator ofInt initialHeight  0       va addUpdateListener new ValueAnimator AnimatorUpdateListener             public void onAnimationUpdate ValueAnimator animation                v getLayoutParams   height    Integer  animation getAnimatedValue                v requestLayout                          va addListener new Animator AnimatorListener              Override         public void onAnimationEnd Animator animation                v setVisibility View GONE                       Override public void onAnimationStart Animator animation              Override public void onAnimationCancel Animator animation              Override public void onAnimationRepeat Animator animation                 va setDuration 300       va setInterpolator new DecelerateInterpolator         va start        You then simply call expand  myView    or collapse  myView

User · Answer

I created version in which you don t need to specify layout height  hence it s a lot easier and cleaner to use  The solution is to get the height in the first frame of the animation  it s available at that moment  at least during my tests   This way you can provide a View with an arbitrary height and bottom margin   There s also one little hack in the constructor - the bottom margin is set to -10000 so that the view stays hidden before the transformation  prevents flicker    public class ExpandAnimation extends Animation         private View mAnimatedView      private ViewGroup MarginLayoutParams mViewLayoutParams      private int mMarginStart  mMarginEnd       public ExpandAnimation View view            mAnimatedView   view          mViewLayoutParams    ViewGroup MarginLayoutParams  view getLayoutParams            mMarginEnd   mViewLayoutParams bottomMargin          mMarginStart   -10000    hide before viewing by settings very high negative bottom margin  hack  but works nicely          mViewLayoutParams bottomMargin   mMarginStart          mAnimatedView setLayoutParams mViewLayoutParams               Override     protected void applyTransformation float interpolatedTime  Transformation t            super applyTransformation interpolatedTime  t                 view height is already known when the animation starts             if interpolatedTime  0                   mMarginStart   -mAnimatedView getHeight                              mViewLayoutParams bottomMargin    int   mMarginEnd-mMarginStart    interpolatedTime  mMarginStart              mAnimatedView setLayoutParams mViewLayoutParams

User · Answer

This is really simple with droidQuery  For starts  consider this layout    lt LinearLayout     android layout width  wrap content      android layout height  wrap content      android orientation  vertical   gt       lt LinearLayout         android id    id v1          android layout width  wrap content          android layout height  wrap content   gt           lt TextView             android layout width  wrap content              android layout height  wrap content               android text  View 1    gt       lt  LinearLayout gt       lt LinearLayout         android id    id v2          android layout width  wrap content          android layout height  0dp   gt           lt TextView             android layout width  wrap content              android layout height  wrap content               android text  View 2    gt           lt TextView             android layout width  wrap content              android layout height  wrap content               android text  View 3    gt       lt  LinearLayout gt   lt  LinearLayout gt    We can animate the height to the desired value - say 100dp - using the following code     convert 100dp to pixel value int height    int  TypedValue applyDimension TypedValue COMPLEX UNIT DIP  100  getResources   getDisplayMetrics       Then use droidQuery to animate  The simplest way is with this     animate    height      height        new AnimationOptions       To make the animation more appealing  consider adding an easing     animate    height      height        new AnimationOptions   easing   Easing BOUNCE      You can also change the duration on AnimationOptions using the duration   method  or handle what happens when the animation ends  For a complex example  try     animate    height      height        new AnimationOptions   easing   Easing BOUNCE                                                                duration 1000                                                                complete new Function                                                                       Override                                                                  public void invoke   d  Object    args                                                                           toast context   finished   Toast LENGTH SHORT

User · Answer

This is a snippet that I used to resize the width of a view  LinearLayout  with animation    The code is supposed to do expand or shrink according the target size  If you want a fill parent width  you will have to pass the parent  getMeasuredWidth as target width while setting the flag to true   Hope it helps some of you   public class WidthResizeAnimation extends Animation   int targetWidth  int originaltWidth  View view  boolean expand  int newWidth   0  boolean fillParent   public WidthResizeAnimation View view  int targetWidth  boolean fillParent        this view   view      this originaltWidth   this view getMeasuredWidth        this targetWidth   targetWidth      newWidth   originaltWidth      if  originaltWidth  gt  targetWidth            expand   false        else           expand   true            this fillParent   fillParent      Override protected void applyTransformation float interpolatedTime  Transformation t        if  expand  amp  amp  newWidth  lt  targetWidth            newWidth    int   newWidth    targetWidth - newWidth    interpolatedTime              if   expand  amp  amp  newWidth  gt  targetWidth            newWidth    int   newWidth -  newWidth - targetWidth    interpolatedTime             if  fillParent  amp  amp  interpolatedTime    1 0            view getLayoutParams   width   -1         else           view getLayoutParams   width   newWidth            view requestLayout        Override public void initialize int width  int height  int parentWidth  int parentHeight        super initialize width  height  parentWidth  parentHeight       Override public boolean willChangeBounds         return true

User · Answer

For Smooth animation please use Handler with run method     And Enjoy Expand  Collapse animation      class AnimUtils                    public void expand final View v                      int ANIMATION DURATION 500   in milisecond         v measure LayoutParams MATCH PARENT  LayoutParams WRAP CONTENT           final int targtetHeight   v getMeasuredHeight             v getLayoutParams   height   0          v setVisibility View VISIBLE           Animation a   new Animation                          Override             protected void applyTransformation float interpolatedTime  Transformation t                    v getLayoutParams   height   interpolatedTime    1                           LayoutParams WRAP CONTENT                            int  targtetHeight   interpolatedTime                   v requestLayout                                Override             public boolean willChangeBounds                     return true                                       1dp ms         a setDuration ANIMATION DURATION             a setDuration  int  targtetHeight   v getContext   getResources   getDisplayMetrics   density            v startAnimation a                public void collapse final View v            final int initialHeight   v getMeasuredHeight             Animation a   new Animation                          Override             protected void applyTransformation float interpolatedTime  Transformation t                    if interpolatedTime    1                       v setVisibility View GONE                    else                      v getLayoutParams   height   initialHeight -  int  initialHeight   interpolatedTime                       v requestLayout                                                  Override             public boolean willChangeBounds                     return true                                       1dp ms         a setDuration ANIMATION DURATION             a setDuration  int  initialHeight   v getContext   getResources   getDisplayMetrics   density            v startAnimation a             And Call using this code          private void setAnimationOnView final View inactive           I am applying expand and collapse on this TextView    You can use your view         for expand animation     new Handler   postDelayed new Runnable              Override         public void run                  new AnimationUtililty   expand inactive                     1000           For collapse     new Handler   postDelayed new Runnable              Override         public void run                  new AnimationUtililty   collapse inactive                 inactive setVisibility View GONE                     8000        Other solution is                  public void expandOrCollapse final View v String exp or colpse        TranslateAnimation anim   null      if exp or colpse equals  expand                  anim   new TranslateAnimation 0 0f  0 0f  -v getHeight    0 0f           v setVisibility View VISIBLE               else          anim   new TranslateAnimation 0 0f  0 0f  0 0f  -v getHeight             AnimationListener collapselistener  new AnimationListener                  Override             public void onAnimationStart Animation animation                                Override             public void onAnimationRepeat Animation animation                                Override             public void onAnimationEnd Animation animation                v setVisibility View GONE                                     anim setAnimationListener collapselistener                  To Collapse                 anim setDuration 300       anim setInterpolator new AccelerateInterpolator 0 5f        v startAnimation anim

User · Answer

Here are two simple kotlin extension functions over view  fun View expand         visibility   View VISIBLE     val animate   TranslateAnimation 0f  0f  -height toFloat    0f      animate duration   200     animate fillAfter   true     startAnimation animate     fun View collapse         val animate   TranslateAnimation 0f  0f  0f  -height toFloat         animate duration   200     animate fillAfter   true     startAnimation animate

User · Answer

You can use Transition or Animator that changes visibility of section to be expanded collapsed  or ConstraintSet with different layouts   Easiest one is to use motionLayout with 2 different layouts and constraintSets to change from one layout to another on button click  You can change between layouts with val constraintSet   ConstraintSet   constraintSet clone this  R layout layout collapsed   val transition   ChangeBounds   transition interpolator   AccelerateInterpolator 1 0f  transition setDuration 300   TransitionManager beginDelayedTransition YOUR VIEW  transition  constraintSet applyTo YOUR VIEW   With Transition api RotateX kt I created the one in gif using Transitions api that change rotationX  class RotateX   Transition         Keep     constructor     super         Keep     constructor context  Context  attrs  AttributeSet    super context  attrs       override fun getTransitionProperties    Array lt String gt            return TRANSITION PROPERTIES            override fun captureStartValues transitionValues  TransitionValues            captureValues transitionValues             override fun captureEndValues transitionValues  TransitionValues            captureValues transitionValues             override fun createAnimator          sceneRoot  ViewGroup          startValues  TransitionValues           endValues  TransitionValues         Animator             if  startValues    null    endValues    null  return null          val startRotation   startValues values PROP ROTATION  as Float         val endRotation   endValues values PROP ROTATION  as Float         if  startRotation    endRotation  return null          val view   endValues view            ensure the pivot is set         view pivotX   view width   2f         view pivotY   view height   2f         return ObjectAnimator ofFloat view  View ROTATION X  startRotation  endRotation             private fun captureValues transitionValues  TransitionValues            val view   transitionValues view         if  view    null    view width  lt   0    view height  lt   0  return         transitionValues values PROP ROTATION    view rotationX            companion object            private const val PROP ROTATION    quot iosched rotate rotation quot          private val TRANSITION PROPERTIES   arrayOf PROP ROTATION           create xml file that targets expand button      lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt       lt transitionSet         xmlns android  quot http   schemas android com apk res android quot          android interpolator  quot  android interpolator fast out slow in quot  gt                lt transition class  quot com smarttoolfactory tutorial3 1transitions transition RotateX quot  gt               lt targets gt                   lt target android targetId  quot  id ivExpand quot    gt               lt  targets gt           lt  transition gt                lt autoTransition android duration  quot 200 quot    gt            lt  transitionSet gt   My layout to be expanded or collapsed    lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt layout 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  gt        lt com google android material card MaterialCardView         android id  quot   id cardView quot          android layout width  quot match parent quot          android layout height  quot wrap content quot          android layout marginHorizontal  quot 4dp quot          android layout marginVertical  quot 2dp quot          android clickable  quot true quot          android focusable  quot true quot          android transitionName  quot  string transition card view quot          app cardCornerRadius  quot 0dp quot          app cardElevation  quot 0dp quot          app cardPreventCornerOverlap  quot false quot  gt             lt androidx constraintlayout widget ConstraintLayout             android layout width  quot match parent quot              android layout height  quot wrap content quot              android paddingTop  quot 16dp quot              android paddingBottom  quot 16dp quot  gt                lt androidx appcompat widget AppCompatImageView                 android id  quot   id ivAvatar quot                  android layout width  quot 40dp quot                  android layout height  quot 40dp quot                  android layout marginStart  quot 16dp quot                  android layout marginTop  quot 8dp quot                  android scaleType  quot centerCrop quot                  app layout constraintStart toStartOf  quot parent quot                  app layout constraintTop toTopOf  quot parent quot                  tools src  quot  drawable avatar 1 raster quot    gt                lt androidx appcompat widget AppCompatImageView                 android id  quot   id ivExpand quot                  android layout width  quot wrap content quot                  android layout height  quot wrap content quot                  android layout marginEnd  quot 8dp quot                  android padding  quot 8dp quot                  app layout constraintEnd toEndOf  quot parent quot                  app layout constraintTop toTopOf  quot parent quot                  app srcCompat  quot  drawable ic baseline expand more 24 quot    gt                lt TextView                 android id  quot   id tvTitle quot                  android layout width  quot wrap content quot                  android layout height  quot wrap content quot                  android layout marginStart  quot 12dp quot                  android layout marginTop  quot 6dp quot                  android text  quot Some Title quot                  android textSize  quot 20sp quot                  android textStyle  quot bold quot                  app layout constraintStart toEndOf  quot   id ivAvatar quot                  app layout constraintTop toTopOf  quot parent quot    gt                 lt TextView                 android id  quot   id tvDate quot                  android layout width  quot wrap content quot                  android layout height  quot wrap content quot                  android layout marginTop  quot 4dp quot                  android textColor  quot  android textColorSecondary quot                  android textSize  quot 12sp quot                  app layout constraintStart toStartOf  quot   id tvTitle quot                  app layout constraintTop toBottomOf  quot  id tvTitle quot                  tools text  quot Tuesday 7pm quot    gt                lt TextView                 android id  quot   id tvBody quot                  android layout width  quot 0dp quot                  android layout height  quot wrap content quot                  android layout marginTop  quot 8dp quot                  android layout marginEnd  quot 16dp quot                  android ellipsize  quot end quot                  android lines  quot 1 quot                  android text  quot  string bacon ipsum short quot                  android textSize  quot 16sp quot                  app layout constraintEnd toEndOf  quot parent quot                  app layout constraintStart toStartOf  quot   id ivAvatar quot                  app layout constraintTop toBottomOf  quot  id tvDate quot    gt                 lt androidx recyclerview widget RecyclerView                 android id  quot   id recyclerView quot                  android layout width  quot match parent quot                  android layout height  quot wrap content quot                  android layout marginStart  quot 16dp quot                  android layout marginTop  quot 16dp quot                  android layout marginEnd  quot 16dp quot                  android orientation  quot horizontal quot                  android overScrollMode  quot never quot                  android visibility  quot gone quot                  app layoutManager  quot androidx recyclerview widget LinearLayoutManager quot                  app layout constraintBottom toBottomOf  quot parent quot                  app layout constraintEnd toEndOf  quot parent quot                  app layout constraintStart toStartOf  quot parent quot                  app layout constraintTop toBottomOf  quot  id tvBody quot                  tools listitem  quot  layout item image destination quot    gt            lt  androidx constraintlayout widget ConstraintLayout gt        lt  com google android material card MaterialCardView gt    lt  layout gt   And set up visibility of items to collapse or expand private fun setUpExpandedStatus         if  isExpanded            binding recyclerView visibility   View VISIBLE         binding ivExpand rotationX   180f       else           binding recyclerView visibility   View GONE         binding ivExpand rotationX   0f          And start transition with    val transition   TransitionInflater from itemView context               inflateTransition R transition icon expand toggle     TransitionManager beginDelayedTransition parent  transition     isExpanded    isExpanded            setUpExpandedStatus    I created animation and transitions samples including the one on the gif  you can check them out there

User · Answer

public static void expand final View v  int duration  int targetHeight            v measure ViewGroup LayoutParams MATCH PARENT  ViewGroup LayoutParams WRAP CONTENT           v getLayoutParams   height   0          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          public static void collapse final View v  int duration  int targetHeight        ValueAnimator valueAnimator   ValueAnimator ofInt 0  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

User · Answer

Here is my solution  I think it is simpler  It only expands the view but can easy be extended   public class WidthExpandAnimation extends Animation       int  targetWidth      View  view       public WidthExpandAnimation View view                 view   view              Override     protected void applyTransformation float interpolatedTime  Transformation t                if  interpolatedTime  lt  1 f                        int newWidth    int    targetWidth   interpolatedTime                 view layout  view getLeft     view getTop                         view getLeft     newWidth   view getBottom                       else              view requestLayout                Override     public void initialize int width  int height  int parentWidth  int parentHeight                super initialize width  height  parentWidth  parentHeight             targetWidth   width              Override     public boolean willChangeBounds             return true

User · Answer

Based on solutions by  Tom Esterez and  Seth Nelson  top 2  I simlified them  As well as original solutions it doesn t depend on Developer options  animation settings     private void resizeWithAnimation final View view  int duration  final int targetHeight        final int initialHeight   view getMeasuredHeight        final int distance   targetHeight - initialHeight       view setVisibility View VISIBLE        Animation a   new Animation              Override         protected void applyTransformation float interpolatedTime  Transformation t                if  interpolatedTime    1  amp  amp  targetHeight    0                    view setVisibility View GONE                             view getLayoutParams   height    int   initialHeight   distance   interpolatedTime               view requestLayout                        Override         public boolean willChangeBounds                 return true                        a setDuration duration       view startAnimation a

User · Answer

combined solutions from  Tom Esterez and  Geraldo Neto  public static void expandOrCollapseView View v boolean expand        if expand           v measure ViewGroup LayoutParams MATCH PARENT ViewGroup LayoutParams WRAP CONTENT           final int targetHeight   v getMeasuredHeight            v getLayoutParams   height   0          v setVisibility View VISIBLE           ValueAnimator valueAnimator   ValueAnimator ofInt 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 500           valueAnimator start              else               final int initialHeight   v getMeasuredHeight            ValueAnimator valueAnimator   ValueAnimator ofInt initialHeight 0           valueAnimator setInterpolator new DecelerateInterpolator             valueAnimator addUpdateListener new ValueAnimator AnimatorUpdateListener                  Override             public void onAnimationUpdate ValueAnimator animation                    v getLayoutParams   height    int  animation getAnimatedValue                    v requestLayout                    if  int animation getAnimatedValue      0                      v setVisibility View GONE                                     valueAnimator setInterpolator new DecelerateInterpolator             valueAnimator setDuration 500           valueAnimator start               sample usage expandOrCollapseView  Your ViewGroup   Your ViewGroup  getVisibility    View VISIBLE

User · Answer

Making use of Kotlin Extension Functions this is tested and shortest answer  Just call animateVisibility expand collapse  on any View   fun View animateVisibility setVisible  Boolean        if  setVisible  expand this  else collapse this     private fun expand view  View        view measure ViewGroup LayoutParams MATCH PARENT  ViewGroup LayoutParams WRAP CONTENT      val initialHeight   0     val targetHeight   view measuredHeight         Older versions of Android  pre API 21  cancel animations for views with a height of 0        v getLayoutParams   height   1      view layoutParams height   0     view visibility   View VISIBLE      animateView view  initialHeight  targetHeight     private fun collapse view  View        val initialHeight   view measuredHeight     val targetHeight   0      animateView view  initialHeight  targetHeight     private fun animateView v  View  initialHeight  Int  targetHeight  Int        val valueAnimator   ValueAnimator ofInt initialHeight  targetHeight      valueAnimator addUpdateListener   animation - gt          v layoutParams height   animation animatedValue as Int         v requestLayout             valueAnimator addListener object   Animator AnimatorListener           override fun onAnimationEnd animation  Animator                v layoutParams height   targetHeight                    override fun onAnimationStart animation  Animator             override fun onAnimationCancel animation  Animator             override fun onAnimationRepeat animation  Animator                valueAnimator duration   300     valueAnimator interpolator   DecelerateInterpolator       valueAnimator start

User · Answer

I would like to add something to the very helpful answer above  If you don t know the height you ll end up with since your views  getHeight   returns 0 you can do the following to get the height   contentView measure DUMMY HIGH DIMENSION  DUMMY HIGH DIMENSION   int finalHeight   view getMeasuredHeight      Where DUMMY HIGH DIMENSIONS is the width height  in pixels  your view is constrained to     having this a huge number is reasonable when the view is encapsulated with a ScrollView

User · Answer

Yes  I agreed with the above comments  And indeed  it does seem like the right  or at least the easiest   thing to do is to specify  in XML  an initial layout height of  0px  -- and then you can  pass in another argument for  toHeight   i e  the  final height   to the constructor of your custom Animation sub-class  e g  in the example above  it would look something like so       public DropDownAnim  View v  int toHeight             Anyways  hope that helps

User · Answer

I think the easiest solution is to set android animateLayoutChanges  true  to your LinearLayout and then just show hide view by seting its visibility  Works like a charm  but you have no controll on the animation duration

User · Answer

I stumbled over the same problem today and I guess the real solution to this question is this    lt LinearLayout android id    id container  android animateLayoutChanges  true         gt    You will have to set this property for all topmost layouts  which are involved in the shift  If you now set the visibility of one layout to GONE  the other will take the space as the disappearing one is releasing it  There will be a default animation which is some kind of  fading out   but I think you can change this - but the last one I have not tested  for now

User · Answer

Animation that either expands or collapses a view by sliding it down to make    it visible  Or by sliding it up so it will hide  It will look like it slides    behind the view above          public class FinalExpandCollapseAnimation extends Animation       private View mAnimatedView      private int mEndHeight      private int mType      public final static int COLLAPSE   1      public final static int EXPAND   0      private LinearLayout LayoutParams mLayoutParams      private RelativeLayout LayoutParams mLayoutParamsRel      private String layout      private Context context                  Initializes expand collapse animation  has two types  collapse  1  and        expand  0                   param view                   The view to animate         param type                   The type of animation  0 will expand from gone and 0 size to                   visible and layout size defined in xml  1 will collapse view                   and set to gone             public FinalExpandCollapseAnimation View view  int type  int height  String layout  Context context                this layout   layout          this context   context          mAnimatedView   view          mEndHeight   mAnimatedView getMeasuredHeight            if  layout equalsIgnoreCase  linear                mLayoutParams     LinearLayout LayoutParams  view getLayoutParams             else             mLayoutParamsRel     RelativeLayout LayoutParams  view getLayoutParams             mType   type          if  mType    EXPAND                        AppConstant ANIMATED VIEW HEIGHT   height                    else                       if  layout equalsIgnoreCase  linear                    mLayoutParams topMargin   0              else                 mLayoutParamsRel topMargin   convertPixelsIntoDensityPixels 36                     setDuration 600               Override     protected void applyTransformation float interpolatedTime  Transformation t                super applyTransformation interpolatedTime  t           if  interpolatedTime  lt  1 0f                        if  mType    EXPAND                                if  layout equalsIgnoreCase  linear                                          mLayoutParams height   AppConstant ANIMATED VIEW HEIGHT                                -AppConstant ANIMATED VIEW HEIGHT    int   AppConstant ANIMATED VIEW HEIGHT   interpolatedTime                                      else                                       mLayoutParamsRel height   AppConstant ANIMATED VIEW HEIGHT                                -AppConstant ANIMATED VIEW HEIGHT    int   AppConstant ANIMATED VIEW HEIGHT   interpolatedTime                                      mAnimatedView setVisibility View VISIBLE                             else                               if  layout equalsIgnoreCase  linear                        mLayoutParams height   mEndHeight -  int   mEndHeight   interpolatedTime                   else                     mLayoutParamsRel height   mEndHeight -  int   mEndHeight   interpolatedTime                             mAnimatedView requestLayout                      else                       if  mType    EXPAND                                if  layout equalsIgnoreCase  linear                                          mLayoutParams height   AppConstant ANIMATED VIEW HEIGHT                      mLayoutParams topMargin   0                                    else                                       mLayoutParamsRel height   AppConstant ANIMATED VIEW HEIGHT                      mLayoutParamsRel topMargin   convertPixelsIntoDensityPixels 36                                     mAnimatedView setVisibility View VISIBLE                   mAnimatedView requestLayout                              else                               if  layout equalsIgnoreCase  linear                        mLayoutParams height   0                  else                     mLayoutParamsRel height   0                  mAnimatedView setVisibility View GONE                   mAnimatedView requestLayout                                       private int convertPixelsIntoDensityPixels int pixels                DisplayMetrics metrics   context getResources   getDisplayMetrics            return  int  metrics density   pixels            The class can be called in following way     if  findViewById R id ll specailoffer show hide  getVisibility      View VISIBLE                              ImageView  findViewById R id iv specialhour seemore   setImageResource R drawable white dropdown up                            FinalExpandCollapseAnimation finalExpandCollapseAnimation   new FinalExpandCollapseAnimation                                  findViewById R id ll specailoffer show hide                                   FinalExpandCollapseAnimation COLLAPSE                                  SpecialOfferHeight   linear   this                           findViewById R id ll specailoffer show hide                                   startAnimation finalExpandCollapseAnimation                             View  findViewById R id ll specailoffer show hide  getParent    invalidate                          else                             ImageView  findViewById R id iv specialhour seemore   setImageResource R drawable white dropdown                            FinalExpandCollapseAnimation finalExpandCollapseAnimation   new FinalExpandCollapseAnimation                                  findViewById R id ll specailoffer show hide                                   FinalExpandCollapseAnimation EXPAND                                  SpecialOfferHeight   linear   this                           findViewById R id ll specailoffer show hide                                   startAnimation finalExpandCollapseAnimation                             View  findViewById R id ll specailoffer show hide  getParent    invalidate

User · Answer

Best solution for expand collapse view s        Override     public void onCheckedChanged CompoundButton buttonView  boolean isChecked            View view   buttonView getId      R id tb search   fSearch   layoutSettings          transform view  200  isChecked               ViewGroup LayoutParams WRAP CONTENT               0              public static void transform final View v  int duration  int targetHeight            int prevHeight    v getHeight            v setVisibility View VISIBLE           ValueAnimator animator          if  targetHeight    ViewGroup LayoutParams WRAP CONTENT                v measure ViewGroup LayoutParams MATCH PARENT  ViewGroup LayoutParams WRAP CONTENT               animator   ValueAnimator ofInt prevHeight  v getMeasuredHeight               else               animator   ValueAnimator ofInt prevHeight  targetHeight                     animator addUpdateListener animation - gt                v getLayoutParams   height    animation getAnimatedFraction      1 0f                        targetHeight                        int  animation getAnimatedValue                v requestLayout                        animator setInterpolator new LinearInterpolator             animator setDuration duration           animator start

User · Answer

public static void slide View v  int speed  int pos        v animate   setDuration speed       v animate   translationY pos       v animate   start          slide down slide yourView  250  yourViewHeight      slide up slide yourView  250  0

User · Answer

Ok  I just found a VERY ugly solution    public static Animation expand final View v  Runnable onEnd        try           Method m   v getClass   getDeclaredMethod  onMeasure   int class  int class           m setAccessible true           m invoke              v              MeasureSpec makeMeasureSpec 0  MeasureSpec UNSPECIFIED               MeasureSpec makeMeasureSpec   View v getParent    getMeasuredHeight    MeasureSpec AT MOST                   catch  Exception e           Log e  test       e             final int initialHeight   v getMeasuredHeight        Log d  test    initialHeight   initialHeight        v getLayoutParams   height   0      v setVisibility View VISIBLE       Animation a   new Animation                  Override         protected void applyTransformation float interpolatedTime  Transformation t                final int newHeight    int  initialHeight   interpolatedTime               v getLayoutParams   height   newHeight              v requestLayout                        Override         public boolean willChangeBounds                 return true                       a setDuration 5000       v startAnimation a       return a      Feel free to propose a better solution

User · Answer

I see that this question became popular so I post my actual solution  The main advantage is that you don t have to know the expanded height to apply the animation and once the view is expanded  it adapts height if content changes  It works great for me   public static void expand final View v        int matchParentMeasureSpec   View MeasureSpec makeMeasureSpec   View  v getParent    getWidth    View MeasureSpec EXACTLY       int wrapContentMeasureSpec   View MeasureSpec makeMeasureSpec 0  View MeasureSpec UNSPECIFIED       v measure matchParentMeasureSpec  wrapContentMeasureSpec       final int targetHeight   v getMeasuredHeight            Older versions of android  pre API 21  cancel animations for views with a height of 0      v getLayoutParams   height   1      v setVisibility View VISIBLE       Animation a   new Animation                  Override         protected void applyTransformation float interpolatedTime  Transformation t                v getLayoutParams   height   interpolatedTime    1                       LayoutParams WRAP CONTENT                        int  targetHeight   interpolatedTime               v requestLayout                        Override         public boolean willChangeBounds                 return true                           Expansion speed of 1dp ms     a setDuration  int  targetHeight   v getContext   getResources   getDisplayMetrics   density        v startAnimation a      public static void collapse final View v        final int initialHeight   v getMeasuredHeight         Animation a   new Animation                  Override         protected void applyTransformation float interpolatedTime  Transformation t                if interpolatedTime    1                   v setVisibility View GONE                else                  v getLayoutParams   height   initialHeight -  int  initialHeight   interpolatedTime                   v requestLayout                                      Override         public boolean willChangeBounds                 return true                           Collapse speed of 1dp ms     a setDuration  int  initialHeight   v getContext   getResources   getDisplayMetrics   density        v startAnimation a       As mentioned by  Jefferson in the comments  you can obtain a smoother animation by changing the duration  and hence the speed  of the animation  Currently  it has been set at a speed of 1dp ms

User · Answer

You can use a ViewPropertyAnimator with a slight twist   To collapse  scale the view to a height of 1 pixel  then hide it   To expand  show it  then expand it to its height     private void collapse final View view        view setPivotY 0       view animate   scaleY 1 view getHeight    setDuration 1000  withEndAction new Runnable              Override public void run                 view setVisibility GONE                        private void expand View view  int height        float scaleFactor   height   view getHeight         view setVisibility VISIBLE       view setPivotY 0       view animate   scaleY scaleFactor  setDuration 1000       The pivot tells the view where to scale from  default is in the middle  The duration is optional  default   1000   You can also set the interpolator to use  like  setInterpolator new AccelerateDecelerateInterpolator

User · Answer

I have used the same code block that have used in accepted answer   But it wont work as same in android 9   So update the measure according to this   v measure MeasureSpec makeMeasureSpec parentView getWidth    MeasureSpec EXACTLY   MeasureSpec makeMeasureSpec parentView getWidth    MeasureSpec AT MOST      How the constraint works bit different in android 9

User · Answer

Tom Esterez s answer  but updated to use view measure   properly per Android getMeasuredHeight returns wrong values           http   easings net      Interpolator easeInOutQuart   PathInterpolatorCompat create 0 77f  0f  0 175f  1f        public static Animation expand final View view            int matchParentMeasureSpec   View MeasureSpec makeMeasureSpec   View  view getParent    getWidth    View MeasureSpec EXACTLY           int wrapContentMeasureSpec   View MeasureSpec makeMeasureSpec 0  View MeasureSpec UNSPECIFIED           view measure matchParentMeasureSpec  wrapContentMeasureSpec           final int targetHeight   view getMeasuredHeight                Older versions of android  pre API 21  cancel animations for views with a height of 0 so use 1 instead          view getLayoutParams   height   1          view setVisibility View VISIBLE            Animation animation   new Animation              Override         protected void applyTransformation float interpolatedTime  Transformation t                    view getLayoutParams   height   interpolatedTime    1                       ViewGroup LayoutParams WRAP CONTENT                        int   targetHeight   interpolatedTime                view requestLayout                            Override             public boolean willChangeBounds                     return true                                    animation setInterpolator easeInOutQuart           animation setDuration computeDurationFromHeight view            view startAnimation animation            return animation             public static Animation collapse final View view            final int initialHeight   view getMeasuredHeight             Animation a   new Animation                  Override             protected void applyTransformation float interpolatedTime  Transformation t                    if  interpolatedTime    1                        view setVisibility View GONE                     else                       view getLayoutParams   height   initialHeight -  int   initialHeight   interpolatedTime                       view requestLayout                                                  Override             public boolean willChangeBounds                     return true                                    a setInterpolator easeInOutQuart            int durationMillis   computeDurationFromHeight view           a setDuration durationMillis            view startAnimation a            return a             private static int computeDurationFromHeight View view               1dp ms   multiplier         return  int   view getMeasuredHeight     view getContext   getResources   getDisplayMetrics   density

[android] Android: Expand/collapse animation

Examples related to android

Examples related to animation