Xamarin.Android Rounded Corners Masked Layout

If you want to create a FrameLayout that has real rounded corners and clips its children beyond its corners, you can use the following class, which is a port of an answer on StackOverflow. You should replace Constants.PackageName with your Android package name, e.g. com.mycompany.myapp.

using Android.Content;
using Android.Graphics;
using Android.Runtime;
using Android.Util;
using Android.Widget;

namespace UIWidgets.Android
{
[Register(Constants.PackageName + ".UIWidgets.Android.RoundedCornerLayout")]
public class RoundedCornerLayout : FrameLayout
{
const float CornerRadius = 20.0f;

Bitmap maskBitmap;
Paint paint, maskPaint;
float cornerRadius;

public RoundedCornerLayout(Context context) : base(context)
{
Init(context);
}

public RoundedCornerLayout(Context context, IAttributeSet attrs) : base(context, attrs)
{
Init(context, attrs);
}

public RoundedCornerLayout(Context context, IAttributeSet attrs, int defStyle) : base(context, attrs, defStyle)
{
Init(context, attrs, defStyle);
}

void Init(Context context, IAttributeSet attrs = null, int defStyle = 0)
{
DisplayMetrics metrics = Context.Resources.DisplayMetrics;
cornerRadius = TypedValue.ApplyDimension(ComplexUnitType.Dip, CornerRadius, metrics);
paint = new Paint(PaintFlags.AntiAlias);
maskPaint = new Paint(PaintFlags.AntiAlias | PaintFlags.FilterBitmap);
maskPaint.SetXfermode(new PorterDuffXfermode(PorterDuff.Mode.Clear));
SetWillNotDraw(false);
}

public override void Draw(Canvas canvas)
{
Bitmap offscreenBitmap = Bitmap.CreateBitmap(canvas.Width, canvas.Height, Bitmap.Config.Argb8888);
Canvas offscreenCanvas = new Canvas(offscreenBitmap);

base.Draw(offscreenCanvas);

maskBitmap = maskBitmap ?? CreateMask(canvas.Width, canvas.Height);
offscreenCanvas.DrawBitmap(maskBitmap, 0.0f, 0.0f, maskPaint);
canvas.DrawBitmap(offscreenBitmap, 0.0f, 0.0f, paint);
}

Bitmap CreateMask(int width, int height)
{
Bitmap mask = Bitmap.CreateBitmap(width, height, Bitmap.Config.Alpha8);
Canvas canvas = new Canvas(mask);

Paint paint = new Paint(PaintFlags.AntiAlias);
paint.Color = Color.White;

canvas.DrawRect(0, 0, width, height, paint);

paint.SetXfermode(new PorterDuffXfermode(PorterDuff.Mode.Clear));
canvas.DrawRoundRect(new RectF(0, 0, width, height), cornerRadius, cornerRadius, paint);

return mask;
}
}
}

And to use it in your AXML:

 <UIWidgets.Android.RoundedCornerLayout
 android:layout_width="150dp"
 android:layout_height="150dp">

 <RelativeLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#FFDDAA"
 />
 </UIWidgets.Android.RoundedCornerLayout>

REST requests with Xamarin and RestSharp

RestSharp (available on NuGet) is a clean way to send HTTP requests and handle their response. As a portable package, you can use it in your Xamarin.iOS and Xamarin.Android applications. The following example, POSTs a serialized JSON body, created automatically from a C# class, to an endpoint located at https://myserver.com/api/messages/message. It also sends a token parameter inside the query string:

public class MessageDTO : DTO
{
    public string Sender { get; set; }
    public string Recipient { get; set; }
    public string Body { get; set; }
}
public static class PinHelper
{
    async void SendMessage(MessageDTO dto)
    {
        const string ApiPath = "https://myserver.com/api/";
        var client = new RestClient (ApiPath);
        var request = new RestRequest ("messages/message", Method.POST);
        request.AddQueryParameter ("token", Settings.Token);
        request.AddJsonBody (dto);

        try
        {
            var result = await client.ExecuteTaskAsync(request);
            Debug.WriteLine($"Result Status Code: {result.StatusCode} - {result.Content}");
        }
        catch (Exception e) {
            Debug.WriteLine ($"Error: {e.Message}");
        }
    }
}

On an ASP.NET WebApi controller with EntityFramework, this request can be received and stored using a function that looks like this:

[HttpPost][Route("message")]
public IHTTPActionResult AddMessage(string token, [FromBody] MessageDTO dto)
{
    Message message = new Message ();
    dto.Inject (message);
    db.Messages.Add (message);
    db.SaveChanges ();

    return Ok ();
}

Batch resizing images with Python and Pillow

Pillow is a fork of PIL (Python Imaging Library) which works on Python 3. It provides convenient methods to manipulate and convert image files with just a few lines of code. Usually every mobile application platform requires the same image to be provided in multiple sizes, and since resizing these images manually can be cumbersome, Pillow and Python can come to save the day by automating these processes.

from PIL import Image

inputName = "image.png"
sizes = (512, 256, 128, 64, 32)

img = Image.open(inputName)
for size in sizes:
    name = "{}-{}.png".format(inputName, size)
    resizedImage = img.resize((size, size), Image.ANTIALIAS)
    resizedImage.save(name)

Continue reading

Traces of Love Random Development Notes

Last week we released a new Neat Games title: Traces of Love, with a romantic theme aimed for Valentine’s day. This was a remake of BLAMMO: Trace of Love that we published in 2013, with new levels, new gameplay mechanics, and of course, a different game engine. You can download Traces of Love from the App Store, or if you have an Android device, from the Play Store. A version with limited features is also available on the Windows Store, if you prefer to try that one.

Continue reading

Exporting Unity frames as Animated GIFs

Recently I discovered a Unity-compatible library that allows exporting Unity textures into animated GIFs. This library is extremely easy to use and platform independent. It is called GifEncoder, which is based on NGif, an older C# based project for encoding GIFs.

To use it, just copy the GifEncoder folder to your Assets directory, point a camera at what you would like to record, and in each frame send the pixels from the camera’s render target to the encoder:

public void Update()
{
   renderCamera.Render();
   RenderTexture.active = renderTexture;
   var frameTexture = new Texture2D(renderTexture.width, renderTexture.height, TextureFormat.RGB24, false);
   frameTexture.ReadPixels(new Rect(0, 0, renderTexture.width, renderTexture.height), 0, 0);
   gifEncoder.AddFrame(frameTexture);
   UnityEngine.Object.Destroy(frameTexture);
}

Continue reading