How We Created Smooth Android To-Do List Animations Using Micro-Transitions

Lists are essential to various apps, including time management apps, grocery shopping apps and fitness trackers of various kinds.

To-do lists as a separate class are often found in motivation apps that help users organize their time, fight procrastination and be efficient. To-do lists work as reminders and help users keep up with their busy schedule.

Working on one of our recent projects at Yalantis we had a small task of creating a to-do list, and the challenging part was to create one that would stand out among similar features and be fun for the user. The idea was that we needed something that would make managing tasks fast and intuitive.

We wanted to make users feel like they are dealing with a real-life 3D object while using a flat screen.

Using microtransitions allowed us to get smooth transformation of one object into another. Working with microtransitions proved once again that using a bit of motion works wonders giving even simple design new, more realistic feeling.

After the design concept was ready we worked with our developers to animate it.

We had to work separately on several animated components: “plus” animation, cursor animation, adding items to the list animation, and list of items movement animation.

How we implemented “Plus” animation

On the developers’ part it was challenging to implement the slight transformation of “plus” into cursor on the screen. We used ViewPropertyAnimationCompat class for all animations in the component. And to rotate the view we used ‘rotation()’method.

public void rotate(@Nullable Runnable endAction) {
   AnimationUtil.rotate(mHorizontalView, 180, endAction);
}
public static void rotate(View view, int value, @Nullable Runnable endAction) {
   ViewPropertyAnimatorCompat animator = ViewCompat.animate(view).rotation(value);
   if (endAction != null) {
       animator.withEndAction(endAction);
   }
   animator.setDuration(Constant.ANIM_DURATION_MILLIS).start();
}

How we animated cursor

The challenging part was to make cursor of the input field visible in the same place as the transformed “plus” view.

The default Android EditText’s cursor wasn’t appropriate for that purpose, since it’s not so easy to control, so we’ve replaced it by the custom cursor. We’ve created custom BatEditText view: it contains default EditText with the view above it that let’s it to act as its cursor.

How we change the cursor position when user types text?

RxTextView.textChanges(mEditText).subscribe(new Action1<CharSequence>() {
   @Override
   public void call(CharSequence charSequence) {
       if (!TextUtils.isEmpty(charSequence)) {
           moveCursor();
       } else {
           moveToStart();
      }
   }
});

private void moveCursor() {
   mCursor.setX(getCursorPosition() + mCursor.getWidth() * 1.5f);
   mCursor.setY(mEditText.getY());
}
private float getCursorPosition() {
   Layout layout = mEditText.getLayout();
   if (layout == null) {
       return 0;
   }
   int position = mEditText.getSelectionStart();
   return layout.getPrimaryHorizontal(position);
}

public void moveToStart() {
   mCursor.setX(mEditText.getX());
   mCursor.setY(mEditText.getY());
}

We started by using RxBinding to receive an event when a user changes the text in the input field.

So we got edited text in the ‘call()’ method as a parameter. And if the text is there, then the position for our custom cursor is expressed by ‘getCursorPosition()’ method and after that we’re moving the cursor by changing its X and Y values.


How we animated adding items to the list

When user types text and clicks the ‘Add’ button, the input field should smoothly move down to become the first item in the to-do list. To implement this part of the animation we’ve created a customized view, which contains RecyclerView and view on its top, like header, which also contains custom EditText with cursor(BatEditText). So when user clicks ‘Add’ this view is moving above the RecyclerView to the position of the first list item, and at the same time we’re adding new item. But it’s invisible while the header is moving. After that we make first list item visible and animate the appearance of the header.

how we develop a to-do list animation on Android

How we animated items on the list

To animate items on the list, we had to create a customized item animator. We’ve separated move animation into some important steps:

  1. Increase the checked view

  2. Move it to needed position

  3. Decrease item

Each step should go one after another, so we used ‘withEndAction()’ method to wait until previous part of animation is finished and to start the next one.

private void animateMoveImpl(final BatAdapter.ViewHolder holder) {
   final View view = holder.itemView;
//needed to increase checked item only, not all moved items
   final boolean isMainView = isMainListItem(holder.getItemPosition());
//increasing checked item
   ViewCompat.animate(view).scaleX(isMainView ? 1.05f : 1).scaleY(isMainView ? 1.05f : 1)
           .setDuration(mAnimationType == AnimationType.MOVE ? Constant.ANIM_DURATION_MILLIS : 0)
           .withEndAction(new Runnable() {
               @Override
               public void run() {                  
//moving item to needed position
ViewCompat.animate(view).translationX(0).translationY(0).setDuration(Constant.ANIM_DURATION_MILLIS)
                           .withEndAction(new Runnable() {
                               @Override
                               public void run() {
                                   if (isMainListItem(holder.getItemPosition())) {
			//descreasing checked item
                                       ViewCompat.animate(view).scaleX(1).scaleY(1).start();
                                       mPosition = -1;
                                   }
                              }
                           });

We needed ‘isMainView’ field to store the position of the list item which was checked by the user. That helped us differentiate between items on the list that were checked and items that weren’t. If we hadn’t used ‘isMainView’, all items would be increased.

how we developed a to-do list animation on Android

Well-designed to-do lists can improve user experience and add a nice touch to even a very simple product. Don’t hesitate to use some of our experience to work on your to-do lists!

 

Check out our To-Do List Animation on:

Dribbble

Github

 

4.5/ 5.0
Article rating
43
Reviews
Remember those Facebook reactions? Well, we aren't Facebook but we love reactions too. They can give us valuable insights on how to improve what we're doing. Would you tell us how you feel about this article?

We use cookies to personalize our service and to improve your experience on the website and its subdomains. We also use this information for analytics.

More info