Hi folks, this is the second article of a series that I am working in to show how to make simple, but beautiful, micro interaction. You can see the first one here and the third one here. The complete code of this tutorial can be found here:

https://github.com/leandroBorgesFerreira/buttonMorphToFormAndroid

Interactions between views take some time to get good, but those are the things that make a user fall in love with your product. There is a quote about the price of design that I really like:

“If you think good design is expensive, you should look at the cost of bad design.” –Ralf Speth

So expend some time to get your UI polished can be a really good idea (Just don't forget to be realistic about your deadlines, ok?). So, let's learn how to make an animation that will make your users want to fill your forms.

Part 1 — Let's make the skeleton of the project.

So, before make any animation we need to create our layout with the buttons and forms that are going to be animated. Let's create the XML for our first button. This is our button:

You must be thinking: "All of this just to create a button?? o.O". Remember that we are going to morph this button into a form, so we need to put all the views inside the button. But let's understand this layout:

1 — The CardView acts as a decorator. It gives rounded corners o the button and act as the button/form container. This is the view that is going to be animated.

2 — The button with id login_btn is the one that will listen for clicks.

3 — The LinearLayout has all the views of the form.

4 — All the views of the form are with visibility GONE. This way, for now, our form is nothing more than just a button. When the the visibility of our Views changes, we get the button with the animation at the top of this article.

So, with the views hidden, we have:

But if we show all the views, we get: