Skip to main content

Posts

How to create a dialog box in Sketchware

Now that you've had a look at some of the user interface widgets and layouts, the next step is for us to add functionality to the various widgets. You now want an action to happen during a certain *EVENT* such as navigate to another screen. This will be done using components.  Sketchware comes with numerous *COMPONENTS* and you can see some of these in the attached screen. These *COMPONENTS* are used within events. For example, when the User opens the app for the first time( *onCreate* ) you might want to automatically display a welcome message. This is done by creating a *dialogue* component.  Each of these components behaves differently but they are controlled using blocks. This is the programming aspect of building your app. Depending on whatever *LOGIC* you can come up with, I guarantee you can build amazing apps. In our logic section, let's go to the components section and create a new dialog component.  I gave my component the name "welcome" and placed it on onA

How to do calculations in Sketchware

As explained in the previous tutorial, the number variables are useful for making calculations. In today's example we will create a simple app that adds two numbers. This will cover: 1. How to convert a string to a number variable 2. How to add 2 numbers and the logic behind it I will start by creating a new project. In my layout, I have 2 edittexts where a user enters a number and then a Textview to display the answer. It will therefore look like this: Fo us to do a calculation, we will need to start by converting the contents of our edittext to a number variable. Once it has been converted we can then use the green Operator blocks to calculate. So I will place the logic onTextChanged. The image below shows how to add an onTextChanged event Once I've added my event, I will then create a number variable with the name "firstnumber" - you can give it any name that makes sense to you e.g. dailysales, subject1, score etc. Once you've created the variable, place the

Understanding the Sketchware blocks- Variables

We had covered some ground and some are still unsure about what the blocks do and mean. So in the next few days we will be looking at some of these and what they do. We will start with the Orange blocks at the top. These are variable blocks. TYPES OF VARIABLES Think of variables as place holders and these variables can be used to temporarily hold numerous values. There are four types of variables: 1. Boolean 2. Number Variable 3. String variable 4. Map variable We'll cover Boolean Variables later. Today we'll cover Number, string and map variables. BOOLEAN VARIABLES A boolean is a data type that has only two possible values. For example a user's  can be logged in or logged out. So the value of that boolean can only either be true or false. In the image above I have created a boolean variable called isRunning. I can use this  to determine when the app is running by setting the value to true when the app starts(onStart). then I can also specify what happens when the app is ru

How to use the Whatsapp API to send messages with Sketchware

As an app developer you also want to provide a seamless user experience for your users. This means simplifying tasks and finding easier ways to do things. This can be achieved using APIs. This tutorial will cover how to use the WhatsApp API to: 1. Open a chat 2. Open a chat with a predefined message. Please note that the decision to send the message lies ultimately with the user.  The logic is placed onButtonClick... so I can send a message when a the button is clicked. In the first example we use an intent and then we setdata to the contents of edittext1. Just in case the image isn't clear enough, the text is: whatsapp://send?text=   In the second example we specify a phone number. When clicked, a chat to that number will be opened. This is particularly useful on a contact page... whereby users can simply click a button to chat. The code used below is: https://api.whatsapp.com/send?phone= All the best as you build that amazing app

Adding your own fonts in Sketchware

Sketchware allows you to add your own custom fonts. You can get these from sites like 1001freefonts and others. These usually come in .ttf and are fairly small. When you've downloaded your font click here 👇 Click and open the menu on the top right corner of your project screen.  Navigate to where the downloaded font is stored on your device. Now that the font is in Sketchware, I want to choose which text appears in that font. If I want it to appear in the specified font when the app starts and that is achieved using the setTypeface block. I will  put my logic in *onCreate* or *onStart*. If, however, I want that font to appear when a specific condition is met, I can place it on that specific event. For example, *onButtonClick*, *onTextChanged* or in an *IF-ELSE* block. For this tutorial i will place the block *onCreate* This will display my text in the specified format.

How to create a QR code reader in Sketchware

A QR Code is a two dimensional optical bar code which is used for carrying data. QR stands for "Quick Response". Each QR Code normally contains an identifier, a locator and a url. These codes were initially used for tracking of auto parts but have become more popular in recent years. Nowadays they are used for providing easy access to website as well as for tracking purposes. That has made them a key marketing tool. Instead of typing a url, a user can simply scan a code and be redirected to a specific page on a website. You can however adapt the QR Code and use it as you wish. Some time back I mentioned a tracking app for employees or students... using a QRCODE and your listviews, you can create a powerful tracking app. So let's create a simple app which generates a QR Code using the data that we will provide.  How it will work A user can type something in an edittext field and when they click a button, we will call the QR code using an API to generate a code. We will the

How to search a firebase list in Sketchware

If your app deals with a lot of data then you might want to include a search feature in your app, so that they can easily find whatever they are looking for. This article will cover how to implement the search feature in your Sketchware app. Please note that this logic is only for searching for data that is stored in your firebase database. Let's get into it. First create your layout.  In the example above, I have added a linear Horizontal. In my linear Horizontal I have added 2 imageviews and an edittext. I have set my edittext hint to "Search..." This is how it will work. When the app starts, the 'cancel search' button and the edittext for searching will be hidden. Then when a user clicks the search button the edittext and Cancel search button becomes visible. When I click the cancel search button, it clears the edittext and then hides the edittext and the cancel search button. I have given my edittext a weight value of 1. This makes it take up all the extra spa