Convert App Inventor to Java

Posted by on May 24, 2014 in Android Development Tutorial | 21 comments

Convert App Inventor to JavaIf you have been following my App Inventor video tutorial I have been keeping a secret from you!!! You actually know how to make Java Android tutorials, but you didn’t know it until now.

In the next 2 tutorials I will convert one of my most complicated App Inventor apps, being the Zombie app into a Java Android app. And, guess what? You’ll understand it. All of the assets used can be found below along with all the code. Have Fun πŸ™‚

If you like videos like this, it helps to share on Google Plus with a click here [googleplusone]

I show how to install Eclipse in this video.

What Will You Learn in the Next 2 Videos?

  • How to layout layouts and components
  • How to Catch Events
  • Play Sounds
  • Vibrate the Phone
  • Use the GPS to get Location Data
  • Open a Popup / Dialog Box
  • Start Another Activity
  • Convert Text to Speech
  • Define the Icon
  • More of course…

Assets Used in the Video

SplatterBackground.png
Zombie.png
ZombieAttack.wav
ZombieMoan.wav
icon.png
libSimpleAndroidRuntime.jar

Code From this Video

package com.newthinktank.hellozombie;

//All the libraries needed for all the App Inventor components

import com.google.devtools.simple.runtime.components.Component;
import com.google.devtools.simple.runtime.components.HandlesEventDispatching;
import com.google.devtools.simple.runtime.components.android.AccelerometerSensor;
import com.google.devtools.simple.runtime.components.android.ActivityStarter;
import com.google.devtools.simple.runtime.components.android.Button;
import com.google.devtools.simple.runtime.components.android.Form;
import com.google.devtools.simple.runtime.components.android.HorizontalArrangement;
import com.google.devtools.simple.runtime.components.android.Label;
import com.google.devtools.simple.runtime.components.android.LocationSensor;
import com.google.devtools.simple.runtime.components.android.Notifier;
import com.google.devtools.simple.runtime.components.android.Sound;
import com.google.devtools.simple.runtime.components.android.TextToSpeech;
import com.google.devtools.simple.runtime.events.EventDispatcher;

public class MainActivity extends Form implements HandlesEventDispatching {
	
	private Label touchZombieLabel;
	private HorizontalArrangement horizontalArrangement1;
	private Button zombieButton;
	private Sound zombieMoanSound;
	private Sound zombieAttackSound;
	private AccelerometerSensor accelerometerSensor1;
	private LocationSensor locationSensor1;
	private Notifier notifier1;
	private ActivityStarter activityStarter1;
	private TextToSpeech textToSpeech1;
	
	private int zombieImageHeight = 712;
	private int zombieImageWidth = 855;
	
	private String latitude, longitude;
	
	private String gpsProviderName;
	
	void $define() {
		
		//set up screen orientation (landscape or unspecified)
     this.ScreenOrientation("portrait");
     
     // Set the screen name title
     this.Title("Hello Zombie");
		
		// Set the screens background color, background image and shut off scrolling
		this.BackgroundColor(COLOR_NONE);
		this.BackgroundImage("SplatterBackground.png");
		this.Scrollable(false);
		
		// Initialize text to speech capability
		textToSpeech1 = new TextToSpeech(this);
		
		// Create the label and put it on the screen in the center
		touchZombieLabel = new Label(this);
		touchZombieLabel.Text("Touch the Zombie");
		touchZombieLabel.FontSize(20.0f);
		touchZombieLabel.Width(LENGTH_FILL_PARENT);
		touchZombieLabel.TextAlignment(Component.ALIGNMENT_CENTER);
		touchZombieLabel.FontBold(true);
		
		// Create a horizontal arrangement and define the height and width to fill screen
		horizontalArrangement1 = new HorizontalArrangement(this);
		horizontalArrangement1.Width(LENGTH_FILL_PARENT);
		horizontalArrangement1.Height(LENGTH_FILL_PARENT);
		
		// Put the zombie image on a button and put the button in the horizontal arrangement
		zombieButton = new Button(horizontalArrangement1);
		zombieButton.Image("Zombie.png");
		zombieButton.Width(zombieImageHeight);
		zombieButton.Height(zombieImageWidth);
		zombieButton.TextAlignment(Component.ALIGNMENT_CENTER);
		
		// Initialize Zombie attack sound
		zombieAttackSound = new Sound(this);
		zombieAttackSound.Source("ZombieAttack.wav");
		
		// Initialize Zombie moan sound
		zombieMoanSound = new Sound(this);
		zombieMoanSound.Source("ZombieMoan.wav");
		
		// Catches any button click events that occur
		// In dispatchEvent() below we will check for the component that triggered the event
		// You pass the the screen, a component ID and the event to catch
		EventDispatcher.registerEventForDelegation(this, "ButtonClick", "Click");
		
		// Initialize our location sensor
		locationSensor1 = new LocationSensor(this);
		
		// Gets us the best available provider of location data
		locationSensor1.RefreshProvider();
		
		// Enable the notifier
		notifier1 = new Notifier(this);
		
		// initialize the activity starter
		activityStarter1 = new ActivityStarter(this);
		
		// initialize accelerometer
		accelerometerSensor1 = new AccelerometerSensor(this);
		
		// Register the event that catches the shaking event
		EventDispatcher.registerEventForDelegation( this, "ShakingPhone", "Shaking" );
		
	}
	
	@Override
	public boolean dispatchEvent(Component component, String id, String eventName,
			Object[] args) {
		
		// If the event triggered was a click on the zombie button
	    if (component.equals(zombieButton) && eventName.equals("Click")) {
	    	
	    	// Make the phone vibrate and play sound
	    	zombieMoanSound.Vibrate(500);
	    	zombieMoanSound.Play();
	    	
	    	// Check if provider is gps and if not show alert to turn on gps
			gpsProviderName = locationSensor1.ProviderName();
			
			// Check if the provider of location data is the gps
			if(!gpsProviderName.equals("gps")){
				
				// Alert the user that they must enable GPS
				notifier1.ShowAlert("Enable GPS in Settings");
				
				// Open the settings where the user enables GPS
				activityStarter1.Action("android.settings.LOCATION_SOURCE_SETTINGS");
				activityStarter1.StartActivity();
				
			}
	    	
			// Retrieves the latitude and longitude data
	    	latitude = Double.toString(locationSensor1.Latitude());
		    longitude = Double.toString(locationSensor1.Longitude());
	    	
	    	// Convert text provided to speech
	    	textToSpeech1.Speak("Zombies latitude is " + latitude + " Zombies longitude is " + longitude);
	    	
	         return true;
	         
	      // If the event triggered was the shaking of the phone
	    } else if( component.equals(accelerometerSensor1) && eventName.equals("Shaking")){
	    	
	    	// Play the zombie attack sound
	    	zombieAttackSound.Play();
	    	return true;
	    }
	    return false;
	}
	
}

21 Responses to “Convert App Inventor to Java”

  1. Moshe says:
    May 26, 2014 at 3:13 am

    I enjoy very much your tutorials. I tried to create a similar program and got an error saying that the constructor of the Button requires a Context and not a HorizontalArrangement. Please help

    Reply
  2. Moshe says:
    May 26, 2014 at 6:47 am

    I found the problem about the Button so ignore my previous email. Thanks

    Reply
  3. r.s. says:
    May 27, 2014 at 5:00 pm

    Derek,
    Great video! This one takes it to a whole new level. You are very good at keeping things simple.

    Reply
  4. Matas says:
    June 2, 2014 at 2:36 pm

    Derek,
    I enjoy and appreciate your tutorials allot. I am new to Java and Android and I’m still a bit overwhelmed with so much new information. My choice to use Android Studio to develop my apps on is adding to this confusion as it is harder to follow when you work on Eclipse. I watched your tutorials on Tip Calculator as well as AI tutorials. So here is my question. Why dont you design the layout on layout designer as you did with tipcalc? Is it because you wanted to show another approach or because there is some fundamental difference?
    I prefer AS over Eclipse for its layout designer. What is your take on AS?

    Reply
    • Derek Banas says:
      June 8, 2014 at 5:03 pm

      Yes I love the current form of Android Studio. I made the tutorial this way to show that there isn’t much of a difference between App Inventor and actual code. Sorry if that was confusing.

      Reply
  5. jmpoli says:
    June 20, 2014 at 12:04 am

    Great video for the conversion of an app inventor file to java but I was hoping to see how you compile the application into an .apk in Eclipse.

    Reply
  6. Matt says:
    September 8, 2014 at 10:32 pm

    Hello Derek,
    I understand that you are probably a pretty busy guy given all of the tutorials that you have made. I am looking for a little guidance and was hopping you could take the time to help me out a bit.
    I had made an app and put about 2 or 3 weeks into it on app inventor. This was about 18 months ago. I made it for my son and am wanting to recreate it in java. I have been poking around in android studio but I have no formal background in programming. I am just a guy who likes to learn and has a passion for computers and gadgets.
    If you could take a glance at my app and let me know how I should start to learn how to do these sort of things with code that would be awesome!
    On the play store it’s called pexpix autism.

    I know it’s rough but that is why I am wanting to learn real coding and just don’t know where is a safe place to start.

    Thanks again!

    Reply
    • Derek Banas says:
      September 9, 2014 at 5:40 pm

      Hello Matt,

      This is basically the tutorial to start with to convert an AI app into Java. Java isn’t that complicated aside from a few issues. If you provide me a list of questions you have I’ll be happy to answer them and point you towards the right tutorials. I think you did a great job with the app. Keep at it. I’ll try to help.

      Reply
  7. nickdecillo says:
    October 2, 2014 at 11:16 pm

    hi +Derek Banas hoping you will response with this concern about the webviewer, on how it will be declare on the screen. Would you mind you can give some hint or code that use the webviewer to work out within this tutorial also how to apply the tinydb / tinywebdb and web? Thanks here’s my email add: nickdecillo@gmail.com Very much appreciated for your response as soonestο»Ώ

    Reply
  8. Algis says:
    November 3, 2014 at 9:08 am

    I use eclipse indigo and cannot find dispatchEvent (Component, String, String, Object[]) in override/implement methods.

    Reply

Leave a Reply

Your email address will not be published.

Google+