Android Custom Views Masterclass

Explore the basics of custom views in Android by building a slider UI element with touch-driven thumb drag from zero to one, laying groundwork for advanced UI.

Explore the scaffold of a custom view by extending the base view class, overriding constructors, and implementing onSizeChanged and onDraw to initialize size-dependent values and render on the canvas.

Explore how Android views use a screen-aligned coordinate system with x and y axes, where each view’s getX and getY are relative to its parent’s origin, not the screen.

Explore density independent pixels and how they size user interface elements by physical length across devices. Learn the 160 dpi definition and how to convert between dp and pixels.

Create a custom view to draw a red line on the screen with a canvas and paint, handling on size changed and on draw with dp-to-px conversion.

Draw a centered rectangle with canvas.drawRect and a RectF. Compute width as view width minus margins; height equals half the width in onSizeChange, using a shared paint.

Draw a circle in Android Studio with canvas draw circle and a center. Fetch color from colors.xml via context compat and compute center coordinates and radius in size change.

Implement a non-interactive slider mockup by drawing a horizontal track and a circular thumb within the my slider view, leaving side margins equal to the thumb radius.

Review the exercise one solution in the solutions package and test your implementation. Replace the exercise one view, rebuild, and relaunch to compare results as later exercises increase in difficulty.

Master the concepts of view positioning in Android custom views, including left, translationX, and x properties, and learn how the layout system and UI post calls affect post-layout updates.

Explore touch handling in Android, using on touch listener to log motion events such as action down, move, up, and cancel, with view and raw coordinates.

Create a draggable circle in a custom view by overriding the on touch event, detecting touches inside the circle via distance from the center, updating the center, and calling invalidate.

Apply draggable thumb to the slider in Android custom views masterclass, detect touches on the circular thumb, constrain motion to the track, and manage edge behavior as you drag.

Review the solution to exercise two to implement a draggable slider thumb. Learn how distance calculations and edge case handling prevent dragging beyond track bounds and ensure correct thumb movement.

Exercise three of Android custom views masterclass adds slider value tracking. Map the thumb to a 0–1 value, notify the slider change listener, and show the value in a field.

Review the Android custom views masterclass exercise three solution: a slider with a text view that updates as the thumb moves, using a value change callback.

Preserve a custom view's state across configuration changes and process death by saving and restoring circle position using fractional coordinates and a dedicated saved state class.

Preserve the slider's state across configuration changes and process death in Android custom views by implementing onSaveInstanceState and onRestoreInstanceState using the circle saved state class.

Explore a custom view solution to exercise four, implementing state preservation via parcel, computing the thumb value from touch, and handling configuration changes.

Master the basics of Android custom views by understanding coordinate systems, drawing, and touch handling. Preserve state across configuration changes and process death to ensure robust, efficient custom views.

Explore the basics of animations, defined as gradual changes of properties over time, and learn how motion provides visual feedback, ripple effects, progress indicators, and data visualization in Android apps.

This lecture shows manual animation of an Android view using a loop animator and choreographer frame callbacks, illustrating the complexity and why simpler, proper approaches are preferred.

Demonstrates using the ObjectAnimator class to animate an android view's translationX, replacing manual animations and achieving synchronized, looped motion with proper duration, repeat mode, and interpolator.

Learn to animate a dot inside a custom view using ValueAnimator, with startAnimation(period) and stopAnimation(), and compute the circle position from a 0–1 fraction to redraw via invalidate.

Learn to use the Path class to draw custom shapes, such as an equilateral triangle, via moveTo, lineTo, and close, with padding and anti-aliasing for smooth edges.

Visualize animating path drawing on a canvas with a reference triangle, path measure, and value animator. Create a looping draw-and-erase sequence by segmenting the path with fractions.

Practice drawing a green check mark in an Android custom view, then animate it, scaling to fit width or height, calculating vertices from a right triangle, and animating the path.

Review the exercise five solution, showing how to size and draw an animated checkmark in an Android custom view using a reference path, path measure, and a value animator.

Add a scale animation to the animated check mark after the path animation finishes, using a value animator of float and a canvas scale to create a pop effect.

Discover how to combine a check mark animation with a scale animation using value animators and AnimatorSet for fluent sequencing in Android custom views.

Explore animating Android custom views, from external animations of the entire view to internal animations for custom shapes like a triangle, using value animator and path measure to redraw onDraw.

Learn to add text to Android custom views, enabling textual information alongside drawing and animation to build more complex, useful components.

Explore how to draw text in Android custom views, enable auto scaling to fit space, and control alignment, font, color, and measurement using text bounds and paint.

Learn to draw arcs with the path class, including a three-quarter circle inscribed in a square, using add arc, add rect, and add round rect for rounded corners.

Build a coupons indicator panel as a custom Android view, handling total and used coupons, text scaling, rounded corners, and binding before or after a change callback.

Review the solution to exercise seven by implementing a custom view that renders coupon cells with rounded corners, borders, and adaptive text sizing, and transparency for used vs available coupons.

Implement onMeasure to report a custom view's desired size, handling measure spec modes exactly and at most, and use set measured dimensions to guide the layout system.

Build a states progression indicator in a custom view that auto sizes to content, draws bullet points and names with active and inactive colors, and uses invalidate and requestLayout appropriately.

Review the exercise eight solution and explain why bind states use request layout while bind current state uses invalidate. Show how active and inactive colors, circles, text alignment are drawn.

Master the basics of working with texts inside your custom views in Android, learn essential tools for text handling, and use the community forum for help with special requirements.

Explore matrixes and matrix transformations rooted in linear algebra and learn practical, intuitive techniques for using them in Android custom views.

Explore how translation, rotation, and scale matrices transfer points and shapes in Android custom views. Build intuition with practical examples and learn to compose them into a general transformation matrix.

Learn to translate an arrow inside an Android custom view using a transformation matrix and post translate, applying the matrix to the drawn path via inner translation properties.

Master rotating elements in Android custom views with matrices by translating to a pivot and applying rotation. Learn that the operation order matters for rotation around the pivot.

Explore scaling custom Android views with matrices, using a slider to adjust inner scale, and scale around the origin or the arrow’s center to control pivot points.

Concatenate matrices to perform multiple transformations in one operation with the standard matrices api, and learn to order post scale, post rotate, and post translate.

Explore applying canvas transformations in Android custom views using translate, rotate, and scale, distinguish transforming paths with matrices from canvas transforms, and use save and restore for multiple objects.

In the Android custom views masterclass, exercise nine guides you to implement a draggable crosshair using matrix transformations and canvas drawing, handling configuration changes so the crosshair stays in place.

Explore a solution to exercise nine, implementing a draggable crosshair with fractional positions for save state and restore, and canvas transformations that draw four rotated hairs.

Learn how to implement complex multi-touch gestures in Android custom views using the gesture detector class, including pointers, on down, on scroll, on fling, and velocity-based interactions.

Learn to implement pinch-to-zoom with the Android scale gesture detector by tracking incremental scale factors from onScale and applying them to a view, while displaying the current scale.

Learn to implement a custom two-finger rotation gesture detector in Android, handling multi-touch pointers, angle calculation, and rotation begin/end callbacks, since Android lacks a built‑in rotation detector.

Design an interactive smiley with matrix transformations enabling drag, scale, and rotate gestures, using scale and rotation gesture detectors, and preserve state across configuration changes and process death.

Master matrix transformations, combining translation, scaling, and rotation into a single matrix with inverse options, and learn gesture detection for taps, long presses, and two-finger scales, rotation requires custom code.

Join the bonus lecture to access extra resources, links to my other courses with discounts, and stay updated via my blog, newsletter, and social posts about Android and programming.