What is the best way to animate the shape of a

Surface

? Should I use a custom shape with

createOutline

or create a custom surface composable with

Canvas

?

What are you trying to animate? If it's something trivial such as corners width, surface size or color then that's can be done easily with animateFooAsState API.

I 'm trying to create something like this https://dribbble.com/shots/10004383-Bottom-Navigation-Tab-Bar-concept-for-Zappfresh-Mobile-App

Here's how I'm doing it. https://github.com/mxalbert1996/compose-shared-elements/blob/main/shared-elements/src/main/java/com/mxalbert/sharedelements/SharedMaterialContainer.kt#L234

So you are creating a new shape for each fraction of your animation. That's one solution but you can also do the same thing if you create a custom Surface and use your fraction there. What do you think is the best solution (or the recommended way) between these two?

I think creating a shape for each fraction is fine. note that Shape implementations should be immutable, so you have to recreate a shape object if you changed something which describes the shape

If you know the specific type of the shape then of course you can draw it manually but it is impossible at least in my use case as you don't know how the shape is drawn (i.e. how the outline is created). Even if you only support a subset of the shapes, you need a lot of boilerplate code.