Guide to building UI close to WhatsApp

A layout challenge that was a part of the Google Scholarship 2018 Program. In this competition we had to select any popular application like Whatsapp, Gmail, Instagram and try to recreate exact replica of the layout. Backend code was not neccessary. Just cloning would suffice.

This is the only screen that we are gonna build!

Please remember i will definitely give a link to the github repo but please try to apply these steps yourselves. You may use the github repo if you are stuck but again please TRY IT YOURSELF first following the steps. I did the following steps while building the UI like the above one.

Prerequisites:

1. Download this extension — https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en . This extension lets you pick colors from the page that you browse. Its easy to use and we will be using it to get those beautiful green shades used in whatsapp
2. Please use the Basic Activity template for this tutorial. It saves you time. I use it in every project and edit it as required. Go to Files>New>New Project>Make Changes till you reach this screen —