Creating a Viber background part 5

Viber Background using Layer-list Part 5

This part will focus on creating the background for the viber app. This will consist of creating a layer-list and shape. We will also use a background image downloaded from the Internet.

If you haven’t completed the other parts you can get them here part1 part2 part3 and part4. However, all parts are self-contained so you can complete them in any order.

You can download this from my github. Checkout part5

This is what the app will look like after you have completed this part.

layer-list

Getting the colors for the background

Go to google colors and scroll down to the indigo color. We will use one of these colors to for our background. Copy and paste the following in your values/color.xml file.

Have added some transparency to the alpha channel so that the gradient will start solid and then become a little transparent at the end (#993F51B5). This creates the affect we need to resemble the viber app.

Creating the shape

Create a new drawable resource file called inner_shape.

layer-list

Here we are just creating a basic shape where the default is rectangle. We add our curved corners and our gradient for the shape. Copy and paste the code into inner_shape.

Creating the background shape

For this we will use an another type of drawable caled the layer-list. You can read more about the layer-list here.

“Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top”.

Create a new layer-list drawable resource called viber_backround

layer-list

Margins for top, right, left, and bottom so we can see our background beneath. Copy and paste the following into your layer-list.

Putting it all together

Now all we have to see our background is set the background of activity_main to display it. Add the following into your activity_main.

Now when you run your app should see the following. This will be the background that all our views will be displayed on to make up the in-call viber app screen.

layer-list

This concludes part 5. In part 6 we will put everything we have created in the other parts to make the viber app complete. This app will also be configured to work on different screen sizes and densities.

Leave a Reply

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