Android Material Design: Make buttons in List pop up from left to right, and animate button movement

Question

I basically have two problems that probably have separate solutions.

I have attached some screenshots of what I'm talking about. Of course these icons are not to be taken seriously: https://goo.gl/photos/zrHtt1BrmSdjFEMM8

___________________________ FIRST _____________________________

I have an application with a gray bar (Bar A) at the bottom that is specified in an xml. In the middle of the bar there is a Button A (puzzle piece). When Button A is pressed in the application, I want that button to slide over to the right side and stick to the right side of the screen. At that point the rest of Bar A (that was filled with other stuff) should vanish, turn black, and be filled with new buttons (Bar B: Button A on the right and to its left black bar filled with buttons). In the xml I have a a FrameLayout with two components inside, both bars are fully specified, and in code I then switch between making the 2nd one visible or invisible. Therefore the button, after moving it to the right, turns into Button B in the xml. The Android Developer page about animations describes how to Share an Element between two activities, but how do I share an element in the same activity between two elements in the xml? How can I tell an animation that Button A is in fact the same as Button B, after the animation ends?

My current solution is to only move Button A using a TranslateAnimation and once it has arrived at Button B's position, I make bar B visible. But this doesn't feel elegant, I feel there must be a better way to connect Button A and Button B not only visibly, but programmatically. Is there a way?

___________________________ SECOND________________________________

After Button A has arrived on Button B and thus made Bar B visible, I now want those buttons inside the black bar (the hearts) to pop up one after the other from the left to the right, similar as they do in the Google Developer guide: http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B08MbvYZK1iNTGRLb2Zud2RUNFE/animation-meaningfultransitions-hierarchicaltiming-4do_large_xhdpi.webm

What is that kind of animation called? I didn't know what to search for. Some code pointers would also be nice.

EDIT: I have now figured something out. Again I don't think this is the most elegant solution and I would be happy about hints how to do it better.

When adding views to the LinearLayout, I loop over the elements I want to add and add animations to them. I increase a "delay" variable with each element to delay the start of the animation in order to make them appear from left to right. Here is the code snippet:

private void addLinearLayoutViews() {
  LinearLayout layout = (LinearLayout) findViewById(R.id.linear_layout);
  layout.removeAllViewsInLayout();

  long delay = 0;
  for (int i = 0; i < ITEMS.length; ++i) {
    ImageView v; // fill with stuff
    v.setVisibility(View.INVISIBLE);

    PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("scaleX", 0.f, 1.f);
    PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("scaleY", 0.f, 1.f);
    PropertyValuesHolder pvhA = PropertyValuesHolder.ofFloat("alpha", 0.f, 1.f);
    ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(v, pvhX, pvhY, pvhA);
    animator.setDuration(500);
    animator.addListener(new AnimatorListenerAdapter() {
      public void onAnimationStart(Animator animation) {
        v.setVisibility(View.VISIBLE);
      }
    });
    animator.setStartDelay(delay);
    animator.start();
    delay +=15;
    layout.addView(v);        
  }
}

Thanks so much in advance!

Android Material Design: Make buttons in List pop up from left to right, and animate button movement

0 Answers0