title: How to achieve smooth expand/collapse animation
body: <p>I'm referring the expand / collapse animation code found here.</p>
  
  <p><a href="https://stackoverflow.com/questions/4946295/android-expand-collapse-animation/13381228#13381228">Android: Expand/collapse animation</a></p>
  
  <p>Although it works, it doesn't do the job well. The animation isn't smooth.</p>
  
  <p>I do some logging in the code.</p>
  
  <pre><code>public static void expand(final View v) {
      v.measure(MeasureSpec.makeMeasureSpec(((View)v.getParent()).getWidth(), MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(1024, MeasureSpec.AT_MOST));
      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);
              Log.i("CHEOK", "E v.getLayoutParams().height = " + v.getLayoutParams().height);
              v.requestLayout();
          }
  </code></pre>
  
  <p>The following log message is printed.</p>
  
  <pre><code>10-09 12:29:58.808: I/CHEOK(7874): E v.getLayoutParams().height = 0
  10-09 12:29:58.808: I/CHEOK(7874): E v.getLayoutParams().height = 0
  10-09 12:29:58.918: I/CHEOK(7874): E v.getLayoutParams().height = 11
  10-09 12:29:59.015: I/CHEOK(7874): E v.getLayoutParams().height = 35
  10-09 12:29:59.117: I/CHEOK(7874): E v.getLayoutParams().height = 64
  10-09 12:29:59.215: I/CHEOK(7874): E v.getLayoutParams().height = 85
  10-09 12:29:59.316: I/CHEOK(7874): E v.getLayoutParams().height = -2
  10-09 12:29:59.406: I/CHEOK(7874): E v.getLayoutParams().height = -2
  </code></pre>
  
  <p><strong>New height occur every ~100ms. So, the FPS of the animation is around 10fps</strong></p>
  
  <p>I want to see what is the ideal animation frame rate. I remove the <code>v.requestLayout();</code>. I get the following logging.</p>
  
  <pre><code>10-09 12:32:06.547: I/CHEOK(8926): E v.getLayoutParams().height = 0
  10-09 12:32:06.562: I/CHEOK(8926): E v.getLayoutParams().height = 0
  10-09 12:32:06.605: I/CHEOK(8926): E v.getLayoutParams().height = 4
  10-09 12:32:06.625: I/CHEOK(8926): E v.getLayoutParams().height = 7
  10-09 12:32:06.644: I/CHEOK(8926): E v.getLayoutParams().height = 10
  10-09 12:32:06.664: I/CHEOK(8926): E v.getLayoutParams().height = 14
  10-09 12:32:06.679: I/CHEOK(8926): E v.getLayoutParams().height = 18
  10-09 12:32:06.699: I/CHEOK(8926): E v.getLayoutParams().height = 22
  10-09 12:32:06.715: I/CHEOK(8926): E v.getLayoutParams().height = 27
  10-09 12:32:06.734: I/CHEOK(8926): E v.getLayoutParams().height = 32
  10-09 12:32:06.750: I/CHEOK(8926): E v.getLayoutParams().height = 37
  10-09 12:32:06.769: I/CHEOK(8926): E v.getLayoutParams().height = 42
  10-09 12:32:06.785: I/CHEOK(8926): E v.getLayoutParams().height = 47
  10-09 12:32:06.804: I/CHEOK(8926): E v.getLayoutParams().height = 52
  10-09 12:32:06.828: I/CHEOK(8926): E v.getLayoutParams().height = 59
  10-09 12:32:06.840: I/CHEOK(8926): E v.getLayoutParams().height = 62
  10-09 12:32:06.863: I/CHEOK(8926): E v.getLayoutParams().height = 67
  10-09 12:32:06.879: I/CHEOK(8926): E v.getLayoutParams().height = 71
  10-09 12:32:06.894: I/CHEOK(8926): E v.getLayoutParams().height = 75
  10-09 12:32:06.910: I/CHEOK(8926): E v.getLayoutParams().height = 79
  10-09 12:32:06.929: I/CHEOK(8926): E v.getLayoutParams().height = 82
  10-09 12:32:06.945: I/CHEOK(8926): E v.getLayoutParams().height = 85
  10-09 12:32:06.965: I/CHEOK(8926): E v.getLayoutParams().height = 88
  10-09 12:32:06.984: I/CHEOK(8926): E v.getLayoutParams().height = 89
  10-09 12:32:07.000: I/CHEOK(8926): E v.getLayoutParams().height = 91
  10-09 12:32:07.019: I/CHEOK(8926): E v.getLayoutParams().height = 91
  10-09 12:32:07.039: I/CHEOK(8926): E v.getLayoutParams().height = -2
  10-09 12:32:07.054: I/CHEOK(8926): E v.getLayoutParams().height = -2
  </code></pre>
  
  <p><strong>New height occur every ~20ms. So, the FPS of the animation is around 50fps</strong></p>
  
  <p>Of course, I can't just remove <code>requestLayout</code>, as UI won't updated on screen.</p>
  
  <p>I was wondering, is there any improvement can be done, to achieve animation FPS closed to 50fps? I had seen some commercial product with smooth Expand/collapse example. So, I think this is something achievable. Just that, I'm not sure exactly how.</p>
  
  <p>My layout code is as followed :</p>
  
  <pre><code>        &lt;LinearLayout
              android:clickable="true"
              android:id="@+id/chart_linear_layout"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_marginTop="10dp"
              android:layout_marginLeft="10dp"
              android:layout_marginRight="10dp"
              android:background="@drawable/dummy"
              android:orientation="vertical"&gt;
              &lt;LinearLayout
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:layout_margin="10dp"
                  android:orientation="horizontal"&gt;
                  &lt;TextView
                      android:layout_width="0dp"
                      android:width="0dp"
                      android:layout_weight="0.6"
                      android:layout_height="wrap_content"
                      android:gravity="left"
                      android:textSize="20sp" 
                      android:textColor="#ff000000"
                      android:text="Summary chart" /&gt;
                  &lt;TextView
                      android:id="@+id/chart_price_text_view"
                      android:layout_width="0dp"
                      android:width="0dp"
                      android:layout_weight="0.4"
                      android:layout_height="wrap_content"
                      android:gravity="right"
                      android:textSize="20sp" 
                      android:textColor="#ffF76D3C"
                      android:text="$2.99" /&gt;
  
              &lt;/LinearLayout&gt;
              &lt;TextView
                  android:visibility="gone"
                  android:id="@+id/chart_description_text_view"
                  android:layout_marginLeft="10dp"
                  android:layout_marginRight="10dp"
                  android:layout_marginBottom="10dp"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"         
                  android:text="@string/currency_exchange_description"
                  android:textColor="#ff626262"
                  android:textSize="15sp" /&gt;                 
          &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>I wish to perform smooth animation on <code>chart_description_text_view</code> from</p>
  
  <h2>Collapsing (During app startup)</h2>
  
  <p><img src="https://i.stack.imgur.com/6Hh6b.png" alt="enter image description here"></p>
  
  <h2>Expanding (When user taps on it)</h2>
  
  <p><img src="https://i.stack.imgur.com/5gKtS.png" alt="enter image description here"></p>
  
  <p>One of the <strong>"role models"</strong> I can think of is <a href="https://play.google.com/store/apps/details?id=ch.bitspin.timely" rel="noreferrer">https://play.google.com/store/apps/details?id=ch.bitspin.timely</a>. Try to invoke the below dialog from its <strong>Shop</strong> menu item. You will realize how smooth their animation is. Not exactly sure how they achieve that.</p>
  
  <p><img src="https://i.stack.imgur.com/C1Moh.png" alt="enter image description here"></p>