App Architecture Study: Whatsapp - A Look into the Design

With more than 1 billion users in over 180 countries, Whatsapp is one of the apps that users voluntarily install in their phones. What started as a simple messaging app, that used your phone’s internet to send messages, evolved into an app that you can use to share photos, videos & documents, send voice messages and make calls.

As the app evolved, its design evolved along with it. From a simple list of messages, it incorporated Tab Layout and further transitioned to incorporated Material Design along with many of its new design elements. This was evident from the collapsing toolbar and the new Tab Layout.

Let us have a further look into the design of Whatsapp and see how it best made use of the newer design elements of the Material Design library.

Whatsapp Home:

The Main Activity of Whatsapp is enclosed in a Coordinator Layout with App Bar Layout and Material Design Toolbar. This is evident from the way the toolbar hides on scroll. Further, the main sections of the app are Fragments in a TabLayout with View Pager. Fragments are used for each of the tabs:

• Calls
• Chats
• Contacts

Chats – List of Private/Group Chats:

A Recycler View is used to display the list of chats, both private & group, in the Chats Fragment. Each element of the RecyclerView display:

• Image (CircleImageView),
• Chat Title (TextView),
• Most recent message (TextView),
• TimeStamp (relative to current time), and
• No of unread messages, if any (TextView with circle drawable bg)

Contacts List:

The Contacts list fragment also uses a RecyclerView to display a list of Contacts with images and status and type of mobile no (based on contact saved).

Call list Element:

The Contacts list fragment also uses a RecyclerView to display a list of recent calls with images and time of call (relative to current time).

Each element of the call list also has a Button (image of phone) to return the call. On recieving or making the call, the screen fills up to display a layout just like a normal call. The entire curent call design looks like one seamless layout.

The elements of the layout blend together to give a smooth look and its resemblance to a normal Android call gives the feel of a phone call rather than a call over the web.

Message view:

The Message View displays the messages received and sent in a RecyclerView. The View is designed to receive messages in the form of:

• Text
• Image
• Audio
• Video
• Location

Disclaimer: The views and opinions expressed in this article are those of the authors and do not reflect the official analysis of Whatsapp. This article is a personal analysis based on a visual interpretation on the architecture of the app.