Exploring Android P: Magnifier

At Google I/O there were a lot of new announcements around the latest version of Android, P. One of these announcements was the new Magnifier functionality—a feature that will make it easier to view and select content that the magnifier is currently being shown for. In this article we’re going to take a quick dive into what this magnifier is and how we can use it on our own view components within our applications.


Now, if you haven’t seen the new Magnifier component that is available in Android P then this is what it currently looks like:

It’s quite a simple touch, but the impact it will have for its intended functionality is going to be huge. Selecting specific text on Android has never been the simplest thing — your finger covers the text and you can quite see what it is you’re selecting, we’ve all been there! Not only will this new tool make this easier, but when it comes to accessibility then this feature also makes text related tasks much simpler. I can even see users utilising the tool to focus on text as they are reading through content.

Now the great thing is that the Magnifier is automatically available for all views that extend the TextView component — so in most cases we won’t need to change anything within our application, as users will be able to magnify the text content straight out of the box. The thing is, there will be some cases where we want to allow the magnification of content that may not extend the TextView class. Luckily for us, the framework provides us with the ability to do just that.

When we want to create a Magnifier instance we simply call the class constructor passing in the reference to the view which we are providing magnification for:

val magnifier = Magnifier(someView)

At this point our magnifier is attached to the view but noting is actually being done with it, so we need to add some logic to show it on the screen. For this we’re going to set a touch listener on our view:

someView.setOnTouchListener { view, motionEvent ->
when (motionEvent.action) {
MotionEvent.ACTION_DOWN -> {
magnifier.show(motionEvent.x, motionEvent.y)
}
MotionEvent.ACTION_MOVE -> {
magnifier.show(motionEvent.x, motionEvent.y)
}
MotionEvent.ACTION_UP -> {
magnifier.dismiss()
}
}
true
}

Now, when the down event is detected we want to call the magnifiers show()t function — this is used to display the magnifier on screen to the user. This function call takes two parameters:

  • xPosInView — the horizontal coordinate to be used for the central point of the magnifier
  • yPosInView — the vertical coordinate to be used for the central point of the magnifier

When we call this, the magnifier will use the given coordinates to display the content of our view from the given position inside of the magnifier instance. You’ll notice that we also call this again each time when the ACTION_MOVE event is detected — this is because as the user moves their finger around the screen we want to update the magnifier with the latest coordinates of the touch position.

Note: The magnifier does also have an update() function which forces the magnifier to update its content. However, this does not take any parameters and just uses the coordinates that were originally passed into the show() function.

Finally, when we detect the ACTION_UP event we simply make a call to the magnifier dismiss() function so that the magnifier is removed from the window.

But why would we want to do this? Well, we may be painting text instead of showing it inside of a TextView. In this case, the system won’t provide us with the magnifier out of the box. So in these cases you will want to provide a magnifier so that the user can still make use of the advantages that it gives us:

At to be honest, there may be some other view that you’ve created that you think a magnifier would be useful for. Just like before, pass in the instance to your view when using the Magnifier constructor and a magnifier will be attached to your view.


I hope this short post has shared some useful information on the new Magnifier class in Android P. What are your thoughts on this new class? How will you make use of it in your applications? Please do get in touch and share your thoughts and comments on this one!