Animate search bar to toolbar android

Question

I'm trying to build a search bar similar to Flipboard. This search bar animates from below the toolbar to cover the toolbar. This GIF shows it better than I can explain:

Does anyone know if this is standard Material Design? And if so, are there any libraries or standard widgets I can use to do this? Soundcloud also does this so just wanted to ask if there was anything already out there. If not I'll just have to implement it myself.

Thanks!

Check this library out: https://github.com/lapism/SearchView — notdrone, Jul 11 '16 at 08:27

score 0 · Answer 1 · answered Oct 06 '16 at 23:28

To solve this I'd recommend looking into android.support.v4.app.ActivityOptionsCompat.makeSceneTransitionAnimation().

Here are the snippets from the code I remember:

I have ActivityA which contains an EditTextA. The EditTextA has a View.OnClickListener:

View.OnClickListener() {
        @Override
        public void onClick(View view) {
            ActivityB.launch(getActivity(), view);
        }
}

which when invoked calls a static method: ActivityB.launch(Activity a, View transitionView):

public static void launch(Activity activity, View transitionView) {
    ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
            activity, transitionView, EXTRA_TRANSITION_VIEW);
    Intent intent = new Intent(activity, ActivityB.class);
    ActivityCompat.startActivity(activity, intent, options.toBundle());
}

The code above is basically creating an Intent that will launch ActivityB. That Intent also includes a Bundle (options.toBundle()) which has a bunch of stuff, including the view that is transitioning from ActivityA to ActivityB. In my case this is the EditTextA.

In ActivityB.onCreate() all we need to do is "connect" that view to the new view it's transitioning to. So in my case, EditTextA is transitioning to another EditTextB that lives in ActivityB.

ActivityB.onCreate() {
    ....
    mEditTextB = (EditText) findByViewId(...);
    ViewCompat.setTransitionName(mEditTextB, EXTRA_TRANSITION_VIEW);
}

If I remember everything correctly that should be it :).

Animate search bar to toolbar android

1 Answers1