Step 5

Adding the surrounding images

This is how your app will look like when we finish this step:

Before moving on with adding the new views, go to the styles first and change the theme parent to Theme.AppCompat.Light.NoActionBar

Now, make sure to go step by step for this one. It's easier to first try to add the "sun" view. The color I used is #FFB300 and it's 400x400dp

Then try adding one of the paws. Note that while we don't care that much how near or far they will be from Alex, we do need them to be mirrored.

Try on your own first, especially for the paws. If you get stuck, see the hints below.

HINTS

For a circle ImageView you can use a library like this.

If ImageViews are overlapping trying moving them up or down in your code You'll be surprised!

Use the rotation attribute to rotate the paws

You don't need all 4 constraints for each view; 2 is enough

For the top 2 paws, you need to have the same top margin. The start margin and the end margin are also the same.

Give up not! Keep trying before rushing to the next page. The force is with you!

Last updated