Message Box — Creating an Android Application that Toasts the User Input

Giving Commands

Computers process things a little bit differently than humans do. There has to be an input for there to be an output. Without anyone telling the computer what to do, it’s just a worthless piece of metal.

Drag and dropping widgets onto the screen in Sketchware is an easy task; assigning the commands for each widget is the hard part. Without the functionality, the widgets are completely useless. Today, I am going to walk you through the first example in Sketchware, “ShowMessage”.

What you’ll need:

1. Sketchware Application from Google Play
2. A burning passion for learning to program

…That’s all you really need!

What you’ll learn:

1. Different widgets and their purposes
2. Logically tackling the problem

Step 1: Starting the project

Starting the Project

First, open the Sketchware application and select the “Message box” example. Through this example, we will be able to learn the concepts of Widget and Event!

Clicking on it leads us to the second page, which shows what the finished project will look like. We can either download the sample to see the finished product, or start our own.

If you click “Start,” it leads us to the project settings. There are two fields that are already filled out:

1. Package — a unique name for the application. Think of it as a Social Security number for applications, except that it’s public.
2. Project — the name for the application. Just like “Facebook” or “Instagram,” this project name will be the name that shows on the screen.

Click Save, and we are done starting the project!

Step 2: Familiarizing yourself with the environment

The screen will have two options — VIEW and LOGIC.

1. View — represents what we see. We can drag and drop widgets from left to right. By default, the layout in the VIEW is vertical.
2. Logic — the brain of the application. This represents the actions to be carried out during instances like opening the app or clicking a button.

Learning the Widgets

• Linear(H) — Linear layout, where widgets placed in this layout will be placed horizontally.
• Linear(V) — Vertical layout, where widgets placed in this layout will be placed vertically.
• TextView — A widget that displays a static String, or text value.
• EditText — An input box into which the user can type a String value into.
• Button — A button.

Need a Hint?

If you get stuck in any way, refer back to the Project Detail or look at the Hint by clicking on the 3-dotted button in the top right corner.

1. Project Detail — helps you understand the goal of the application.
2. Hint — contains both the View and the Logic you can refer to.
3. Import from Hint — replaces your current project with the finished one.
4. Show Source code — shows the Java and XML source code for your application.
5. Export — exports the APK file by website or email, so you can share the project with others.
6. Widget Helper — allows users to manipulate different widget properties and see how it affects the widgets.

Step 3: Designing the Application

In the HINT screen above, we can see that we need to use two different widgets. An EditText to receive user input, and a Button to toast the message when clicked. Let’s first handle the design aspect of this application.

1. Drag and Drop EditText and Button on to the Screen

Drag and Drop Widgets

Easy, right?

2. Change the Widget Property to make it fill the screen horizontally

The properties of a widget determines what the widget is going to look like. By editing the properties, you can change the id, color, size, alignment, and more!

Since we want both EditText and Button widgets to fill up the entire width of the screen, we change their layout_width property to match_parent from wrap_content.

1. Match Parent — the widget is going to take up as much space as the parent. Since the parent of the EditText and Button widgets is the layout, it will fill up the entire width.
2. Wrap_content — the widget is only going to take up as much space as it needs. For example, if the text input is longer than the given space, it will expand.

By using the Widget Helper, you can learn how each property affects the widget.

That’s it for the design part!

Step 4: Setting up the logic

Before we tackle the logic part, we need to think about the goal of the application. Think about the number of steps required:

1. User clicks on the button
2. If there is any user input in the EditText, Toast(pop-up) a message; however, if there is no input, don’t do anything.

Before you tackle the logic, it’s always good practice to break it down.

If you click on the LOGIC tab, you will see that a new Event is added — Button:button1. Click on that event and it will tell you which blocks should be used in the project.

Using Scratch-like blocks, you can command what the button should do when it is clicked. Scratch is an innovative programming language created by MIT to make programming friendly for everyone. You can easily create your own functions and algorithms!

Now, let’s look back at our steps:

1. User clicks on the button
2. If there is any user input in the EditText, Toast(pop-up) a message; however, if there is no input, don’t do anything.

We really only have to worry about creating the 2nd part, since clicking on the button is handled by the Event in the Logic tab.

We can validate if there is any user input by checking the length of the string. If the length of the user input is greater than 0, that means there is a user input. We can achieve this by putting blocks like this:

In programming language, it would look something like this:

button1.setOnClickListener(new View.OnClickListener() {
@Override
   public void onClick(View _v) {
      if(editText1.getText().toString().length() > 0) {
         showMessage(edittext1.getText().toString());
      }
   }
}
private void showMessage(String _s) {
      Toast.makeText(getApplicationContext(),_s,Toast.LENGTH_SHORT).show();
} ...

The first one looks a lot more simple right?

Now let’s install the application on the smartphone.

Step 5: Installing the Application

Simply click on the RUN button, and you’re done!

Step 6: Test the Application

After typing “Hello world!” into the EditText and pressing the Button, I can see the toast pop-up. Woohoo! Congratulations on creating your first application on Sketchware! :)

Step 7: Checking the Source Code

Take your learning experience one step further and check the source code for your application! The project is automatically translated into Java and XML source codes, so you can learn from these codes or continue working on your project on Android Studio.

That’s it! If you have any questions, ask us on Facebook!