Android Custom View 102

Android Custom View 102 (Part 19)

More Advanced ObjectAnimator examples

Guowei Lv

2 minute read

In this post let’s take a deeper look at some of the more advanced uses of ObjectAnimator. KeyFrame First example is the usage of KeyFrames. Here is the final result:

Let’s look at the code val imageView = findViewById<ImageView>(R.id.imageView) /** In total we want to move 300dp. 0% of time passed, it has moved 0dp. 30% of time passed, it has moved 100dp. 60% of time passed, it has moved 120dp.

Android Custom View 102 (Part 18)

ObjectAnimator example

Guowei Lv

2 minute read

In this post let’s look at how to do this cool animation using ObjectAnimator. This is built on top of previous post

class CameraView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : View(context, attrs, defStyleAttr) { private val paint = Paint(Paint.ANTI_ALIAS_FLAG) private val imageSize = dp2px(200) private val leftPadding = dp2px(100) private val topPadding = dp2px(100) private val image = getAvatar(imageSize) private val camera = Camera() private var cameraRotationUpper = 0.

Android Custom View 102 (Part 17)

Using camera in canvas transformations

Guowei Lv

2 minute read

Let’s look at how to use camera in canvas transformation. First this is what we want to implement:

The trick is to draw the upper and lower part separately. And we are using this “reverse drawing” technique. Upper part override fun onDraw(canvas: Canvas) { super.onDraw(canvas) canvas.save() canvas.drawBitmap(image, leftPadding, topPadding, paint) canvas.restore() } override fun onDraw(canvas: Canvas) { super.onDraw(canvas) canvas.save() canvas.translate(-(leftPadding + imageSize / 2), -(topPadding + imageSize / 2)) canvas.

Android Custom View 102 (Part 16)

More on canvas transformations

Guowei Lv

3 minute read

In this post I want to go into details on canvas transformations, especially if we want to combine them. Let’s take the simple example of translation + rotation. The end result is like this:

We can easily see that the image has been translated to (300, 200) and then rotated 45 degrees. class TransformView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : View(context, attrs, defStyleAttr) { private val paint = Paint(Paint.

Android Custom View 102 (Part 15)

Draw circled avatar

Guowei Lv

1 minute read

Let’s use Xfermode to draw a circled avatar. The original avatar image is this:

We will implement a custom view that clips it into a circle. class Avatar @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : View(context, attrs, defStyleAttr) { private val WIDTH = dp2px(300) private val PADDING = dp2px(50) val paint = Paint(Paint.ANTI_ALIAS_FLAG) val bitmap = getAvatar(WIDTH.toInt()) val xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN) val savedArea = RectF() override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { super.