Animations in Android
  • Introduction
  • About us
  • Basic animations
  • ConstraintLayout: Core concepts
  • I like to move it, move it!
  • Step 1
  • Step 2
  • Step 2: Solution
  • Step 3
  • Step 3: Solution
  • Step 4
  • Step 4: Solution
  • Step 5
  • Step 5: Solution
  • Step 6
  • Step 7
  • Step 7: Solution
  • Step 8
  • Step 8: Solution
  • MotionLayout
  • Party time!
  • Shared element transition
  • Adding a RecyclerView
  • Activity transitions
  • Adding a second Activity
  • Adding the shared element transition
  • You made it!
  • VectorDrawable
  • VectorDrawable: Solution
  • Using the VectorDrawable
  • RecyclerView item animation & self-contained MotionScene
  • Creating a self-contained MotionScene
  • Creating a self-contained MotionScene : Solution
  • Adding animations in the RecyclerView items: Step 1
  • Adding animations in the RecyclerView items: Step 2
  • RecyclerView animations step 2: Solution
  • Physic based animations
  • Implement a spring animation
  • Spring animation: Solution
  • The finish line!
Powered by GitBook
On this page

Step 5

Adding the surrounding images

PreviousStep 4: SolutionNextStep 5: Solution

Last updated 6 years ago

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

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!

For a circle ImageView you can use a library like .

this