PaintIt, Part 1: Setting it up

This tutorial will help you design an app in which the user can draw dots or draw lines on a canvas, and use buttons to change the color and to erase all drawings. It then links to a lot of ideas for extending your app.

Making this app will let you explore the canvas component, challenge you to get creative with buttons and layout components, and let you continue to practice working with thinking through blocks logically.

Start by Designing

If you haven’t done this already, draw a picture of what you want your app to look like! You can always change your mind later, but start on paper for now.

Here are a few possibilities:

You can use one of these ideas or anything else you can think of!

Now…how do I make my design in AppInventor?

To get started, you’ll need a Canvas — this is the space where the user will draw. Remember, it’s in the Drawing and Animation section.

You’ll want to make it bigger. For its height and width properties, you have a choice: you can set a percent of the screen that it should fill, or you can choose fill parent, which means “take up all space that is available.”

Next, you’ll need to add some buttons. You’ll need at least four buttons: choose at least three different colors and one to clear the drawing.

Before you go on, rename your buttons. This will make your code so much easier to write! Choose names that help you know which button is which:

Now, to make it look nice: you can use the horizontal arrangement component to put things side by side. Drag one into your app, then drag other components into it. Here’s an example:

You can also use the component called vertical arrangement to help you put things on top of each other, and you can put arrangements inside other arrangements! Here is an example that shows both:

As you work with horizontal and vertical arrangements, look for the blue lines that appear. They show you where you are putting something!

Finally, take some time to make your buttons look nice. You can change the text (the words they show), the color of the text and the button itself, the size of the text, the shape of the button, and much more. Here’s an example:

As you work on your layout, don’t just look at it on the computer — test it on a device too! It will probably look a little bit different on the tablet.

When you’re happy with how it looks and ready to start coding, go on to to part 2: drawing dots.