How to merge two images in Xamarin Android and position it the same way like CGRect for iOS?

Question

I successfully get out the two images in my resources folder in my project like this.

string BackGroundImage = "background_image";
string ObjectImage = "object_image";

var TheBackGroundImage = BitmapFactory.DecodeResource(Resources, Resources.GetIdentifier(BackGroundImage, "drawable", PackageName));
var TheObjectImage = BitmapFactory.DecodeResource(Resources, Resources.GetIdentifier(ObjectImage, "mipmap", PackageName));

What i have done after is very the tricky part comes in and I do not know how to quite get it right. What i try to do is create a new Bitmap where the BackgroundImage is the base. Then i create a canvas with my second image (ObjectImage) that is the image that will be on top of the BackgroundImage and try to merge it all together.

Bitmap Result = Bitmap.CreateBitmap(TheBackGroundImage.Width, TheBackGroundImage.Height, TheBackGroundImage.GetConfig());
Canvas canvas = new Canvas(Result);
canvas.DrawBitmap(ObjectImage, new Matrix(), null);
canvas.DrawBitmap(ObjectImage, 79, 79, null);

This does not work as anticipated, is canvas the way to go or is there somethinig else i should look at?

If we look at my iOS solution then i do it like this:

            UIImage PhoneImage = UIImage.FromFile(PhonePath);
            UIImage IconImage = UIImage.FromFile(IconPath);
            UIImage ResultImage;

            CGSize PhoneSize = PhoneImage.Size;
            CGSize IconSize = IconImage.Size;

            UIGraphics.BeginImageContextWithOptions(IconSize, false, IconImage.CurrentScale); //UIGraphics.BeginImageContextWithOptions(IconSize, false, IconImage.CurrentScale);
            UIGraphics.BeginImageContext(PhoneSize);

            CGRect Frame = (new CoreGraphics.CGRect(25, 29.5, 79, 79));
            UIBezierPath RoundImageCorner = new UIBezierPath();
            RoundImageCorner = UIBezierPath.FromRoundedRect(Frame, cornerRadius: 15);

            PhoneImage.Draw(PhoneImage.AccessibilityActivationPoint);
            RoundImageCorner.AddClip();
            IconImage.Draw(Frame);

            UIColor.LightGray.SetStroke();
            RoundImageCorner.LineWidth = 2;
            RoundImageCorner.Stroke();

            ResultImage = UIGraphics.GetImageFromCurrentImageContext();
            UIGraphics.EndImageContext();

            var documentsDirectory = Environment.GetFolderPath(Environment.SpecialFolder.Personal);
            string jpgFilename = System.IO.Path.Combine(documentsDirectory, "app.png");

            NSData image = ResultImage.AsPNG();

And it works beautifully with a border around my second image as well.

How can i adjust my code to successfully merge two images together and position the second image preferably like a CGRect?

Answer 1

Try this:

public Bitmap mergeBitmap(Bitmap backBitmap, Bitmap frontBitmap)
{
    Bitmap bitmap = backBitmap.Copy(Bitmap.Config.Argb8888, true);
    Canvas canvas = new Canvas(bitmap);
    Rect baseRect = new Rect(0, 0, backBitmap.Width, backBitmap.Height);
    Rect frontRect = new Rect(0, 0, frontBitmap.Width, frontBitmap.Height);
    canvas.DrawBitmap(frontBitmap, frontRect, baseRect, null);
    return bitmap;
}

Update:

Here is the DrawBitmap method's introduce. I add annotations in the method.

    public Bitmap mergeBitmap(Bitmap backBitmap, Bitmap frontBitmap)
    {
        Bitmap bitmap = backBitmap.Copy(Bitmap.Config.Argb8888, true);
        Canvas canvas = new Canvas(bitmap);

        //this Rect will decide which part of your frontBitmap will be drawn,
        //(0,0,frontBitmap.Width, frontBitmap.Height) means that the whole of frontBitmap will be drawn,
        //(0,0,frontBitmap.Width/2, frontBitmap.Height/2) means that the half of frontBitmap will be drawn.
        Rect frontRect = new Rect(0, 0, frontBitmap.Width, frontBitmap.Height);

        //this Rect will decide where the frontBitmap will be drawn on the backBitmap,
        //(200, 200, 200+ frontBitmap.Width, 200+frontBitmap.Height) means that
        //the fontBitmap will drawn into the Rect which left is 200, top is 200, and its width and
        //height are your frontBitmap's width and height.
        //I suggest the baseRect's width and height should be your fontBitmap's width and height,
        //or, your fontBitmap will be stretched or shrunk.
        Rect baseRect = new Rect(200, 200, 200+ frontBitmap.Width, 200+frontBitmap.Height);

        canvas.DrawBitmap(frontBitmap, frontRect, baseRect, null);
        return bitmap;
    }