Must-read Guide for New Sketchware Developers

Congratulations on your first step towards becoming an Android app developer!

Sung Park

Published in

Sketchware

9 min readMay 17, 2017

Hello, Aspiring Developer!

Welcome to Sketchware, an Android app development platform on your Android smartphone! This guide will help you get started using Sketchware, as well as making the most out of it.

Don’t have Sketchware installed? Click here!

If you are here from Sketchware and want to exit this guide at any point, simply press the back button to be redirected to Sketchware. But, PLEASE read this guide! I promise your 10 minutes of investment will help you create amazing mobile apps. :-)

This guide will cover two short topics:

1. Understanding the Features in Sketchware
2. Starting and Sharing Your First Project

Step 1. Understanding the Features

Sketchware will look like this when you first launch the application.

The first screen Sketchware greets you is Shared Projects. On here, you can find projects created by other fellow Sketchware users. Think of it as a Newsfeed for Sketchware Projects — you can like and comment on different projects and see what other people are creating. When you later create your own app, you can share yours here too!

Step 2. Starting Your Project

In Sketchware, there are two ways to start your project.

Sketchware Example
Custom Project

Sketchware Examples

If you don’t have any programming background, we recommend you to get started with Sketchware Examples. They are located under the Shared Projects tab, and these examples are provided to help you get the feel of how things work.

You’ll learn a new programming concept by completing each example. There are detailed tutorials for each example here. But don’t click the link just yet! Finish reading this guide first.

Custom Projects

Do you have prior experience in programming? Great! You can try getting started right away, or you can try and get the hang of it by completing few Sketchware Examples first. It’s your choice!

To get started on a custom project, navigate to My Projects tab. My Projects is where you can create your own applications.

Click on the floating + button in the right bottom corner.

Here, you set the “identity” for your application. You might be confused about the “package name” section. Simply think of the package name as a fingerprint, or a unique name for your application.

Package name is usually in a form of:
some.name.foryourapplication

In this example, I’m going to use com.my.project. Once you click save, you’ll be redirected to the following screen.

View Editor

This is View Editor, where you design your application. On the left, you will find Layouts and Widgets.

Layouts — container that can hold widgets in different orientations
Widgets — basic user interface components, such as Text or Button

To place these, you have to long-click and drag them to the editor, like this:

But as you start placing things inside the editor, you will feel like you can only place things vertically below each widget. You might ask, “How do I place them next to each other?” This is where Layout comes in!

By using different layouts, you will be able to place things in different orientations! (H) stands for Horizontal, and (V) stands for Vertical.

What if we wanted to change colors or font size of the TextView we just placed?

Widgets have different properties, such as background color, width, height, visibility, etc.

To do so, we need to edit its property. We can achieve that by simply clicking on the widget like this:

There are a lot of properties, and you might feel a bit overwhelmed at first. But don’t worry! Sketchware has a built-in Widget Helper that can help you get started! First, let’s open the Widget Helper.

On the helper, you can play around with different properties on various widgets. Here, I played around with the rotate property on the Button Widget. By playing around with different Widgets in the Widget Helper, you will master the concept of property in no time! Once you feel comfortable, try designing your own application.

Next, let’s talk about how we can program our application to function.

Logic Editor

Logic Editor is where you program how your application behaves. For example, you can program what clicking on a Button will do.

Events and Components

Logic Editor is comprised of two main functions:

Events — Event is user-action. It could be something like clicking on a Button or checking a CheckBox.
Components — Think of Components as Widgets working in the background. They handle work such as playing sound or making the phone vibrate.

Note that in the image above, there is a default event provided named onCreate . Whatever you program in this default event will get fired when the application starts. There are, however, more events available than just onCreate event.

Whenever we add a widget that can perform an action, such as a Button, a new event gets added in the events tab. Later on, I’ll explain how you can edit how these events behave. Check it out below. I added a button in the View Editor, and onClick event was added in the Logic Editor.

On the other hand, you have to manually add Components in order to use them, just like Widgets. Don’t worry about these for now.

By combining events and components, it will help you create very powerful applications. Next, let’s talk about how we can change how we can program each event to behave.

Blocks

In Sketchware, you program everything in Blocks. They were inspired by MIT’s Scratch block language. What do they look like? Here, take a look.

The names of blocks are very straight forward right? You can probably guess what each block does by looking at its name.

Like Lego, you can connect these blocks. By connecting them together, you can perform specific actions. For example, if I wanted to say “1 + 2 = 3 is correct” in blocks, it would look like this:

Differently Shaped Blocks

More importantly, take a look at how holes in blocks have different shapes:

These blocks take in different types of input.

Rectangle — It can only take in String (series of characters, such as abc123) value.
Oval — It can only take in Number value, such as 1 or 12312. Does not accept String values.
Hexagon — can only take in true or false value.

Command Blocks and Input Blocks

Also, note that there are different shaped blocks for different purposes.

Blocks that can connect to each other like puzzle pieces are called command blocks. They perform a certain action, such as rotating a widget or changing the text of a widget.

Other blocks that do not connect, are usually used as an input to the command blocks.

You can connect these blocks as long as they fit! Pretty simple, right? You really don’t need prior programming experience to get the hang of these blocks; however, there are a lot of blocks, so you might question what each block does.

Just like Widget Helper, there is Block Helper that helps you get started on understanding the Blocks.

Feel comfortable with Blocks now? Let’s now try connecting these blocks on to the Events we previously talked about.

Editing Events

By combining our knowledge on Blocks and Events, we can now program!

As our first application, we’ll create an application that shows the message “Hello World!” when a button is clicked:

First, Let’s open the event we created earlier for the Button. Here, when we click on the floating button, we can see all the blocks we can use for the event:

For this application, we really only need the showMessage Block. This block is one of the default blocks located under Components tab.

This is on the side note, but note that whenever we add Components, we gain access to new Blocks under the Components tab in the Logic Editor.

Let’s connect the showMessage block to the onClick event block:

Neat! Time to add “Hello World!” into the block:

Nice. Time to install this bad boy on our phones! 😎

Installing on Our Smartphone

Navigate back to the View or Logic Editor. You’ll see a big fat RUN button located in the right bottom corner. By clicking on this button, the project we just finished will turn into an installable APK file.

Click it and see the magic happen ✨

Ladies and Gentlemen, here it is. our very first Android Application in 5 minutes!

Sharing and Exporting Project

We created our first project. How do we share this amazing project with the world?

There are two ways to do it:

Share it with other Sketchware users
Export the APK file via email to share or upload on Google Play Store

Sharing on Sketchware

Go back to My Projects tab and click on the three dots next to your project. Here you can attach screenshots and add Title and Description for your application:

After you click the Share button, you will be able to find it under Shared Projects tab.

Sharing outside of Sketchware

You can export the APK file that you can share with other people such as friends and relatives, or upload it to the Google Play Store. However, note that in order to upload to the Play Store, you will need a Developer Account for the Play Store.