How We Made the ToolBar on Android Move Like Jelly: Animation in Kotlin

You don’t have to spend much time looking for a search button in a mobile app. The majority of apps have a magnifying glass icon on the right side of the navigation bar. This icon always looks the same and acts the same: you click on the magnifying glass and the search field opens up.

Such a standard UI element as a search bar isn’t typically a designer’s favorite spot to apply their animation creativity. But who said we shouldn’t?

We thought, “What if a regular search field could tremble while opening up?” When we saw the final result of our search bar animation it reminded us of jelly – that sweet, clear substance made from fruit juice and sugar boiled to a thick consistency.

It looks tasty, doesn’t it? Let’s see how we implemented this jelly toolbar animation for Android.

JellyToolbar animation for Android

How we implemented Jelly Toolbar animation

The jelly toolbar animation looks pretty simple, and for the most part it is. We created a custom view that contains the well-known toolbar, a view containing the background, and a view containing icons. The structure looks like this:

<FrameLayout >
   <android.support.v7.widget.Toolbar />
   <com.yalantis.jellytoolbar.widget.JellyView />
   <com.yalantis.jellytoolbar.widget.ContentLayout />
</FrameLayout>

How does the JellyView work?

We decided to draw the animation on Canvas. Before showing you a piece of our Kotlin animation source code, we’d like to describe the main idea behind our implementation. To produce the bouncing of the view, we used a quadratic Bezier curve. (You might also want to check out our article about drawing Bezier curves.)   

Screen Shot 2017-02-27 at 1.46.08 PM.png

Screen Shot 2017-02-27 at 1.46.35 PM.png

The shape of this curve changes depending on the position of the control point. Let’s look at how we draw the view:

override fun onDraw(canvas: Canvas?) {
       super.onDraw(canvas)
       redraw(canvas)
   }

  private fun redraw(canvas: Canvas?) {
       paint.shader = gradient
       path.apply {
           moveTo(jellyViewWidth, 0f)
           lineTo(width.toFloat(), 0f)
           lineTo(width.toFloat(), height.toFloat())
           lineTo(jellyViewWidth, height.toFloat())
           quadTo(jellyViewWidth - difference, height / 2f, jellyViewWidth, 0f)
       }
       canvas?.drawPath(path, paint)
       path.reset()
       path.close()
   }

The value of the difference variable changes the control point of the quadratic Bezier curve. To change the value of the control point we created a custom interpolator. The sine function properly represents the bouncing of a jelly-like object:

class JellyInterpolator : Interpolator {
   override fun getInterpolation(t: Float) = (Math.min(1.0, Math.sin(28 * t - 6.16) / (5 * t - 1.1))).toFloat()

}

Screen Shot 2017-02-27 at 1.42.12 PM.png

How to use this library in your project

First, add JellyToolbar to the xml layout of your activity so it looks like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <com.yalantis.jellytoolbar.widget.JellyToolbar
       android:id="@+id/toolbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@color/colorPrimary"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       android:paddingStart="@dimen/activity_horizontal_margin"
       app:cancelIcon="@drawable/ic_close"
       app:endColor="@color/colorEnd"
       app:icon="@drawable/ic_search"
       app:startColor="@color/colorStart"
       app:title="@string/str_news_feed"
       app:titleTextColor="@android:color/white" />

</LinearLayout>

Next, pass an instance of the JellyListener and content view (the view that will be inserted into the toolbar) to the JellyToolbar. As you can see, JellyToolbar has the getToolbar() method to let you use all the methods of the standard Toolbar.

public class MainActivity extends AppCompatActivity {
   private JellyToolbar toolbar;
   private AppCompatEditText editText;
   @Override

   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);

       toolbar = (JellyToolbar) findViewById(R.id.toolbar);
       toolbar.getToolbar().setLogo(R.drawable.ic_menu);
       toolbar.setJellyListener(jellyListener);

       editText = (AppCompatEditText) LayoutInflater.from(this).inflate(R.layout.edit_text, null);
       editText.setBackgroundResource(R.color.colorTransparent);
       toolbar.setContentView(editText);
   }

   private JellyListener jellyListener = new JellyListener() {
       @Override
       public void onCancelIconClicked() {
           if (TextUtils.isEmpty(editText.getText())) {
               toolbar.collapse();
           } else {
               editText.getText().clear();
           }
       }
   };
}

To control the animation flow, use the collapse() and expand() methods.

You can find this library and many more in our GitHub repository, and can check out our designs on Dribbble:

Dribbble

Github

You can also get a cool demo with our component on the Google Play Store.

4.6/ 5.0
Article rating
17
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?