title: Drawing multiple lines on canvas with delay in between
body: <p>after few months i finally managed to create my first non trivial app.
  Now I want to add some nice animation (not sure it is a proper term), like step-by-step drawing my graph. Gif below explains what I need. At this point my app draw the graph at once, without any delaying.</p>
  
  <p><a href="https://i.stack.imgur.com/0Six0.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0Six0.gif" alt="I need something like on this pic"></a></p>
  
  <p>In MyFragment class there is FrameLayout where custom View (my graph) is added:</p>
  
  <pre><code>public class MyFragment extends Fragment{
  ...
  FrameLayout mFL;
  MyDraw mydraw = new MyDraw(getContext(),floatArray_coord_X,floatArray_coord_Y);
  mFL.addView(mydraw);
  ...
  </code></pre>
  
  <p>}</p>
  
  <p>Then in my custom view class some calc are made and lines are drawn:</p>
  
  <pre><code>public class MyDraw extends View{
    private Bitmap mBitmap;
    private Canvas mCanvas;
    ...
  
    @Override
    public void onDraw(Canvas canvas){
  
      mBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(),
                                      Bitmap.Config.ARGB_8888); 
      mCanvas = new Canvas(bitmap);       
      ...
  
      // draw brown lines between two neighbour (X,Y) points 
      for (int i = 0; i &lt; floatArray_coord_X.length - 1; i++) {
              mCanvas.drawLine(floatArray_coord_X[i],     floatArray_coord_Y[i],
                               floatArray_coord_X[i + 1], floatArray_coord_Y[i + 1],
                               mypaint0);
          }
  
      ...
      // draw black lines at calculated (X,Y) points
      for (int i = 0; i &lt; floatArray_coord_X_calc.length - 1; i++) {
              mCanvas.drawLine(floatArray_coord_X_calc[i],     floatArray_coord_Y_calc[i],
                               floatArray_coord_X_calc[i + 1], floatArray_coord_Y_calc[i + 1],
                               mypaint1);
          }
      ...
      // draw blue lines at newly calculated (X,Y) points
      drawBlueLines(); // with extra calc
      ...     
  
      canvas.drawBitmap(bitmap, 0, 0, null);
  }
  </code></pre>
  
  <p>}</p>
  
  <p>I tried to accomplish that by using  Handler/Runnable - now i know that calling it inside onDraw isn`t good (at least my attempt wasn't good)...
  Any suggestion how to achieve this?</p>