Create a mask to bigger Image using another smaller image with transparency

Question

I have two Images. Image 1 is big and only has some colors. Image 2 has vector numbers in black color with transparent background. I am trying to color Image 2 letters using Image 1 colors. I have tried using .svg then converting to bitmap.

I have tried creating my very own CustomImage (which overrides View). I am also overriding OnDraw, to draw the bitmaps and using PorterDuffXerMode to create the mask in real time.

I expect to get the colored sevens, without the black background or the rest of the image on the right side.

This is image 1 ---> https://i.stack.imgur.com/ha1lN.png

This is image 2---> https://i.stack.imgur.com/HQrme.png

Result---> https://i.stack.imgur.com/atJYF.jpg

<vector android:height="93dp" android:viewportHeight="93"
    android:viewportWidth="318.97" android:width="319dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#010101" android:pathData="M0,0l0.7,11.51l41.97,0l-38.08,67.92l9.59,6.19l49.54,-85.62l-63.72,0l63.72,0"/>
    <path android:fillColor="#010101" android:pathData="M255.25,0l0.71,11.51l41.96,0l-38.08,67.92l9.59,6.19l49.54,-85.62l-63.72,0l63.72,0"/>
    <path android:fillColor="#010101" android:pathData="M191.32,0l0.71,11.51l41.96,0l-38.08,67.92l9.59,6.19l49.55,-85.62l-63.73,0l63.73,0"/>
    <path android:fillColor="#010101" android:pathData="M127.6,0l0.71,11.51l41.96,0l-38.08,67.92l9.59,6.19l49.54,-85.62l-63.72,0l63.72,0"/>
    <path android:fillColor="#010101" android:pathData="M63.88,0l0.7,11.51l41.97,0l-38.08,67.92l9.59,6.19l49.54,-85.62l-63.72,0l63.72,0"/>
</vector>

<vector android:height="93dp" android:viewportHeight="93"
    android:viewportWidth="797.67" android:width="798dp"
    xmlns:aapt="http://schemas.android.com/aapt" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:pathData="M0.5,0.5h796.67v92h-796.67z"
        android:strokeColor="#000" android:strokeWidth="1">
        <aapt:attr name="android:fillColor">
            <gradient android:endX="797.17" android:endY="46.5"
                android:startX="0.5" android:startY="46.5" android:type="linear">
                <item android:color="#FFF6B046" android:offset="0"/>
                <item android:color="#FFF870F3" android:offset="0.16"/>
                <item android:color="#FF00D2FE" android:offset="0.37"/>
                <item android:color="#FF00E3CD" android:offset="0.55"/>
                <item android:color="#FFF871F0" android:offset="0.79"/>
                <item android:color="#FFF784BD" android:offset="0.86"/>
                <item android:color="#FFF6AD4E" android:offset="1"/>
            </gradient>
        </aapt:attr>
    </path>
</vector>

Vectors data:

    private Bitmap mImage;
    private Bitmap mMask;
    private int posX=0;
    private int posY=0;

    private Paint maskPaint;
    private Paint imagePaint;

    public CustomImage(Context context, AttributeSet attrs) {
        super(context, attrs);
        maskPaint  = new Paint();
        maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

        imagePaint = new Paint();
        imagePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.save();

        mImage = getBitmap(getContext(), R.drawable.colors2);
        mMask = getBitmap(getContext(), R.drawable.ic_black_seven);

        setLayerType(LAYER_TYPE_HARDWARE, maskPaint);
        setLayerType(LAYER_TYPE_HARDWARE, imagePaint);
        canvas.drawBitmap(mImage, posX, posY, imagePaint);
        canvas.drawBitmap(mMask, 0, 0, maskPaint);
        canvas.restore();
    }

    private static Bitmap getBitmap(VectorDrawable vectorDrawable) {
        Bitmap bitmap = Bitmap.createBitmap(vectorDrawable.getIntrinsicWidth(), vectorDrawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        vectorDrawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        vectorDrawable.draw(canvas);
        return bitmap;
    }

    private static Bitmap getBitmap(Context context, int drawableId) {
        Drawable drawable = ContextCompat.getDrawable(context, drawableId);
        if (drawable instanceof BitmapDrawable) {
            return BitmapFactory.decodeResource(context.getResources(), drawableId);
        } else if (drawable instanceof VectorDrawable) {
            return getBitmap((VectorDrawable) drawable);
        } else {
            throw new IllegalArgumentException("unsupported drawable type");
        }
    }
}```