How to color different parts of text drawn on canvas in Android?

Question

I am trying to recreate the following animation:

You can access the GIF animation here: https://github.com/ugomeda/d3-liquid-fill-gauge

In this animation, when waves rise and fall, the color of the text changes: the part of the text above the waves is colored blue, and the part below the waves is colored blue. Is there any way to implement this on Android?

I implemented the rest of the animation exactly as shown in the image above:

Here is the code where I draw on the canvas:

public void createShader(){

    mDefaultAngularFrequency = 2.0f * Math.PI / DEFAULT_WAVE_LENGTH_RATIO / getWidth();
    mDefaultAmplitude = (getHeight()) * DEFAULT_AMPLITUDE_RATIO;
    mDefaultWaterLevel = (getHeight())  * DEFAULT_WATER_LEVEL_RATIO;
    mDefaultWaveLength = getWidth();

    Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);

    final int endX = getWidth() + 1;
    final int endY = getHeight() + 1;

    float[] waveY = new float[endX];

    for (int beginX = 0; beginX < endX; beginX++) {
        double wx = beginX * mDefaultAngularFrequency;
        float beginY = (float) (mDefaultWaterLevel + mDefaultAmplitude * Math.sin(wx));
        canvas.drawLine(beginX, beginY, beginX, endY, mWavePaint);

        waveY[beginX] = beginY;
    }

    mWaveShader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.CLAMP);
    mWavePaint.setShader(mWaveShader);

}

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    // Draw the outer circle
    canvas.drawCircle(getWidth()/2, getHeight()/2, getWidth()/2 - 15, mCirclePaint);

    if (mWavePaint.getShader() == null) {
        createShader();
        mWavePaint.setShader(mWaveShader);
    }

    // scale shader according to mWaveLengthRatio and mAmplitudeRatio
    // this decides the size(mWaveLengthRatio for width, mAmplitudeRatio for height) of waves
    mShaderMatrix.setScale(mWaveLengthRatio / DEFAULT_WAVE_LENGTH_RATIO, mAmplitudeRatio / DEFAULT_AMPLITUDE_RATIO,
            0, mDefaultWaterLevel);
    // translate shader according to mWaveShiftRatio and mWaterLevelRatio
    // this decides the start position(mWaveShiftRatio for x, mWaterLevelRatio for y) of waves

    mShaderMatrix.postTranslate(mWaveShiftRatio * getWidth(),
            (DEFAULT_WATER_LEVEL_RATIO - mWaterLevelRatio) * getHeight());

    // assign matrix to invalidate the shader
    mWaveShader.setLocalMatrix(mShaderMatrix);

    //draw the inner circle
    float innerCircleRadius = getWidth()/2 - 30;
    canvas.drawCircle(getWidth() / 2f, getHeight() / 2f, innerCircleRadius, mWavePaint);

    //draw the text inside the circles
    canvas.drawText(String.format("%.0f", mPercentageValue) + "%", getWidth() / 2 - 10,
            (getHeight() - mTextPaint.ascent()) / 2, mTextPaint);

}

And here is the code where I animate the waves in MainActivity:

ObjectAnimator waveShiftAnim = ObjectAnimator.ofFloat(l, "waveShiftRatio", 0f, 0.5f);
    waveShiftAnim.setRepeatCount(ValueAnimator.INFINITE);
    waveShiftAnim.setDuration(mWaveAnimDuration);
    waveShiftAnim.setInterpolator(new LinearInterpolator());
    animators.add(waveShiftAnim);