Unit 2: Advanced Graphics - Practice Quiz

The Canvas class provides a surface on which you can draw 2D graphics by issuing drawing commands like drawRect(), drawCircle(), etc.

The Paint class holds the style and color information about how to draw geometries, text, and bitmaps on a Canvas.

The drawCircle(cx, cy, radius, paint) method is used to draw a circle on the canvas at the specified center coordinates (cx, cy) and radius.

Android calls the onDraw() method whenever the view needs to be redrawn, providing a Canvas object for you to use for your drawing operations.

Paint.Style.STROKE configures the Paint object to draw only the outline of a shape, while Paint.Style.FILL would fill the shape's interior.

The drawText() method is the standard way to render a string of text onto the Canvas at a specified x,y coordinate.

The drawLine(startX, startY, stopX, stopY, paint) method draws a line segment between the specified start and stop coordinates.

The Android framework provides two primary animation systems: Property Animation, which modifies object properties over time, and View Animation (or tween animation), which performs simple transformations on Views.

Property Animation is more robust as it directly changes the actual property values of an object. View Animation only changes how the view is drawn, not its actual properties like its position.

XML files defining tween animations (View Animations) are placed in the res/anim/ directory. Property animations go in res/animator/.

An Interpolator controls the animation's timing. For example, it can make an animation accelerate, decelerate, or bounce by defining how the animated value changes over time.

ObjectAnimator is a subclass of ValueAnimator that allows you to animate a specific property of a target object by providing the object and the property's string name.

ValueAnimator is the core timing engine. It runs for a set duration and calculates intermediate values, but you must add a listener to receive these values and apply them to an object.

The <alpha> tag is used to define a tween animation that changes the transparency (alpha value) of a View, creating a fading effect.

The Transition framework is designed to animate UI changes, such as views appearing, disappearing, or moving, within the confines of a single activity's layout.

A Scene stores the state of a view hierarchy (a layout). The Transition framework can then automatically create animations to move from one scene to another.

The Fade transition tracks changes to the visibility of target views and animates them by fading them in or out.

The static method TransitionManager.go() is used to trigger a transition to a specified Scene, automatically calculating and running the required animations.

A Shared Element Transition creates a seamless animation by tracking a specific view as it moves and transforms between two different screens, like an image thumbnail expanding into a full-screen view.

The ChangeBounds transition captures the layout bounds (position and size) of target views in the start and end scenes and animates any changes to those bounds.

The canvas.rotate() call modifies the canvas's transformation matrix. The circle is drawn before the rotation, so it appears normal. The rotation is then applied, and any subsequent drawing operations, like drawing the square, will be affected by this rotation.

canvas.save() pushes the current transformation matrix (and clip state) onto a stack, and canvas.restore() pops it off. This is the standard and most efficient way to apply temporary transformations without needing to calculate inverse matrices or manage matrix state manually.

An ObjectAnimator is a subclass of ValueAnimator. It has a target object and property name, and it automatically updates the property via reflection (or a setter method) during the animation. A ValueAnimator does not operate on any object directly; it simply runs a timing loop and calculates values, requiring an AnimatorUpdateListener to manually retrieve the value and apply it to a property.

The Android Transition framework identifies which views to animate between Activities by matching their android:transitionName attribute. Both the starting view in ActivityA and the ending view in ActivityB must have the same, non-null transitionName.

The canvas is first translated to (100, 100). The blue 50x50 rect is drawn there. Then, the canvas is scaled by a factor of 2. The final drawRect call draws a 25x25 rectangle. Because the canvas is scaled by 2, this 25x25 rectangle will render as a 50x50 pixel square. Its top-left corner is at the current origin (0,0), which is screen position (100, 100). Therefore, the red 50x50 square is drawn exactly over the blue one.

ObjectAnimator uses reflection to find and call a setter method for the property you specify (e.g., for property "cornerRadius", it looks for setCornerRadius()). If this method does not exist, the reflection mechanism will fail at runtime, causing the application to crash.

beginDelayedTransition sets up a listener for the next layout pass. It captures the 'before' state of views. After you make changes to the views (e.g., change visibility or size) that trigger a new layout, it captures the 'after' state and automatically animates between the two states.

An interpolator defines the rate of change of an animation. The LinearInterpolator causes the animated value to change evenly over time, resulting in a constant velocity with no acceleration or deceleration.

The onDraw() method can be called many times per second during animations. Creating new objects (like Paint or Path) in this method on every frame forces the Garbage Collector (GC) to run often. GC pauses can interrupt the main thread, causing missed frames and a non-smooth user experience.

The core of a custom transition is defining what to look for in the start and end scenes. captureStartValues() records data about views in the starting scene. captureEndValues() does the same for the ending scene. The framework uses this data to create the animation between the two states.

A View Animation modifies the drawing transformation matrix. The View itself believes it's in its original position (its getX() value doesn't change). A Property Animation modifies the actual property (e.g., setTranslationX()), so the View's state is consistent with its appearance, which is important for touch events.

The clipping methods (clipPath, clipRect) restrict the drawing area of the Canvas. By first calling canvas.clipPath() with the path of a circle, you tell the Canvas to only draw pixels that fall inside that circle. A subsequent canvas.drawRect() call will only be visible where it intersects with this clipping region.

AnimatorSet is the property animation framework's tool for orchestrating multiple Animator objects. The playTogether(Animator... items) method is specifically designed to start all the provided animations at the exact same time.

The Explode transition affects how views in a scene appear or disappear. When entering, views move from the outside of the screen towards the center of the scene. When exiting, views move from their position outwards, away from the center, creating a visual 'explosion' effect.

A quadratic Bézier curve is defined by a start point, an end point, and a single control point. The curve does not pass through the control point; instead, the control point acts like a magnet, influencing the curve's shape by 'pulling' the line towards itself.

ArgbEvaluator is a TypeEvaluator provided by Android for calculating intermediate color values. It correctly interpolates the alpha, red, green, and blue channels of a color, resulting in a smooth transition. You apply it using the animator's setEvaluator() method.

The Transition object allows you to specify its targets. Before calling beginDelayedTransition, you can get the Transition instance and call removeTarget(View target) to explicitly exclude that view from being animated.

A Keyframe allows you to define intermediate points in an animation. Instead of just a start and end value, you can specify that at 50% of the time, the value should be at a certain point, and at 100% of the time, it should be at another. This enables complex, non-linear animations like bounces or pulses.

setCustomAnimations() allows you to specify animator or animation resources for the enter, exit, popEnter, and popExit events of a fragment transaction. To achieve a slide effect, you would provide XML animator resources (e.g., slide_out_left and slide_in_right) to this method.

The setTextAlign() method on the Paint object determines how text is positioned relative to the x-coordinate in the canvas.drawText() call. Setting the alignment to Paint.Align.CENTER means the x-coordinate you provide will be the horizontal center of the text string, simplifying centering logic.

The canvas.saveLayer() method is specifically designed for this purpose. It allocates an off-screen bitmap (a layer) and redirects all subsequent drawing commands to it. When canvas.restore() is called, this off-screen layer is composited back onto the main canvas using the Paint provided to saveLayer. This isolates the effect of blend modes (Xfermode) to only the content drawn within that layer, preventing it from interacting with pixels already on the main canvas.

The order of operations is crucial. pre... operations are applied before the existing matrix transformations, and post... operations are applied after. The effective order of transformation on the point is: Rotate -> Scale -> Translate.

1. Pre-Rotate by 90 degrees: The preRotate is applied first. Point (10, 20) becomes (-20, 10).
2. Scale by (2, 2): The original scale is applied next. Point (-20, 10) becomes (-40, 20).
3. Rotate (10, 20) by 90 degrees: . . Result: (-20, 10).
4. Scale (-20, 10) by (2, 2): Result: (-40, 20).
5. Translate (-40, 20) by (50, 0): Result: (10, 20). My initial calculation was wrong. Let's re-read the question. matrix.setScale first, then postTranslate, then preRotate. This means the final matrix is .
   Let's trace matrix multiplication:
   Initial Matrix S: [[2, 0, 0], [0, 2, 0], [0, 0, 1]]
postTranslate(50, 0) -> : [[2, 0, 50], [0, 2, 0], [0, 0, 1]]
preRotate(90) -> : [[2, 0, 50], [0, 2, 0], [0, 0, 1]] \times [[0, -1, 0], [1, 0, 0], [0, 0, 1]] = [[0, -2, 50], [2, 0, 0], [0, 0, 1]]
   Let's re-think the order. matrix.op() modifies the current matrix.
6. matrix.setScale(2, 2): M = S
7. matrix.postTranslate(50, 0): M becomes
8. matrix.preRotate(90): M becomes
   So the operations applied to the point are: Translate, then Scale, then Rotate.
9. Translate (10, 20) by (50, 0) -> (60, 20)
10. Scale (60, 20) by (2, 2) -> (120, 40)
11. Rotate (120, 40) by 90 degrees -> (-40, 120). This is the correct answer. The key is that post means this * other, and pre means other * this. The transformations on the point happen in the reverse order they are multiplied onto the matrix.

A true bounce effect involves oscillation. The formula y(t) = -e^{-t/A} \cos(Bt) + 1 describes a dampened harmonic oscillator, which is the mathematical model for a bounce. It starts at 0, overshoots the target of 1.0, and then oscillates with decreasing amplitude until it settles at 1.0. The other options either do not exceed 1.0 (sinusoidal), provide a simple ease-in (polynomial), or only provide a single overshoot without oscillation (OvershootInterpolator).

The Transition lifecycle is well-defined.

1. captureStartValues(TransitionValues values) is called for all views in the starting scene to record their initial state. You would store the TextView's current color here.
2. captureEndValues(TransitionValues values) is called for all views in the ending scene to record their final state. You would store the target color here.
3. createAnimator(ViewGroup sceneRoot, TransitionValues startValues, TransitionValues endValues) is then called for views present in both scenes. This method uses the data from startValues and endValues to configure and return an Animator that performs the animation, such as an ArgbEvaluator with a ValueAnimator.

The AnimatorSet.Builder defines dependencies.

• set.play(a).with(b): This establishes that animators a and b must start at the same time.
• set.play(c).after(a): This creates a dependency where c will start only after a has finished.
• set.play(d).after(b): This creates a dependency where d will start only after b has finished.
  Since a and b can have different durations, c and d are not guaranteed to start simultaneously. For example, if a has a duration of 100ms and b has a duration of 500ms, c will start at t=100ms while d will start at t=500ms.

While most standard drawing operations are hardware-accelerated, certain complex operations are not supported by the GPU rendering pipeline and force the system to fall back to the software renderer for that specific drawing command, which is much slower. Path.op(), which performs boolean operations on paths, is a notable example of an operation that is often not hardware accelerated and can be very computationally expensive, especially with complex input paths. Simple transformations, color filters, and anti-aliasing are generally well-optimized for hardware acceleration.

This is a classic problem with shared element transitions involving asynchronously loaded data (like images in a RecyclerView). Fragment B's transition may start before its shared element has been properly measured and laid out (e.g., an image has finished loading). This causes the Transition framework to calculate start/end positions based on incomplete information, leading to glitches. The correct pattern is to call postponeEnterTransition() in onViewCreated of the destination fragment, and then call startPostponedEnterTransition() in a callback once the shared element is ready (e.g., in a Glide/Picasso listener), ensuring the framework has the correct final bounds to animate to.

ObjectAnimator works by finding a setter method (e.g., setCenterPoint) using reflection. If no such method exists, it will fail. While using a Property object can also work, the most direct and reflection-free way to animate a property without a public setter is to use a ValueAnimator. The ValueAnimator will interpolate between the start and end PointF values using a PointFEvaluator, and you can get the intermediate value in the onAnimationUpdate callback and manually assign it to myCircle.centerPoint.

The KeyPosition keyframe is used to alter the path of a view between its start and end points. To create an arc, you need to offset the view from the default linear path at some point in the middle of the transition. keyPositionType="pathRelative" is ideal for this. It defines a coordinate system where the x-axis is the direct path from start to end, and the y-axis is perpendicular to it. By setting percentY="-0.5", you are telling the view to move half of its own height/width (depending on the direction) away from the direct path at the 50% mark (framePosition="50"), effectively creating a curved, arc-like motion.

The clipping region is applied to the canvas in its state at the moment clipPath() is called. Subsequent transformations on the canvas matrix (like rotate, scale, translate) affect the coordinate system for drawing, but they do not modify the clipping region that has already been set. Therefore, any drawing you do after the rotation will be transformed (rotated), but it will still be clipped by the original, non-rotated path. To have a rotated clipping region, you must rotate the canvas before calling clipPath().

In a spring-mass-damper system:

• Stiffness determines how quickly the spring returns to its resting position. Higher stiffness means a faster, more forceful spring.
• Damping Ratio determines how quickly the oscillations die down. A dampingRatio of 1 is critically damped (no bounce), a ratio between 0 and 1 is underdamped (bouncy), and a ratio of 0 is undamped (infinite oscillation).
  To achieve a very bouncy effect with multiple oscillations, you need a very low damping ratio. DAMPING_RATIO_LOW_BOUNCY (a value like 0.2) is perfect for this. Medium stiffness ensures the spring has enough energy to oscillate meaningfully. High stiffness with low damping would be extremely fast and jittery, while very low stiffness would be sluggish.

A TransitionValues object is a property bag. Its view field holds a reference to the target view, and its values map stores data about that view captured at a specific time (either before or after the scene change). The framework uses this captured data to create animators. A critical mistake is to use a simple, non-unique key in the values map (e.g., values.put("color", myColor)). If another custom transition or a framework transition also uses the key "color", it will overwrite your value. The best practice is to use a fully qualified, unique key, like private static final String PROPNAME_COLOR = "com.example.myapp:MyTransition:color"; to prevent collisions.

A ComposeShader combines two other shaders based on a specified PorterDuff.Mode (or BlendMode). PorterDuff.Mode.MULTIPLY multiplies the color channels of the source (the second shader, linearGradient) and the destination (the first shader, bitmapShader). The resulting color is calculated as C = C_src * C_dst. This typically results in a darkening effect, where the texture is 'tinted' or 'shaded' by the colors of the gradient.

ObjectAnimator.ofFloat(target, "propertyName", ...) uses reflection to find and invoke the setter method (setPropertyName) on every frame. This reflection has overhead. A much more efficient approach is to use the ObjectAnimator.ofFloat(target, Property, ...) variant. The Property object holds direct references to the getter and setter methods, which are looked up only once. On each animation frame, the animator can invoke these methods directly, bypassing the expensive reflection lookup and significantly improving performance.

By default (setResizeClip(false)), ChangeBounds animates the bounds of a view by changing its left, top, right, and bottom properties. This forces the view and its entire hierarchy to re-layout on every frame of the animation, which can be expensive and cause children to resize. When you call setResizeClip(true), ChangeBounds instead animates the view's clipping bounds (view.setClipBounds()). This is much more efficient as it doesn't trigger a re-layout. The view's children move with the parent, but their own sizes remain constant because no layout pass is occurring; they are simply being clipped by their animating parent.

The issue here is overdraw with alpha blending on the GPU. Each time a semi-transparent circle is drawn, the GPU must read the destination pixels, blend them with the new circle's pixels, and write the result back. With 1,000 overlapping circles, this read-modify-write cycle happens thousands of times for the same pixels, which is very slow. By using saveLayer, you redirect all drawing to an off-screen buffer. The GPU can render the circles into this buffer more efficiently. Then, the entire buffer is blended with the main framebuffer just once. This significantly reduces the expensive alpha blending operations on the main display buffer, a technique often called 'layering' or 'compositing'.

A cubic Bezier curve for an interpolator maps time (x) to progress (y). The control points P1(x1, y1) and P2(x2, y2) define the curve's shape.

• To start fast, the curve must be steep initially, so P1 needs a large y1 relative to x1. However, we want it to slow down.
• To slow down dramatically, the curve's slope must approach zero. This means the curve must become horizontal.
• To speed up again, the curve must become steep at the end.
  The control points (0.8, 0.0) and (0.2, 1.0) achieve this. The first control point P1 is far to the right and at the bottom, pulling the curve to be very steep initially and then flattening it out. The second control point P2 is far to the left and at the top, pulling the curve to remain flat for a while before shooting up steeply at the end. This creates a distinct ease-in-out effect with a pronounced slowdown in the middle.

MotionLayout provides a rich API for programmatic control. To command the layout to animate to a specific ConstraintSet defined in your MotionScene, you use the transitionToState(int stateId) method. This will find the appropriate <Transition> block in your scene file that ends at the given state (R.id.end) and execute it. setProgress is for manually scrubbing the animation, and TransitionManager is part of the older Transitions framework and doesn't directly control MotionLayout states.

The canvas.drawText(text, x, y, paint) method uses the y coordinate as the baseline for the text, not its center, top, or bottom. To find the vertical center, you need font metrics. paint.ascent() gives the distance from the baseline to the top of the ascenders (a negative value), and paint.descent() gives the distance from the baseline to the bottom of the descenders (a positive value). The total height is descent - ascent. The vertical center relative to the baseline is (descent + ascent) / 2. To align this center with cy, you must offset the baseline y by this amount: y = cy - (descent + ascent) / 2. getTextBounds can be inaccurate and is dependent on the specific text, whereas font metrics give a consistent vertical center for any text rendered with that paint.

The animation has a duration of 10 seconds. With REVERSE mode, one full cycle (0 -> 1 -> 0) takes 20 seconds.

• At t=0s, value is 0.
• At t=10s, value is 1. (Forward pass)
• At t=20s, value is 0. (Reverse pass completes one cycle)
• At t=25s, the animator is 5 seconds into its second cycle, which is a forward pass. 5 seconds into a 10-second animation corresponds to an animated fraction of 5/10 = 0.5. With a linear interpolator, the animated value will be 0 + 0.5 * (1 - 0) = 0.5.