Colour-by-number app help!

Hello, I am currently working on an app where you can color pixels to create a picture, but Im not quite sure how im going to display the pixels... Is there a possibility to put an image as background and automatically color in the pixels given by the image? Do I have to put a big table arrangement as canvas and create many rows and columns so it looks like pixels? Can I create the pixel outlines by drawing a grid on the canvas? Or a whole different way? I want to put numbers in the pixel squares and each number represents one color and you can only color the pixel that way

I hope you understand what Im trying to say and thanks in advance for every reply!

What you describe is not entirely possible.

To manipulate pixels using App Inventor, use the Canvas and the Drawing and Animation components .

Also be sure to review Creating Animated Apps

also consider this stuff>


Your description sounds more like colour-by-numbers than pixel art. In other words, you would have areas of the image to colour-in?

Pixel Art requires a sophisticated mathematical approach which you can only really achieve with text based languages, java being popular on Android. On top of that, you need to have a good understanding of computer science in order to code something that is consistent.

1 Like

Yeah that's exactly what Im trying to do! Im sorry for using the wrong term English isn't my first language and I just didn't remember that it's called colour-by-number...

OK, so you can set the background of a Canvas Component with the image to be coloured in. How complex is the colour pallette going to be? Just a small number of colours or a large amount? If only a few, then they can be buttons. So let's say Green is colour number 5:

and the Blocks code for the Button click event:


What is difficult though, is accuracy. On a PC you have a mouse cursor but on a phone you have a finger. What you can do however is control the size of the blob (point) of colour that a touch makes via LineWidth size.


1 Like

A very crude example just to give you an idea. I have used buttons for a fixed range of Blob sizes, but you could have a wider range using a slider or spinner. Same with the colours - you could use a simple HTML table to offer a greater range.

ColourByNumbers.aia (4.4 KB)

1 Like

Thank you so so much for both of your replies it really helped a lot!!