Creating WhatsApp Input Field
UI which creates a sense of control, familiarity, and reliability amongst the user is called a consistent UI. Whatsapp is the best example of it.
In this story, I’ll be covering the implementation of the WhatsApp Input Field.
Understanding Views
Here i have used Constraint layout as a root layout and then edit text, Image Buttons, and floating action buttons.
You can use card view and then constraint layout to get default shadows and circular corners. But i wanted to reduce no of Views, so i created one drawable file with circular corners and shadows at the borders and then set it to constraint layout
Understanding Transitions
Whenever you start typing in the input field, the camera menu fades, and the “attach” pin slide towards the right. I have use Transition API for creating this subtle transition.
Demonstrating the camera disappear action with & without transition
activity_main.XML
MainActivity.java
Download the complete source code from my GitHub repo
