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.
This is what we will end up with when we are done with this tutorial.
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.
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:
ic_mic_off_white_48dp
ic_pause_circle_outline_white_48dp
ic_people_white_48dp
ic_phone_white_48dp
ic_volume_white_48dp
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.