App Inventor Tutorials

App Inventor is a tool for non programmers who want to make apps/games for Android platform without any coding. You can read more about this in the official site.


All posts related to graphics design.

Recent Posts

List Sorting On App Inventor

Posted by on 8:34 pm in app-inventor, tutorials | 23 comments

This tutorial assumes that you know the basics of list. If not, please go over the basic list tutorial. Also you need to know how to use for each number block. Sorting is arranging of items in a specific order/sequence. There are many algorithms that can be used to sort a list. Here, we will be using Bubble Sort. Bubble Sort is very easy. You start at the beginning of the list, compare each pair of adjacent items and swap if they are not in order. You stop comparing when there is no more items left to compare. Below is a gif image taken from...

read more

List Blocks On App Inventor

Posted by on 7:59 pm in app-inventor, tutorials | 91 comments

List is a necessity in almost every app regardless of what programming language you use. This is the easiest way to create and manipulate a set of values/items/elements in an ordered fashion. Please go over the reference before we start. In this tutorial, we will learn how to create a list, add new items to a list, display list items, replace an item in the list, remove an item or remove everything from a list, search for an item, and sort a list.   The snapshot below is from our tutorial app. I recommend you to download the source of...

read more

For Each With Number On App Inventor

Posted by on 6:22 pm in app-inventor, tutorials | 4 comments

For Each with number is used for doing something a number of times for a given range. There are four slots/arguments in that block which are given. First by default there’s a number slot which is the counter telling you the current iteration/loop number. You can change the name of the number variable to whatever you prefer. In the from slot, we specify the starting value for the range of iterations; in to slot, we specify the last value; and the by slot where we specify after each loop/iteration by how much it should increment or...

read more

For Each Block On App Inventor

Posted by on 6:11 pm in app-inventor, tutorials | 2 comments

For each is pretty simple. You provide a list to loop through and there’s a local variable named “item” given to you that holds the value of an item. Note that you can change the name “item” to anything you like. Remember “item” is a local variable, you cannot use it outside the scope. In for each block, the scope is inside the do section of for each block. Let’s calculate sum of numbers in a list. See the snapshot below- We have a list named numberList which contains three items – 20, 30,...

read more

Check Internet Connection In App Inventor

Posted by on 5:54 pm in app-inventor, tutorials | 76 comments

Checking connection is very easy. You can use a Web component and try connecting to a website. Google.com is a very good candidate for that since it’s very unusual for google server to be down. Below is a snippet where I have a button and when you click the button, it tries to connect to google.com. You can download the project CheckConnection and try changing the google url to something that doesn’t exist and see the result. Say if you set the value of the variable googleUrl to http://www.google.com/1234/5678, you will have a 404...

read more

Animations & Effects In App Inventor

Posted by on 5:46 pm in app-inventor, tutorials | 0 comments

When you see a bird flapping in a game or an alien being exploded in pieces, how do you think it’s done? Well, usually it’s nothing but a set of images and changing of those images in a timely manner. In App Inventor, we can use a Canvas, some ImageSprite components, and a Clock to achieve those animations/effects. We are going to make an app that looks like this- If you tap on the Flap button, the bird will continuously flap and if you tap on Explode button, the bird will explode. This is how our design view looks like- We have a...

read more

Advanced Sprites Of App Inventor

Posted by on 5:34 pm in app-inventor, tutorials | 4 comments

If you have gone through Advanced Components tutorial, you already know that now we can manipulate a component via reference. Here we will create a simple app with one canvas and 10 image sprites. Our goal is when an image sprite is tapped/touched, we will change its picture. If current picture is cat, we’ll change it to dog and vice versa. Also we want all of our image sprites to move on the screen with different speed in different directions. Just drag a Canvas to Screen1 and then drag as many ImageSprite components you like on top of...

read more

Advanced Components On App Inventor

Posted by on 4:52 pm in app-inventor, tutorials | 2 comments

App Inventor provides Any component drawer in Blocks editor allowing us to get/set different properties and call functions on a component block or a variable that represents a component. This means we can make a reference to a component via a variable/argument and manipulate it dynamically. For small apps, it may not mean much but when you have bigger apps with hundreds of blocks in place and you do not want to repeat the same thing multiple times, you will see how nice this feature is. If you can’t wait to see an example source right...

read more

Our First App Using App Inventor

Posted by on 12:47 pm in app-inventor, tutorials | 16 comments

Our First App Using App Inventor

App Inventor lets you create Android apps without any knowledge in programming. How cool is that! You design your apps on a web page, assemble pieces of logic blocks together on the same page, test your app on an emulator or on your phone while you are designing; cool, huh? Your projects are hosted by Google. All you have to do is design and join the pieces together like a puzzle game. Check the official Setup section to get started. If you are looking for Tips/Tutorials, go to the Tutorials page. Our First App: WildLifeShow Now that you are...

read more