Guide to building UI close to WhatsApp

  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 —
  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.
<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 TextViews, one image and what else?
TextView chatDescriptionText =(TextView)rowView.findViewById(R.id.chat_description);chatDescriptionText.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_photo_camera, 0, 0, 0);

--

--

--

Product | Software Engineer(AR/VR) | Get 100+ AR/VR Resources — https://knightcube.gumroad.com/l/arvr-resources | https://linktr.ee/knightcube

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Creating Kubernetes (k8s) cluster by joining Google Cloud Platform (GCP) Virtual Machines

Rate Limiting in Golang

The Battle of Zaps: Opportunities in the API Integration Space

Redis Master Slave Configuration and Tested in Spring Boot

If I Could Only Write 6 Programming Language Articles in my Life, I’d Write These

Create a Ruby on Rails 5.1 application with Webpack, React 16, and React Router.

Integrating AWS WAF with AWS Application Load Balancer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajat Kumar Gupta

Rajat Kumar Gupta

Product | Software Engineer(AR/VR) | Get 100+ AR/VR Resources — https://knightcube.gumroad.com/l/arvr-resources | https://linktr.ee/knightcube

More from Medium

How to Create an App Like InstaCart? Features & Tech Stack

How to Create an App Like InstaCart? Features & Tech Stack

Simplify Android UI with Jetpack Compose

Top 10 Multilingual Content Management Systems

App personalization to reach potential Customers