Fixed Background Image in android without scroll listener

Question

I'm working on an android library to display an image as a fixed background image. To do this, I'm dynamically ajusting the position of the image every 10ms based on the locationOnScreen. I understand that it's an aweful solution, but I'm here to improve this :)

The issue with this is that there is a glitch when the parent scrollable view is scrolling too fast and the image jump while the other view are moving. (click on the gif for the full demo)

As it's a library, I don't want to add complexity when integrating the lib, meaning no scroll listener, theme or no window override etc.

Solution tried:
- changing the loop delay
- using window background is not possible for a library
- no access to activity theme or similar

handler

    override fun run() {
        fixedBackgroundImageLayout.getLocationOnScreen(locationOnScreen)
        fixedBackgroundImagePlugin.update(locationOnScreen)

        handler.postDelayed(this, 10)
    }

FixedBackgroundImagePlugin#update

    override fun update(locationOnScreen: IntArray) {
        if (backgroundImageFrameLayout == null) {
            return
        }
        yPosition = parentLocationOnScreen[1] - locationOnScreen[1]
        backgroundImageFrameLayout.top = 2 * yPosition - lastYPosition - 10
        lastYPosition = yPosition
    }

the backgroundImageFrameLayout has the image as a background image.

I've also setup a sample repository to help you dig in if wanted.

I'm open to any advice/lead

Answer 1

Update: Previous code I posted had some interaction issues that, surprisingly, made the code work but pegged the CPU. The following code is substantially like the previous code, but behaves. Although the new code involves a scroll listener that causes the view to redraw itself, it is self-contained. The scroll listener is needed to detect when the view is re-positioned on the screen. When called, the scroll listener simply invalidates the view.

---

You can do what you need all within the custom view BackgroundImageFrameLayout. Here is a draw() override that will take care of drawing the background of the FrameLayout that holds the image.

Add the following to the init block:

viewTreeObserver.addOnScrollChangedListener {
    invalidate()
}

Add the following override method to BackgroundImageFrameLayout:

override fun onDraw(canvas: Canvas) { // draw(canvas) may be better choice.
    if (background == null) {
        return
    }

    // Get the location of this view on the screen to compute its top and bottom coordinates.
    val location = IntArray(2)
    getLocationOnScreen(location)
    val imageTop = location[1]
    val imageBottom = imageTop + height

    // Draw the slice of the image that should be viewable.
    canvas.save()
    canvas.translate(0f, -imageTop.toFloat())
    background?.setBounds(0, imageTop, width, imageBottom)
    background?.draw(canvas)
    canvas.restore()
}

Remove everything else that tries to manipulate the background - you won't need it.

Here is a demo of the app with the new onDraw():

I think there may be some other issues with the size of the screen vs. the size of the image, but this is the direction that you should go (IMHO.)