Creating a Viber layout part 1

This tutorial contains 6 parts that will walk you through step by step how to create a duplication of the Viber using a layout that is made of other components that will be added at each part.

This is the call layout from the Viber app. We will create one that looks very simpler to this. In fact ours will be more cool.

Viber layout

This is what we will end up with when we are done with this tutorial.

duplicate viber layout

At the end of this part you would have completed the dialer pad and your app will look like this. Nothing too fancy at the moment. But stay with me it will get better.

dialer pad layout

Create a new Project

Create a new android project using minimum API 15 and select empty activity. I called my project Viber.

Setup all the resources

Before we can create our chat properties layout we must first grab all the icons and the colors, that we will use to create the finished layout.

Download all the icons

Download from google icon design website design icons the following:






Extract the contents of each one, go into the android directory copy and paste all the drawable folders into the res directory in your android studio project view. See my blog post on here to see to do this if you are not sure.

Create the colors

In values/colors.xml I have used the default colors. However, you can go to material palette and download your own colors. I have added an additional color for the dial pad called colorDialer. This is a bit special as the first 2 digits #993F51B5 contain the alpha channel and we will be be using this alpha channel a lot in all parts of this tutorial. Basically the lower the number 00 means total transparency and the higher the number 99 means less transparency.

That is all the colors we need for this part 1.

Creating the borders surrounding the buttons

Leave a Reply

Your email address will not be published. Required fields are marked *