You don’t need to pay a lot of time searching for a search button in a mobile app. We’re all familiar with this typical location of a search button on the right of navigation bar. The majority of apps have a magnifying glass icon on the proper aspect of the navigation bar. This icon continually looks a similar and acts the same: you click on the magnifying glass and the search field opens up.

And most of application it look same and ugly but today in this article we’ll see a cool regular search field could tremble while opening up. Let see demo firstly:

It looks tasty, doesn’t it?

Requirements

• Android SDK 16+

Usage

Add to your root build.gradle:

allprojects {
  repositories {
    ...
    maven { url "https://jitpack.io" }
  }
}

Add the dependency:

dependencies {
  compile 'com.github.yalantis:jellytoolbar:v1.0'
}

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.

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

<?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>

After that pass an instance of the JellyListener and content view (the view which would be inserted to the toolbar) to the JellyToolbar. JellyToolbar has 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().setNavigationIcon(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 collapse() and expand() methods.

Override onToolbarExpandingStarted(), onToolbarCollapsingStarted(), onToolbarExpanded() and onToolbarCollapsed()methods of the JellyListener to get all the animation events.

Hope you like this tutorial!!!