Tutorials

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.

Design

All posts related to graphics design.





Recent Posts

List View & A Booking App On App Inventor

Posted by on 10:35 am in app-inventor, tutorials | 14 comments

List View & A Booking App On App Inventor

ListView component allows you to display a list/group of text items on a screen. If you are here for List tutorial, please visit this extensive List tutorial. Today we are going to create an app utilizing ListView, a simple booking app. The name of our glorious app will be AI Palace. This is how it’s going to look like- Functionality of this app is simple. A user can book a room in our AI Palace which gets stored in a database. They can also cancel their bookings. Since we store it in a database, when the user closes the app and reopens...

read more

Oh My Spikes – Create a game from scratch using App Inventor

Posted by on 10:13 am in 2d-games, android, app-inventor, tutorials | 142 comments

Oh My Spikes – Create a game from scratch using App Inventor

Today we are going to make a game from scratch inspired by recently popular spike games. We will call it Oh My Spikes. Before we start, you may want to see how the final game will look like. This will help you follow the tutorial easily. Sorry for the noise and the quality of the video.     I am assuming you have some experience using App Inventor. If not, you should definitely do the very basic tutorial.   This is what we want to achieve- 1. You control a bird by tapping anywhere in the screen. When you tap, bird ascends; if...

read more

My First Ludum Dare – A Fun Game Jam

Posted by on 10:19 am in 2d-games, html5, libgdx, ludumdare | 5 comments

My First Ludum Dare – A Fun Game Jam

Ludum dare you say? You don’t know what it is? That’s a jam where many game developers around the world join and make games in 48/72 hours. This was my first time to join and I am so happy about it. You can see my entry here. This zip contains an exe file for windows, an apk for android, and a jar for other platforms. You can open the jar by double clicking or opening it with java from the terminal (java -jar OktumBoktum_Desktop.jar). You can play the game online as well. Give it a shot? I used the super fast framework called...

read more

Parallax Design Elements for a 2D Platformer Game

Posted by on 1:43 pm in 2d-games, design | 4 comments

Parallax Design Elements for a 2D Platformer Game

As I promised, I created a parallax design that you can use in your projects any way you like. This parallax is consisted of 4 layers. Here’s the downloadable zip file for the parallax design elements. The file contains 4 transparent png images and also the original vector file (.AI) that you can modify. If you don’t have Adobe Illustrator, you can try Inkscape which is free. This design would really go with a platformer game where you run, jump, dodge, and probably grab some strawberries along the way. Enough with the coins! Let...

read more

Website Viewer On App Inventor

Posted by on 10:13 pm in app-inventor, tutorials | 92 comments

App Inventor has a component called WebViewer. We can load a webpage/website into an app using WebViewer component. To do that, we can just drag the WebViewer component to Screen1 window and set the HomeUrl property of the WebViewer to the webpage we want to view when the app boots up. Note that including a network protocol such as http or https is important, otherwise, the webpage won’t load. If you try www.google.com, it won’t work, but http://www.google.com will work. For our sample app, we will have a text box where a user can...

read more

Web Component – JSON Response On App Inventor

Posted by on 10:04 pm in app-inventor, tutorials | 47 comments

App Inventor has a component called Web which gives you the functionality to send and fetch data from a server or a website through GET and POST  requests. This component can decode both JSON and HTML formatted data. We will be writing an app called iRead that will ask a user to type in a full or partial book name and query Google’s database of books using Books API and retrieve the most relevant book info. We will parse the Title and Author of the book, we will get the image URL of the book cover, and finally the book URL which can be...

read more

Procedure With Result On App Inventor

Posted by on 9:37 pm in app-inventor, tutorials | 5 comments

Procedure with result block is very handy when you need to do something multiple times. This will save you time as you don’t need to repeat the same procedure many times. Also it’s hard to keep track of multiple global variables. This will help you keep your blocks small. We will make an app that is going to look like this- It takes an input in a text box and notifies if the input is an even number. Also it gives the square of the number. We will be using procedures with result to accomplish these two operations. Let’s take...

read more

Universal Screen Size Using App Inventor

Posted by on 9:30 pm in app-inventor, tutorials | 43 comments

Different devices have different screen sizes. It’s really hard to create an app that looks the same across different devices. One way to tackle this situation is determine how much each component should take regardless of screen size. Say you have one image and one button. If you want the image to take 80% of the height and the button to take the remaining 20%, then calculate that using the device’s height and set accordingly. App Inventor’s Screen has width and height which are the width and height of the actual device. We...

read more

Location Sensor & Google Map Using App Inventor

Posted by on 8:55 pm in app-inventor, tutorials | 14 comments

With LocationSensor component you can build an app that can provide you with your current location information. Say you are going to some place you are not familiar with. We will create an app where you can save your current location and then go where you need to go, if you think you are lost along the way, the app can show you how far you have come from the point when you saved your last location information. We will name that app – Where Am I. This is how our app would look like- Let’s build our interface in the Designer/Viewer...

read more

Shuffle Lists & Unique Random Numbers

Posted by on 8:46 pm in app-inventor, tutorials | 6 comments

This tutorial will answer two questions: 1. How to shuffle a list 2. How to generate a set of random numbers that don’t repeat, meaning unique numbers We are going to make an app that will have 4 image sprites in a canvas. The sprites will be moving across the screen. In every 5 seconds, the speed of the sprites will change. But there will never be two sprites that will have the same speed. We want them to always have different speeds in any given time. Our app is going to look like this- If you want to take a look at the app and play...

read more