How can I turn my makeSceneTransitionAnimation to a circle, and not rectangle?

Question

I am currently trying to create a circular transition between my FAB and another Activity.

From what I understodd in the documentation, I should use makeSceneTransitionAnimation in a similar way to this:

public void onFabClicked(View v){
    try {
        Intent intent = new Intent(this, SearchActivity.class);
        ActivityOptions options = ActivityOptions
                .makeSceneTransitionAnimation(this, v, "reveal");
        startActivity(intent, options.toBundle());
    } catch (Exception e) {
        // makeSceneTransitionAnimation not supported, maybe a check of SDK level is enough to avoid catching an error?
        Intent intent = new Intent(this, SearchActivity.class);
        startActivity(intent);
        e.printStackTrace();
    }
}

Unfortunately, the current animation displays a rectangle during the animation.

How is it possible to turn this into the beautiful circular reveal that we love in Lollipop?

Thanks.

EDIT:

I am trying to achieve this (except that the color should be fullscreen, but you got the point..)): enter image description here

What I actually get:

enter image description here

do you mean that the fab is shared between the 2 activities in the way it's being reveled is from rectangle to circular? can you give an example to the animation that you are trying to achieve (app)? — royB, Mar 07 '15 at 08:35
the FAB should turn into the activity background. I hope the screenshots I added are better... — Waza_Be, Mar 07 '15 at 09:41
I wrote a sample app that does something similar. You can look at it [here](https://github.com/alexjlockwood/activity-transitions). — Alex Lockwood, Mar 08 '15 at 02:29
Also, you're really going to need to post more of your code... I see no indication that you attempted to implement a circular reveal in your post. — Alex Lockwood, Mar 08 '15 at 02:30
There are some helpful blog posts about advanced activity transitions [on George Mount's blog](https://halfthought.wordpress.com/) as well. — Alex Lockwood, Mar 08 '15 at 02:34
Hello, and many thanks for the answer. I indeed started with George blog, but maybe I did something wrong with xml, and everything is not correctly connected. Will give it more try — Waza_Be, Mar 08 '15 at 07:35

Waza_Be · Accepted Answer · 2015-03-08T09:22:34.917

OK, I used this as an example: it's working fine:

Code on Github from saulmm

But.... Yes, that's simple and works fine, but this is not really the most efficient way to achieve the effect, I guess. Adding an extra view to your layout and playing with visibility is maybe not the optimal way.

It had a lot of trouble implemented George Mount's solution. But as this solution is written by a Software Engineer at Google, working in the Android UI Toolkit team, and suggested by Alex, an other Google engineer, I guess that I should spend more time with it as it doesn't require an extra view in my layout...

The second one is a little bit harder for me, but will work on it.

In any way, the problem is solved.

How can I turn my makeSceneTransitionAnimation to a circle, and not rectangle?

1 Answers1