Thursday, 28 June 2018

Apply animation sequentially to multiple views

I have an activity with 3 views (buttonViews) in a vertical linear layout. I am generating (inflating) these views dynamically. I want to apply an animation such that, on activity start, the first buttons slide in -> 100 ms delay -> second button slide in -> 100 ms delay -> Third button slide in.

Attempt

I tried implementing it in this way:

private void setMainButtons() {
    ArrayList<String> dashboardTitles = DashboardUtils.getDashboardTitles();
    ArrayList<Integer> dashboardIcons = DashboardUtils.getDashboardIcons();

    final ViewGroup root = findViewById(R.id.button_container);

    for (int i = 0; i < (dashboardTitles.size() < dashboardIcons.size() ? dashboardTitles.size() : dashboardIcons.size()); i++){
        final View buttonView = DashboardButtonInflater.getDashboardButton(root, dashboardTitles.get(i), dashboardIcons.get(i), this);
        if (buttonView == null) continue;
        buttonView.setOnClickListener(this);
        root.addView(buttonView);
        animateBottomToTop(buttonView, (long) (i*50)); // Calling method to animate buttonView
    }
}

//The function that adds animation to buttonView, with a delay.
private void animateBottomToTop(final View buttonView,long delay) {
    AnimationSet animationSet = new AnimationSet(false);
    animationSet.addAnimation(bottomToTop);
    animationSet.addAnimation(fadeIn);
    animationSet.setStartOffset(delay);
    buttonView.setAnimation(animationSet);
}

Result:

The above method waits for the total delay of all the views and at the end, aminates all the views together. I can guess the culprit here is the thread. The dealy is actually stopping the UI thread from doing any animation. I could be wrong though.

I also tried running the animation code inside

new Thread(new Runnable(){...}).run()

but that didn't work either.

Expectations:

Can somebody help me achieve the one-by-one animation on buttonView? Thank you.



from Apply animation sequentially to multiple views

No comments:

Post a Comment