Array
(
    [0] => WP_Term Object
        (
            [term_id] => 19
            [name] => Technology
            [slug] => technology
            [term_group] => 0
            [term_taxonomy_id] => 19
            [taxonomy] => category
            [description] => That technology stuff and post you can be updated with current world with some great information that you never know.
            [parent] => 0
            [count] => 28
            [filter] => raw
            [cat_ID] => 19
            [category_count] => 28
            [category_description] => That technology stuff and post you can be updated with current world with some great information that you never know.
            [cat_name] => Technology
            [category_nicename] => technology
            [category_parent] => 0
        )

)
///////////

Add Android Jelly Toolbar Animation

1
311
Android Jelly Toolbar Animation
Android Jelly Toolbar Animation

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:

Demo of Android Jelly Toolbar Animation
Demo of Android Jelly Toolbar Animation

It looks tasty, doesn’t it?

1Requirements

  • Android SDK 16+

2Usage

Add to your root build.gradle:

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

Add the dependency:

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

3How 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!!!

Share your thoughts

1 COMMENT

Loading Facebook Comments ...
Loading Disqus Comments ...