Day: October 19, 2022

Taking what we already learned from the previous tutorials about drawing custom shapes and animating along elements along a Path. In this tutorial, we will combine what we learned about animation so far to create an alternating Yin Yang symbol.

To those unfamiliar with the Yin Yang symbol, let us quickly visit the anatomy of the Yin Yang symbol itself.

Based on the information from Wikipedia, in the Yin Yang symbol, Yin refers to the dark side, while Yang refers to the brightside.

For the rest of the tutorial, the following terms will be used:
Yin: the dark side.
Yang: the bright side.
Yin Dot: the black dot contained in the Yang side.
Yang Dot: the white dot contained in the Yin side.
Yin Yang Curve: the S-shaped curve that separates the Yin and the Yang.

At the end of the tutorial, you would have learned:

1. How to animate an alternating Yin Yang symbol.

1. Android Studio. The version used in this tutorial is Android Studio Dolphin | 2021.3.1.

1. Intermedia Android.
2. Basic Android animation.
3. Custom Drawable.
4. Custom Path.

To follow along with the tutorial, perform the steps below:

1. Create a new Android project with the default Empty Activity.

2. Replace the code inside activity_main.xml with the code below.

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       android:background="@color/teal_200"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context=".MainActivity">
   
       <ImageView
           android:id="@+id/yin_yang_background"
           android:layout_width="match_parent"
           android:layout_height="0dp"
           app:layout_constraintDimensionRatio="1:1"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent"
           tools:srcCompat="@tools:sample/backgrounds/scenic" />
   
    </androidx.constraintlayout.widget.ConstraintLayout>

The attributes

android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"

on the ImageView will constraint its height equal to its width.

Normally, we can draw both the Yin and the Yang manually, but we can actually take a shortcut and skip drawing the complex teardrop-shape for the Yang entirely. To save time, we paint the entire background with Color.WHITE to make it the Yang. For the Yin, we can simply draw it with Color.Black.

Because we only have to draw the Yin, we also only have to animate the Yin side later on.

Because the Yang side is simply a circular background with one solid color, we will start with it first.

1. Replace your onCreate() with the method below.

    override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   
       val yinYang = findViewById<ImageView>(R.id.yin_yang).apply {
           setImageDrawable(YinYang())
       }
    }

2. Create your custom Drawable called YinYang with the code below.

    class YinYang: Drawable() {
       private val yangPaint = Paint().apply {
           color = Color.WHITE
       }
   
       override fun draw(canvas: Canvas) {
           drawYang(canvas)
           drawYin(canvas)
           drawYangDot(canvas)
           drawYinDot(canvas)
       }
   
       private fun drawYang(canvas: Canvas){
       }
   
       private fun drawYin(canvas: Canvas){
       }
   
       private fun drawYangDot(canvas: Canvas){
       }
   
       private fun drawYinDot(canvas: Canvas){
       }
   
       override fun setAlpha(alpha: Int) {
           // no op
       }
   
       override fun setColorFilter(colorFilter: ColorFilter?) {
           // no op
       }
   
       @Deprecated("Deprecated in Superclass")
       override fun getOpacity() = PixelFormat.OPAQUE
    }

3. Because the drawing for the Yang, Yin, Yin Dot, and Yang Dot can get pretty complex, I have separated each part into its own private functions. We will work on them one by one.

4. Notice the yangPaint instance variable at the top of the class definition. We will use it to draw both the Yang and the Yang Dot.

5. The Yang must be a perfect circle with the radius as wide as half the width of its container. To draw the Yang, we use the implementation below.

    private fun drawYang(canvas: Canvas){
       canvas.drawCircle(
           bounds.exactCenterX(),
           bounds.exactCenterY(),
           bounds.exactCenterX(),
           yangPaint
       )
    }

1. Inside each Drawable implementation, the bounds are available via getBounds() (Java) or just the property syntax bounds (Kotlin). This bounds property contains the coordinates of the Drawables container, such as the center or the top, left, right, bottom coordinates. Using the coordinates of the exact center of the container bounds, we were able to calculate the circle radius, and (x,y) center, which were provided to the drawCircle() method.

We are completed with the first part of the tutorial, please continue on part two here.

This is the second part of a series. The first part can be found here.

Now that we have the Yang drawn, we will continue onto the Yin.

1. Add the Paint for the Yin into the YingYang class. We will use a stroke style initially to draw. When are happy with the drawing, we can comment it out to make the code draw with the fill style (default).

    private val yinPaint = Paint().apply {
       color = Color.BLACK
       style = Paint.Style.STROKE
       strokeWidth = 10f
    }

2. There are 3 arcs that we must draw in total for the teardrop-shaped Yin. The image below shows the arcs in order and different colors to make it easy to understand.
   

3. The green arrows show the flow of the contour.

4. To draw the first arc, use the code below.

    private fun drawYin(canvas: Canvas){
       val yinPath = Path().apply {
           addArc(
               bounds.right * 0.25f, // 0.25 = full arc visible. 0.5 = arc invisible
               bounds.exactCenterY(),
               bounds.right * 0.75f, // 0.75 = full arc visible. 0.5 = arc invisible
               bounds.bottom.toFloat(),
               270f,
               -180f
           )
       }
   
       canvas.drawPath(yinPath, yinPaint)
    }

5. There might be too much going on here from a single arc. Though I expected that you already know how to draw custom shapes, the picture below attempts to describe it.

6. Whenever drawing an arc or a circle, it is best to visualize an invisible rectangle in mind. The green square does not actually appear in the app; it is only there to help with visualization. Using the bounds of the parent container, we calculate the coordinates for the rectangle.
7. The starting angle of the circle is 270 degrees and sweeps backwards 180 degrees, creating the arc in the picture. As far as the Path class is concerned, the location of the 0 (zero) degree on a circle is the 3 o'clock position on the wall clock. If the sweep angle is positive, the arc draws clock-wise; if the sweep angle is negative, the arc draws counter clock-wise. In our code snippet, we start at the 12 oclock position and draws backwards to the 6 oclock position.
8. Now let us move on to draw the second arc.

    private fun drawYin(canvas: Canvas){
       val yinPath = Path().apply {
           addArc(
               bounds.right * 0.25f, // 0.25 = full arc visible. 0.5 = arc invisible
               bounds.exactCenterY(),
               bounds.right * 0.75f, // 0.75 = full arc visible. 0.5 = arc invisible
               bounds.bottom.toFloat(),
               270f,
               -180f
           )

           arcTo(
               0f,
               0f,
               bounds.right.toFloat(),
               bounds.bottom.toFloat(),
               90f,
               -180f,
               false
           )
       }

       canvas.drawPath(yinPath, yinPaint)

    }

9. For the second arc, it continues the first arc, so it starts at 90 degrees and then sweep backwards 180 degrees.

10. Finally, we draw the third and last arc.

    private fun drawYin(canvas: Canvas){
       val yinPath = Path().apply {
           addArc(
               bounds.right * 0.25f, // 0.25 = full arc visible. 0.5 = arc invisible
               bounds.exactCenterY(),
               bounds.right * 0.75f, // 0.75 = full arc visible. 0.5 = arc invisible
               bounds.bottom.toFloat(),
               270f,
               -180f
           )

           arcTo(
               0f,
               0f,
               bounds.right.toFloat(),
               bounds.bottom.toFloat(),
               90f,
               -180f,
               false
           )

           arcTo(
               bounds.right * 0.25f,
               0f,
               bounds.right * 0.75f,
               bounds.exactCenterY(),
               270f,
               180f,
               false
           )
       }

       canvas.drawPath(yinPath, yinPaint)
    }

11. The third arc would continue where the second arc ended, which is at the top of the Yin Yang. It starts at 270 degrees and sweeps forward 180 degrees.

12. As the last step, comment out the stroke style and width for the yinPaint.

       private val yinPaint = Paint().apply {
           color = Color.BLACK
    /*        style = Paint.Style.STROKE
           strokeWidth = 10f*/
       }

Once the fill style takes effect, we have our Yin drawn like below. Since we do not have to draw the Yang teardrop, we are technically done with the Yin and the Yang.

The Yang Dot is the white dot contained inside the Yin. When it does not need to be animated, it is quite simple to draw.

private fun drawYangDot(canvas: Canvas){
   canvas.drawCircle(
       bounds.exactCenterX(),
       bounds.bottom * 0.75f,
       bounds.right * 0.07f,
       yangPaint
   )
}

We can calculate the position of the Yang dot by using container bounds as well.

For the Yang Dots radius of bounds.right * 0.07f, I simply chose what feels right to me, not too big and not too small.

Using a similar tactic to how we drew the Yang Dot, you can draw the Yin Dot using the code below.

private fun drawYinDot(canvas: Canvas){
   canvas.drawCircle(
       bounds.exactCenterX(),
       bounds.bottom * 0.25f,
       bounds.right * 0.07f,
       yinPaint
   )
}

We are completed with the second part of the tutorial and finished drawing the Yin Yang. If you are interested in animating it, please continue to part three here.

Welcome to part three of the tutorial; part two can be found here.

For this animation, I have chosen to redraw the YinYang Drawable at each frame. This means recreating the YinYang object with different constructor parameters on every frame (the current YinYang implementation has a zero-arg constructor).

Do you recall that our Yin teardrop contains three arcs in total? The first step to animate our Yin Yang is to isolate the parts that need to be animated. You can go ahead and comment out the code that draws the second and third Yin arcs, as well as the code that draws the Dots.

Your drawYin() method should look like the code below.

private fun drawYin(canvas: Canvas){
   val yinPath = Path().apply {
       addArc(
           bounds.right * 0.25f, // 0.25 = full arc visible. 0.5 = arc invisible
           bounds.exactCenterY(),
           bounds.right * 0.75f, // 0.75 = full arc visible. 0.5 = arc invisible
           bounds.bottom.toFloat(),
           270f,
           -180f
       )

/*            arcTo(
           0f,
           0f,
           bounds.right.toFloat(),
           bounds.bottom.toFloat(),
           90f,
           -180f,
           false
       )

       arcTo(
           bounds.right * 0.25f,
           0f,
           bounds.right * 0.75f,
           bounds.exactCenterY(),
           270f,
           180f,
           false
       )*/
   }

   canvas.drawPath(yinPath, yinPaint)
}

Your app now should look like the screenshot below, with the first Yin arc the only thing being drawn.

To animate the first arc to invert on itself, we need to perform three main tasks:

1. As the animation progresses, compress the arc over time until its width reaches zero. You can compress the arc by moving its top left and top right coordinates together.
2. When its width is at zero, invert the sweep angle as well.
3. Animates its width back to the original width.

Let us try some simple hard-coded samples first before using it in an animation. Comment out the code for your first arc and try the one below.

val isInverted = false // Keeps track of whether the drawable is inverted
val animatedFraction = 0.25f // animation progress
val animatedValue = 0.10f

addArc(
   bounds.right * (0.25f + animatedValue), // 0.25 = full arc visible. 0.5 = arc invisible
   bounds.exactCenterY(),
   bounds.right * (0.75f - animatedValue), // 0.75 = full arc visible. 0.5 = arc invisible
   bounds.bottom.toFloat(),
   270f,
   if (animatedFraction < 0.5f)
       if (isInverted) 180f
       else -180f
   else
       if (isInverted) -180f
       else 180f
)

The code above produces the following image.

I highly recommend you to play around with isInverted, animatedFraction, and animatedValue to get a feel of the code.

Below are some sample runs.

val isInverted = true // Keeps track of whether the drawable is inverted
val animatedFraction = 0.25f // animation progress
val animatedValue = 0.10f

val isInverted = false // Keeps track of whether the drawable is inverted
val animatedFraction = 0.85f // animation progress
val animatedValue = 0.20f

Once you are comfortable with the code, move the three variables into the class constructor.

class YinYang(
   private val animatedValue: Float,
   private val isInverted: Boolean,
   private val animatedFraction: Float = 0f
): Drawable() {

Also, remove the commented out code for the first arc to keep your code clean. We do not need it anymore.

In onCreate(), use the code below to create an animator.

val yinYang = findViewById<ImageView>(R.id.yin_yang).apply {
   setImageDrawable(YinYang(0f, isInverted))
}

yinYang.setOnClickListener {
   ValueAnimator.ofFloat(0f, 0.25f, 0f).apply {
       duration = 2_000L
       addUpdateListener { animator ->
           yinYang.setImageDrawable(
               YinYang(
                   animator.animatedValue as Float,
                   isInverted,
                   animatedFraction
               )
           )
       }
       doOnEnd {
           isInverted = !isInverted
       }
       start()
   }
}

In your MainActivity, add the isInverted property.

private var isInverted = false

Our arc animation depends on the fractions from 0 -> 0.25 for the compress animation, and then from 0 -> 0.25 for the inflate animation. So we will give it that value as the animation fraction goes from 0 -> 1. In summary, this means;

1. At animation fraction zero, we pass zero as the animated value as well.
2. At animation fraction 0.25, we pass in 0.125 as the animated value. This is when arc compression is happening.
3. At animation fraction 0.5, we pass in 0.25 as the animated value. Arc finishes compressing at this point.
4. At animation fraction 0.75, we pass in 0.125 as the animated value. This is when arc inflation is happening.
5. At animation fraction 1, we pass in 0.25 as the animated value. Arc finishes inflating.

When we run the code, the app should behave similarly to the animation below.

The second arc can be kept as-is (it does not move anyway), so you can remove it from the commented out section. After the second arc is enabled, your animation should behave similarly to the code below.

The third arc needs to be changed, so you can remove the old commented out version and add the new version below. It is very similar to the first arc, only the sweep angles are different.

arcTo(
   bounds.right * (0.25f + animatedValue),
   0f,
   bounds.right * (0.75f - animatedValue),
   bounds.exactCenterY(),
   270f,
   if (animatedFraction < 0.5f)
       if (isInverted) -180f
       else 180f
   else
       if (isInverted) 180f
       else -180f,
   false
)

After adding the third arc, we complete the Yin

The current version of the Yang Dot is no longer good for our animation, so you can remove it from your code.

To animate the Yang Dot circularly moving up and down with the Yin Yang animation, we need to do three main things:

1. Draw an arc with the starting position as the current position of the specific Dot. The arc must end with the ending position of the Dot for the current animation. The arc acts as a guide/ruler for the Dot.
2. Find the position on the arc at a specific animation fraction.
3. Use that position to draw the Yang Dot.

In the drawYangDot() function, add the code below into it to draw an arc. Note that this arc is only visible now for easy visualization. It should not be drawn on the screen at the final step.

val yangDotPath = Path().apply {
    addArc(
        bounds.right * 0.25f,
        bounds.bottom * 0.25f,
        bounds.right * 0.75f,
        bounds.bottom * 0.75f,
        if (isInverted) 270f
        else 90f,
        if (isInverted) 180f
        else -180f
    )
}

//Use for debugging
canvas.drawPath(
    yangDotPath,
    Paint().apply {
        color = Color.RED
        style = Paint.Style.STROKE
        strokeWidth = 10f
    }
)

When we run the app, we can see it in red below.

Also, inside drawYangDot(), append the code below to draw the Yang Dot.

// Finds current position on arc at animation frame
val yangDotPosition = FloatArray(2)
PathMeasure(yangDotPath, false).apply {
   getPosTan(length * animatedFraction, yangDotPosition, null)
}

canvas.drawCircle(
   yangDotPosition[0],
   yangDotPosition[1],
   bounds.right * 0.07f,
   yangPaint
)

To find the position of a Path, you can use PathMeasure like above.

You can now review the animation and then remove the call to draw the arc afterwards.

For the Yin Dot, follow the same strategy used for the Yang Dot.

private fun drawYinDot(canvas: Canvas){
   val yinDotPath = Path().apply {
       addArc(
           bounds.right * 0.25f,
           bounds.bottom * 0.25f,
           bounds.right * 0.75f,
           bounds.bottom * 0.75f,
           if (isInverted) 90f
           else 270f,
           if (isInverted) 180f
           else -180f
       )
   }

   //Use for debugging
   canvas.drawPath(
       yinDotPath,
       Paint().apply {
           color = Color.BLUE
           style = Paint.Style.STROKE
           strokeWidth = 10f
       }
   )

   val yinDotPosition = FloatArray(2)

   PathMeasure(yinDotPath, false).apply {
       getPosTan(length * animatedFraction, yinDotPosition, null)
   }

   canvas.drawCircle(
       yinDotPosition[0],
       yinDotPosition[1],
       bounds.right * 0.07f,
       yinPaint
   )
}

Remove the debug call to see the almost final result.

To animate from one color to another based on animation fraction, we can use the method blendARGB() from the class ColorUtils. Replace your yinPaint and yangPaint with the new versions below if you want your halves to alternate in color as well.

private val yinPaint = Paint().apply {
   color =  if (isInverted) {
       ColorUtils.blendARGB(
           Color.WHITE,
           Color.BLACK,
           animatedFraction
       )
   } else {
       ColorUtils.blendARGB(
           Color.BLACK,
           Color.WHITE,
           animatedFraction
       )
   }
}

private val yangPaint = Paint().apply {
   color =  if (isInverted) {
       ColorUtils.blendARGB(
           Color.BLACK,
           Color.WHITE,
           animatedFraction
       )
   } else {
       ColorUtils.blendARGB(
           Color.WHITE,
           Color.BLACK,
           animatedFraction
       )
   }
}

Congratulations, we have learned how to animate an alternating Yin Yang symbol in this series of tutorials. The full project code can be found at https://github.com/dmitrilc/DaniwebAnimateAlternatingYinYangSymbol.

Welcome to part two of the tutorial. Let us continue to learn how to animate views along a Path. Part one can be found here.

Both the sun and the moon in our app can occupy any one of the three important coordinates on the screen:

• Active planet coordinate: this the is (x,y) coordinate of the sun or the moon when the animation is complete.
• Hidden coordinate on the right bound: this is the coordinate of the sun or the moon that is setting (disappearing from view).
• Hidden coordinate on the left bound: this is the coordinate of the sun or the moon that is rising (appearing into view),
• quadTo() control coordinates: this is the coordinate that controls the curve of the Path drawn by the quadTo() method. I felt that it was important for the sun and the moon to rise/fall on a curve, which looks much more organic than flying straight in from the left or right side.

To be able to get these coordinates correctly, we can get them after the views have been drawn by the system. In MainActivity, add the instance properties below.

// Size is added to x,y coordinates to make the planet go off screen
private var planetSize = Pair(0, 0)

// Location of planet when it is shown on screen
private var activeXY = Pair(0f, 0f)

// Location of planet when hidden outside left or right bounds
private var hiddenLeftXY = Pair(0f, 0f)
private var hiddenRightXY = Pair(0f, 0f)

// Control points for quadTo() function
private var risingControlXY = Pair(0f, 0f)
private var settingControlXY = Pair(0f, 0f)

In onCreate(), before the buttons on-click listener call, add the code below to initialize the coordinates.

// Initiates coordinates after the sun is drawn
sun.post {
   planetSize = Pair(sun.width, sun.height)
   activeXY = Pair(sun.x, sun.y)
   hiddenLeftXY = Pair(
       0f - planetSize.first,
       activeXY.second + planetSize.second
   )
   hiddenRightXY = Pair(
       activeXY.first * 2 + planetSize.first,
       activeXY.second + planetSize.second
   )
   risingControlXY = Pair(
       activeXY.first - activeXY.first * 0.75f,
       activeXY.second
   )
   settingControlXY = Pair(
       activeXY.first + activeXY.first * 0.75f,
       activeXY.second
   )
}

Now that we have the important coordinates to create our Path, let us create the rising and setting paths for our planets. In the on-click listener, add the code below.

// Both sun and moon can use this animator
// Animates the planet setting
val settingPath = Path().apply {
   moveTo(activeXY.first, activeXY.second)
   quadTo(
       settingControlXY.first,
       settingControlXY.second,
       hiddenRightXY.first,
       hiddenRightXY.second
   )
}

// Both sun and moon can use this animator
// Animates the planet rising
val risingPath = Path().apply {
   moveTo(hiddenLeftXY.first, hiddenLeftXY.second)
   quadTo(
       risingControlXY.first,
       risingControlXY.second,
       activeXY.first,
       activeXY.second
   )
}

We can set a Views x and y using ObjectAnimator. Add the code below inside the on-click listener.

// Animates the sun rising or setting
val sunAnimator = ObjectAnimator.ofFloat(
   sun,
   "x",
   "y",
   if (isNight) risingPath else settingPath
)

// Animates the moon rising or setting
val moonAnimator = ObjectAnimator.ofFloat(
   moon,
   "x",
   "y",
   if (isNight) settingPath else risingPath
)

Last but not least, add these Animators into the AnimatorSet.

AnimatorSet().apply {
   // Play animations together
   playTogether(
       containerAnimator,
       cloudAnimator,
       sunAnimator,
       moonAnimator,
   )

   duration = 2000L
   start()
}

The code we have so far set up the animations to play together. Play the animation now and the app should behave like the animation below.

If you would like, you can also play the animations sequentially.

           AnimatorSet().apply {
               // Play animations separately
               playSequentially(
                   containerAnimator,
                   cloudAnimator,
                   sunAnimator,
                   moonAnimator
               )

               // Play animations together
/*                playTogether(
                   containerAnimator,
                   cloudAnimator,
                   sunAnimator,
                   moonAnimator,
               )*/

               duration = 2000L
               start()
           }

We have learned how to animate a View along a Path in this tutorial. The full project code can be found at https://github.com/dmitrilc/DaniwebCombineAnimationsAnimatorSet.

In the last tutorial, we learned how to draw complex shapes using a Path object. Using the concepts from the previous tutorial, we will now attempt to animate Views to move along a custom Path.

At the end of the tutorial, you would have learned:

1. How to animate Views to move along a Path.
2. How to choreograph animations using AnimatorSet.

1. Android Studio. The version used in this tutorial is Android Studio Dolphin | 2021.3.1.

1. Intermediate Android.
2. Basic Animation.
3. Drawing complex shapes using Path.

To follow along with the tutorial, perform the steps below:

1. Create a new Android project with the default Empty Activity.

2. Replace the content of activity_main.xml with the code below.

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@+id/container"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context=".MainActivity">
   
       <Button
           android:id="@+id/switch_day_night"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Switch"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent" />
   
       <ImageView
           android:id="@+id/house"
           android:layout_width="200dp"
           android:layout_height="200dp"
           android:layout_marginBottom="32dp"
           android:background="@drawable/ic_baseline_house_24"
           app:layout_constraintBottom_toTopOf="@+id/switch_day_night"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent" />
   
           <ImageView
               android:id="@+id/cloud"
               android:layout_width="100dp"
               android:layout_height="100dp"
               android:layout_marginStart="48dp"
               android:layout_marginBottom="16dp"
               android:background="@drawable/ic_baseline_cloud_24"
               app:layout_constraintBottom_toTopOf="@+id/house"
               app:layout_constraintStart_toStartOf="parent" />
   
           <ImageView
               android:id="@+id/sun"
               android:layout_width="100dp"
               android:layout_height="100dp"
               android:layout_marginBottom="48dp"
               android:background="@drawable/ic_baseline_wb_sunny_24"
               app:layout_constraintBottom_toTopOf="@+id/house"
               app:layout_constraintEnd_toEndOf="parent"
               app:layout_constraintStart_toStartOf="parent" />
   
       <ImageView
           android:id="@+id/moon"
           android:layout_width="100dp"
           android:layout_height="100dp"
           android:background="@drawable/ic_baseline_mode_night_24"
           app:layout_constraintBottom_toTopOf="@+id/house"
           app:layout_constraintEnd_toStartOf="parent" />
   
    </androidx.constraintlayout.widget.ConstraintLayout>

3. Add the vector drawable below as ic_baseline_cloud_24.xml.

    <vector android:height="24dp" android:tint="#002AFF"
       android:viewportHeight="24" android:viewportWidth="24"
       android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
       <path android:fillColor="@android:color/white" android:pathData="M19.35,10.04C18.67,6.59 15.64,4 12,4 9.11,4 6.6,5.64 5.35,8.04 2.34,8.36 0,10.91 0,14c0,3.31 2.69,6 6,6h13c2.76,0 5,-2.24 5,-5 0,-2.64 -2.05,-4.78 -4.65,-4.96z"/>
    </vector>

4. Add the vector drawable below as ic_baseline_house_24.xml.

    <vector android:height="24dp" android:tint="#E08757"
       android:viewportHeight="24" android:viewportWidth="24"
       android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
       <path android:fillColor="@android:color/white" android:pathData="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3zM10,10c0,-1.1 0.9,-2 2,-2s2,0.9 2,2H10z"/>
    </vector>

5. Add the vector drawable below as ic_baseline_mode_night_24.xml.

    <vector android:height="24dp" android:tint="#E08757"
       android:viewportHeight="24" android:viewportWidth="24"
       android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
       <path android:fillColor="@android:color/white" android:pathData="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3zM10,10c0,-1.1 0.9,-2 2,-2s2,0.9 2,2H10z"/>
    </vector>

6. Add the vector drawable below as ic_baseline_wb_sunny_24.xml.

    <vector android:height="24dp" android:tint="#FF6F00"
       android:viewportHeight="24" android:viewportWidth="24"
       android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
       <path android:fillColor="@android:color/white" android:pathData="M6.76,4.84l-1.8,-1.79 -1.41,1.41 1.79,1.79 1.42,-1.41zM4,10.5L1,10.5v2h3v-2zM13,0.55h-2L11,3.5h2L13,0.55zM20.45,4.46l-1.41,-1.41 -1.79,1.79 1.41,1.41 1.79,-1.79zM17.24,18.16l1.79,1.8 1.41,-1.41 -1.8,-1.79 -1.4,1.4zM20,10.5v2h3v-2h-3zM12,5.5c-3.31,0 -6,2.69 -6,6s2.69,6 6,6 6,-2.69 6,-6 -2.69,-6 -6,-6zM11,22.45h2L13,19.5h-2v2.95zM3.55,18.54l1.41,1.41 1.79,-1.8 -1.41,-1.41 -1.79,1.8z"/>
    </vector>

Our starter project contains quite a few elements: ImageViews that contain images for a sun, a moon (not visible yet), the cloud, a house, and finally a button to switch the scene between day and night.

Upon completion of the project, every time the switch button is pressed, we would have four different animations:

1. The sun rising from the left or setting to the right.
2. The moon rising from the left or setting to the right.
3. The background color animated between black and white.
4. The cloud color animated between blue and gray.

The hardest animation to achieve here is the sun and the moon rising and setting following a path. We will start with the easiest animations first, which are the animating the sun and clouds colors.

Because the day/night logic is bound to many animations, lets keep track of the current state using a simple variable in MainAcitivty.

// Simple state for which kind of animation needs to be activated
private var isNight = false

Append the code below to onCreate() to get references to elements in the layout.

val button = findViewById<Button>(R.id.switch_day_night)

val container = findViewById<ConstraintLayout>(R.id.container)
val cloud = findViewById<ImageView>(R.id.cloud)
val sun = findViewById<ImageView>(R.id.sun)
val moon = findViewById<ImageView>(R.id.moon)

The background color of the container ConstraintLayout can be animated using the ValueAnimator.ofArgb() method. The code below will bind the Switch Button to start the animation of the background color.

button.setOnClickListener {
   // Animates the background color from night to morning
   val containerAnimator = ValueAnimator.ofArgb(
       if (isNight) Color.BLACK else Color.WHITE,
       if (isNight) Color.WHITE else Color.BLACK
   ).apply {
       addUpdateListener {
           container.setBackgroundColor(it.animatedValue as Int)
       }
   }

   AnimatorSet().apply {
       // Play animations together
       playTogether(
           containerAnimator
       )

       duration = 2000L
       start()
   }

   isNight = !isNight
}

Note that I am using AnimatorSet to start the animation instead of starting the background color change animation separately; the reasoning for this is because this makes it easy to manage multiple animations later on.

Next, we will animate the cloud color as well. Because the cloud is a drawable that is assigned to an ImageView, we cannot simply change the background color. But what we can do is to modify the tint of the image itself. We can also use the same ofArgb() method from the ValueAnimator class used previously.

The code snippet below will animate the cloud and background color on button click.

button.setOnClickListener {
   // Animates the background color from night to morning
   val containerAnimator = ValueAnimator.ofArgb(
       if (isNight) Color.BLACK else Color.WHITE,
       if (isNight) Color.WHITE else Color.BLACK
   ).apply {
       addUpdateListener {
           container.setBackgroundColor(it.animatedValue as Int)
       }
   }

   // Animates the cloud color from night to morning
   val cloudAnimator = ValueAnimator.ofArgb(
       if (isNight) Color.GRAY else Color.BLUE,
       if (isNight) Color.BLUE else Color.GRAY
   ).apply {
       addUpdateListener {
           cloud.background.setTint(it.animatedValue as Int)
       }
   }

   AnimatorSet().apply {
       // Play animations together
       playTogether(
           containerAnimator,
           cloudAnimator
       )

       duration = 2000L
       start()
   }

   isNight = !isNight
}

We have learned how to animate background color and image tint in this first part of the tutorial. Please continue to the second part to learn how to animate the sun and moon along a path.

Even though the built-in vector library included in Android Studio contains many icons readily for use, you might eventually run into a situation where a custom icon is needed. In this tutorial, we will learn how to create our own icons from basic shapes drawn on a Drawables Canvas.

At the end of the tutorial, you would have learned:

1. How to draw basic shapes using custom Drawable.

1. Android Studio. The version used in this tutorial is Android Studio Dolphin | 2021.3.1.

1. Intermedia Android.

To follow along with the tutorial, perform the steps below:

1. Create a new Android project with the default Empty Activity.

2. Replace the code in activity_main.xml with the code below.

    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context=".MainActivity">
   
       <ImageView
           android:id="@+id/imageView_myImage"
           android:layout_width="0dp"
           android:layout_height="0dp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent"
           tools:srcCompat="@tools:sample/backgrounds/scenic" />
    </androidx.constraintlayout.widget.ConstraintLayout>

At this stage, our sample application only displays a blank screen.

• (Optional) Go to Developer options and enable Pointer Location. This will allow you to see the screen coordinates when drawing.

Before we can draw shapes, we will need to create a custom Drawable for our ImageView. Drawables children are required to override the method draw(), which is where the drawing can start.

Copy and paste the following custom Drawable, either in the file MainActivity.kt or as a different file.

class BasicShapes : Drawable() {
   private val paint: Paint = Paint().apply {
       // Create your paint here
       style = Paint.Style.STROKE
       strokeWidth = 10f
       color = Color.CYAN
   }

   override fun draw(canvas: Canvas) {
       // Do your drawing here
       canvas.drawRect(
           RectF(100f, 100f, 200f, 300f),
           paint
       )
   }

   override fun setAlpha(alpha: Int) {
       // Required but can be left empty
   }

   override fun setColorFilter(colorFilter: ColorFilter?) {
       // Required but can be left empty
   }

   @Deprecated("Deprecated by super class")
   override fun getOpacity() = PixelFormat.OPAQUE
}

Drawable requires us to override many different methods, but we can just focus on the draw() method and leave everything else as default.

The Paint object located in our custom implementation is also important. We need it to be able to draw anything.

Even though we do not have any useful implementation of draw() yet, it is fine to use BasicShapes as the drawable of the ImageView. Append the code below to onCreate().

findViewById<ImageView>(R.id.imageView_myImage)
   .setImageDrawable(BasicShapes())

One more thing that we need to understand before we can draw on a Canvas is the coordinate system. A Views top left corner always have a (0x, 0y) coordinates, which also means that the bottom right corner contains (maxX, maxY) coordinates.

In most cases, we will have to provide the coordinates when drawing on Canvas.

To draw a Rectangle, we would use the drawRect() method from the Canvas object passed to onDraw().

override fun draw(canvas: Canvas) {
   // Do your drawing here
   canvas.drawRect(
       Rect(
           100, // distance from left of view
           100, // distance from top of view
           400, // distance from left of view
           300 // distance from top of view
       ),
       paint
   )
}

The code above will draw a rectangle (check code comments), as the screenshot below illustrates.

Once you have figured out the coordinate system, drawing other shapes is only a matter of applying basic geometry on the appropriate methods.

• A circle can be drawn using drawCircle().
• An oval can be drawn using drawOval().
• A square can be drawn using drawRect() with appropriate dimensions.

The code below adds a circle, an oval and a square to our application.

override fun draw(canvas: Canvas) {
   // Do your drawing here
   canvas.drawRect(
       Rect(
           100, // distance from left of view
           100, // distance from top of view
           400, // distance from left of view
           300 // distance from top of view
       ),
       paint
   )

   canvas.drawCircle(300f, 500f, 100f, paint)
   canvas.drawOval(
       RectF(100f, 700f, 500f, 800f),
       paint
   )
   // square
   canvas.drawRect(
       Rect(
           500, // distance from left of view
           100, // distance from top of view
           700, // distance from left of view
           300 // distance from top of view
       ),
       paint
   )
}

The app should look like the screenshot below.

We have learned how to draw basic shapes in this tutorial. The full project code can be found at https://github.com/dmitrilc/DaniwebAndroidDrawBasicShapesOnCanvas.

Android includes many options to add animations to your app. In this tutorial, we will learn how to add a type of animation called frame-by-frame animation into our Android app.

At the end of the tutorial, you would have learned:

1. How to add frame-by-frame animation to an Android app.

1. Android Studio. The version used in this tutorial is Android Studio Dolphin | 2021.3.1.

1. Intermediate Android.

To follow along with the tutorial, perform the steps below:

1. Create a new Android project with the default Empty Activity.

2. Download the free Santa sprites from Game Art 2d.

3. Unpack the archive and import all files in the png directory to the project (keep the same names that Android Studio generated for you).

4. Copy and paste all the <string> resources below into your projects strings.xml file.

    <string name="idle">Idle</string>
    <string name="walk">Walk</string>
    <string name="run">Run</string>
    <string name="jump">Jump</string>
    <string name="die">Die</string>
    <string name="slide">Slide</string>

5. Replace all the content of activity_main.xml with the code below.

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context=".MainActivity">
   
       <ImageView
           android:id="@+id/image_santa"
           android:layout_width="0dp"
           android:layout_height="300dp"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintHorizontal_bias="0.5"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent"
           android:src="@drawable/idle__1_" />
   
       <Button
           android:id="@+id/idle"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginTop="16dp"
           android:text="@string/idle"
           app:layout_constraintBottom_toTopOf="@id/walk"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintHorizontal_bias="0.5"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toBottomOf="@id/image_santa" />
   
       <Button
           android:id="@+id/walk"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@string/walk"
           app:layout_constraintBottom_toTopOf="@id/run"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintHorizontal_bias="0.5"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toBottomOf="@id/idle" />
   
       <Button
           android:id="@+id/run"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@string/run"
           app:layout_constraintBottom_toTopOf="@id/jump"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintHorizontal_bias="0.5"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toBottomOf="@id/walk" />
   
       <Button
           android:id="@+id/jump"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@string/jump"
           app:layout_constraintBottom_toTopOf="@id/slide"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintHorizontal_bias="0.5"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toBottomOf="@id/run" />
   
       <Button
           android:id="@+id/slide"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@string/slide"
           app:layout_constraintBottom_toTopOf="@id/die"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintHorizontal_bias="0.5"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toBottomOf="@id/jump" />
   
       <Button
           android:id="@+id/die"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@string/die"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintHorizontal_bias="0.5"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toBottomOf="@id/slide" />
    </androidx.constraintlayout.widget.ConstraintLayout>

Our starter application contains a single screen with 6 buttons, allowing the user to start animations of the following actions

1. Idle.
2. Walk.
3. Run.
4. Jump.
5. Slide.
6. Die.

There are two steps that we need to do next to allow the animation to work:

1. Set up the animation resources that describe the frame-by-frame image.
2. Set up button listeners to activate the animation.

The type of animation that we are aiming for can be achieved by loading images in a sequence. We can either define this animation in code using the AnimationDrawable class or using a pre-defined Frame Animation Resource. The frame animation resource starts with an <animation-list> tag, and then each image is defined in an <item> tag.

To create the frame animation resource for the idle action, create a new file called idle.xml and copy and paste the code below into it.

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@drawable/idle__1_" android:duration="75" />
   <item android:drawable="@drawable/idle__2_" android:duration="75" />
   <item android:drawable="@drawable/idle__3_" android:duration="75" />
   <item android:drawable="@drawable/idle__4_" android:duration="75" />
   <item android:drawable="@drawable/idle__5_" android:duration="75" />
   <item android:drawable="@drawable/idle__6_" android:duration="75" />
   <item android:drawable="@drawable/idle__7_" android:duration="75" />
   <item android:drawable="@drawable/idle__8_" android:duration="75" />
   <item android:drawable="@drawable/idle__9_" android:duration="75" />
   <item android:drawable="@drawable/idle__10_" android:duration="75" />
   <item android:drawable="@drawable/idle__11_" android:duration="75" />
   <item android:drawable="@drawable/idle__12_" android:duration="75" />
   <item android:drawable="@drawable/idle__13_" android:duration="75" />
   <item android:drawable="@drawable/idle__14_" android:duration="75" />
   <item android:drawable="@drawable/idle__15_" android:duration="75" />
   <item android:drawable="@drawable/idle__16_" android:duration="75" />
</animation-list>

Each <item> must contain the source to the actual drawable resource (the images that we imported earlier). The duration attribute dictates how long to show a frame, in milliseconds.

If you switch to Split/Design view, you can also preview the animation.

Now that we already know how to define the idle animation resource, create the rest of the animations with the names below.

1. walk.xml.

    <?xml version="1.0" encoding="utf-8"?>
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:drawable="@drawable/walk__1_" android:duration="75" />
       <item android:drawable="@drawable/walk__2_" android:duration="75" />
       <item android:drawable="@drawable/walk__3_" android:duration="75" />
       <item android:drawable="@drawable/walk__4_" android:duration="75" />
       <item android:drawable="@drawable/walk__5_" android:duration="75" />
       <item android:drawable="@drawable/walk__6_" android:duration="75" />
       <item android:drawable="@drawable/walk__7_" android:duration="75" />
       <item android:drawable="@drawable/walk__8_" android:duration="75" />
       <item android:drawable="@drawable/walk__9_" android:duration="75" />
       <item android:drawable="@drawable/walk__10_" android:duration="75" />
       <item android:drawable="@drawable/walk__11_" android:duration="75" />
       <item android:drawable="@drawable/walk__12_" android:duration="75" />
       <item android:drawable="@drawable/walk__13_" android:duration="75" />
    </animation-list>

2. run.xml.

    <?xml version="1.0" encoding="utf-8"?>
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:drawable="@drawable/run__1_" android:duration="75" />
       <item android:drawable="@drawable/run__2_" android:duration="75" />
       <item android:drawable="@drawable/run__3_" android:duration="75" />
       <item android:drawable="@drawable/run__4_" android:duration="75" />
       <item android:drawable="@drawable/run__5_" android:duration="75" />
       <item android:drawable="@drawable/run__6_" android:duration="75" />
       <item android:drawable="@drawable/run__7_" android:duration="75" />
       <item android:drawable="@drawable/run__8_" android:duration="75" />
       <item android:drawable="@drawable/run__9_" android:duration="75" />
       <item android:drawable="@drawable/run__10_" android:duration="75" />
       <item android:drawable="@drawable/run__11_" android:duration="75" />
    </animation-list>

3. jump.xml.

    <?xml version="1.0" encoding="utf-8"?>
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:drawable="@drawable/jump__1_" android:duration="75" />
       <item android:drawable="@drawable/jump__2_" android:duration="75" />
       <item android:drawable="@drawable/jump__3_" android:duration="75" />
       <item android:drawable="@drawable/jump__4_" android:duration="75" />
       <item android:drawable="@drawable/jump__5_" android:duration="75" />
       <item android:drawable="@drawable/jump__6_" android:duration="75" />
       <item android:drawable="@drawable/jump__7_" android:duration="75" />
       <item android:drawable="@drawable/jump__8_" android:duration="75" />
       <item android:drawable="@drawable/jump__9_" android:duration="75" />
       <item android:drawable="@drawable/jump__10_" android:duration="75" />
       <item android:drawable="@drawable/jump__11_" android:duration="75" />
       <item android:drawable="@drawable/jump__12_" android:duration="75" />
       <item android:drawable="@drawable/jump__13_" android:duration="75" />
       <item android:drawable="@drawable/jump__14_" android:duration="75" />
       <item android:drawable="@drawable/jump__15_" android:duration="75" />
       <item android:drawable="@drawable/jump__16_" android:duration="75" />
    </animation-list>

4. slide.xml

    <?xml version="1.0" encoding="utf-8"?>
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:drawable="@drawable/slide__1_" android:duration="75" />
       <item android:drawable="@drawable/slide__2_" android:duration="75" />
       <item android:drawable="@drawable/slide__3_" android:duration="75" />
       <item android:drawable="@drawable/slide__4_" android:duration="75" />
       <item android:drawable="@drawable/slide__5_" android:duration="75" />
       <item android:drawable="@drawable/slide__6_" android:duration="75" />
       <item android:drawable="@drawable/slide__7_" android:duration="75" />
       <item android:drawable="@drawable/slide__8_" android:duration="75" />
       <item android:drawable="@drawable/slide__9_" android:duration="75" />
       <item android:drawable="@drawable/slide__10_" android:duration="75" />
       <item android:drawable="@drawable/slide__11_" android:duration="75" />
    </animation-list>

5. die.xml.

    <?xml version="1.0" encoding="utf-8"?>
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:drawable="@drawable/dead__1_" android:duration="75" />
       <item android:drawable="@drawable/dead__2_" android:duration="75" />
       <item android:drawable="@drawable/dead__3_" android:duration="75" />
       <item android:drawable="@drawable/dead__4_" android:duration="75" />
       <item android:drawable="@drawable/dead__5_" android:duration="75" />
       <item android:drawable="@drawable/dead__6_" android:duration="75" />
       <item android:drawable="@drawable/dead__7_" android:duration="75" />
       <item android:drawable="@drawable/dead__8_" android:duration="75" />
       <item android:drawable="@drawable/dead__9_" android:duration="75" />
       <item android:drawable="@drawable/dead__10_" android:duration="75" />
       <item android:drawable="@drawable/dead__11_" android:duration="75" />
       <item android:drawable="@drawable/dead__12_" android:duration="75" />
       <item android:drawable="@drawable/dead__12_" android:duration="75" />
       <item android:drawable="@drawable/dead__13_" android:duration="75" />
       <item android:drawable="@drawable/dead__14_" android:duration="75" />
       <item android:drawable="@drawable/dead__15_" android:duration="75" />
       <item android:drawable="@drawable/dead__16_" android:duration="75" />
       <item android:drawable="@drawable/dead__17_" android:duration="75" />
    </animation-list>

To use the animations that we have defined, first, in onCreate(), get the reference to the ImageView that displays Santa.

val santaImage = findViewById<ImageView>(R.id.image_santa)

We have six buttons in total, calling findViewById() 6 different times would be a chore, so let us use a Map to reduce repetitive code and improve readability.

// Add Button IDs and Animation IDs into map for easy looping.
val animationMap = mapOf(
   Pair(R.id.idle, R.drawable.idle),
   Pair(R.id.walk, R.drawable.walk),
   Pair(R.id.run, R.drawable.run),
   Pair(R.id.jump, R.drawable.jump),
   Pair(R.id.slide, R.drawable.slide),
   Pair(R.id.die, R.drawable.die)
)

for ((buttonId, animationId) in animationMap){
   findViewById<Button>(buttonId).setOnClickListener {
       santaImage.setImageResource(animationId)
       (santaImage.drawable as AnimationDrawable).start()
   }
}

The two most important lines of code above are

santaImage.setImageResource(animationId)
(santaImage.drawable as AnimationDrawable).start()

1. Every time we need to play a different animation, we need to replace the image resource with the corresponding animation resource.
2. We then cast the drawable to AnimationDrawable and then call start() to start the animation.

We are now ready to run the app, it should behave similarly to the animation below.

We have learned how to animate sprites in this tutorial. The full project code can be found at https://github.com/dmitrilc/DaniwebAnimateSpritesAnimationDrawable.