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 —

Steps:

1. In your colors.xml file add the colors. You can fetch these colors by opening up a whatsapp image like this and then picking the colors using the extension i gave in step 1. [Google search “whatsapp layout android” if you want some other image]
2. The first thing in the screenshot above is getting the tabs. Now incase you dont know how to make those follow this tutorial. This is where i learnt how to make tabs the first time. I still refer to it because i keep forgetting the steps. Each time you refer to a tutorial you are gonna get faster at implementing the concepts covered in that tutorial provided you practice it many times which will come when you start building small projects.[Google search “how to make tabs in android”]
3. Now you might notice that you need to make the search icon as well as the three dots on the right hand side.

Click on Vector Asset

Search for the “search” icon and click ok. Name it whatever you want.

For the search icon to appear in the right hand top corner you need to add it as an item in the menu.xml file like this -

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.example.scholars.whatsappclone.MainActivity">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
    <item
        android:orderInCategory="100"
        android:title="Search"
        android:icon="@drawable/ic_search"
        app:showAsAction="ifRoom" />
</menu>

4. So now the app looks like this -

Try to find the icon in the FAB(Floating Action Button) yourself following the same steps in step 3. Remember there is always a FAB in Basic Layout template. Hence you just need to edit a little. Just change the background and the src attributes and you are done.

5. Now you need to add the contents. This can be done with the help of Custom Adapter and ListView for this particular tutorial. However RecyclerView would have been a better choice. Since we are concentrating on the UI lets learn how to do it with the help of ListView.

6. Since we want to show a list of chats with varied texts take a look at this tutorial and implement the adapter yourself. You simply need to read till the 4th topic. This is where i learnt how to make a custom adapter for the first time and i was successful. You may go beyond that if you find it interesting and you want to satisfy your hunger for knowledge in this concept.

4 TextViews, one image and what else?

7. Now you need to make the design of each item in the ListView. There are many ways to do it. Take 3 arrays of type String — the chatNames,the chatDescriptions, and the chatDates. (Rest of the things can be hardcoded unless you are making a fully fledged production level app. That requires steps like connecting to database, fetching things from an api, making POJO classes etc.)

8. You need to pay attention to the details here now. Look closely. You will see a divider(very light shade). Also observe when a particular tab is selected it has an indicator below it. Experiment and use your best judgement as to how much width and which attribute can be used to generate the same dimension. Go to the design tab if you cant remember the attribute. Once you are there go the list of attributes on the right and see which one you should be using. Generally things like these tend to get missed out by users but once you see it, it will make a huge difference. You will get into the habit of spotting these small things with practice. Then you will start using these to make your app stand out or rather Brandify your app like using custom logos

Its always the little things that matter alot

You can use the github link provided at the end of this article to view the code. But again first try using basic layouts like Relative and Linear which by the way are the only layouts that you need for this design. Think about the margins of each textview. Think about the colors of each textview. Think how you can draw the divider. If you fail, search in Google. If you fail yet again then go the link that i have given.

9. Lastly to make the dates and the small message notification you can use your own logic using Random class. Regarding the tick and the camera image beside the description of the chat you need to use the drawableLeft(or drawableStart attribute) in the textview of the description. You can set it programmitically like this —

TextView chatDescriptionText =(TextView)rowView.findViewById(R.id.chat_description);chatDescriptionText.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_photo_camera, 0, 0, 0);

10. Thats all. Try implementing the other screens as well . You will gain more confidence. There will be a time when you will believe that you can actually search and apply anything you want to.

Happy Coding!!

https://github.com/knightcube/WhatsappUIDesign/tree/masterStart