Published using Google Docs
Sportsball Fanatic - Android App tutorial
Updated automatically every 5 minutes

Sportsball Fanatic - how we created a basic Android App

Sportsball Fanatic is a basic Android app: it helps you cheer for your favorite sports team. This app was created using Android Studio, written in Java and XML, it has several Activities, makes use of Fragments, connects to external APIs, makes use of Google Play services, and even accesses a device’s camera. It’s nothing fancy, but what’s powerful about this app is that it’s a great example for learning how to develop your very own Android apps.

References: Code, Design, MIT App Inventor

Getting Started

Before we actually start creating our app, we need to get our tools all set up. Between the time the first Android device became available (in 2008) and now, most Android developers have relied on something known as the Android Developer Tools Bundle, which is the pairing of Eclipse, an otherwise popular IDE for Java developers, and the Android SDK. While this was a sufficient solution for software developers with experience with Eclipse and Java, Android’s wild popularity (since 2013, sales of devices that run Android have exceeded those of iOS, Mac OS, and Windows combined) has attracted many people who are brand new to software development. In response to this need, the folks at Google have begun creating a tool that is purpose-built for Android app development called Android Studio. Based on another Java IDE called IntelliJ Idea, Android Studio provides tighter integration with the Android SDK and removes some of the bloat of Eclipse, yielding an experience more similar to what iOS App developers have with Apple’s Xcode IDE.

Screenshot 2016-03-16 15.22.56.png

At the time of this writing, the latest stable version of Android Studio available is v1.5.1. This tutorial will be written using the Mac OS X version of Android Studio, however your experience developing from either Windows or Linux should be very similar, and we’ll try to point out any variations that we come across.

To install Android Studio, head over to the downloads page and grab the version for your respective operating system. Once you begin the download, you’ll be redirected to a page with more information on the installation process. One important note is that you’ll need the Java JDK (version 7 or newer) installed prior to using Android Studio. The JDK is a set of tools that allow you to develop, test, and run Java applications (such as Android apps) on your system.

Once you’ve installed Android Studio, it’s time to update the Android SDK. This Software Development Kit is a set of tools that provide different capabilities for Android developers. Since not all developers need all of these packages, they aren’t all installed by default. To open the SDK Manager, go to Tools -> Android -> SDK Manager. Note: at the time of this writing, we’re using API 23 (aka Marshmallow, 6.0)

Once we’ve updated our SDK, it’s time to set up a test environment. If you have a physical Android device, feel free to use that. You’ll need to set up your device in Developer Mode, and may need to install some drivers depending on your device manufacturer. Another option is to use an Android Virtual Device, often referred to as an “emulator”. To set up an AVD, go to Tools -> Android -> AVD Manager. When the AVD Manager window opens up, we’re going to select the Device Definitions tab, and scroll down until we find Nexus S. Feel free to use another device, but I find that the Nexus S has a nice blend of features, screen real estate, and performance.

Screenshot 2016-03-18 11.08.20.png

After you select hardware, we’ll need to select a system image. We’ll be using Marshmallow, API 23, x86_64, Android 6.0 (with Google APIs) for this tutorial.

Screenshot 2016-03-18 11.11.32.png

On the following screen, we will be prompted to set some details for our AVD. Here are the settings I like to use:

Screenshot 2016-03-18 11.12.29.png

Screenshot 2016-03-18 11.28.05.png Screenshot 2016-03-18 11.29.19.png

If you’d like, you can now select your AVD and hit “Launch” (the green triangle Screen Shot 2014-10-08 at 11.49.29 PM.png) to see it in action. However, you might find yourself waiting for a few minutes. Since we’re basically running another computer inside our computer, the Android emulator can be painfully slow. One way to speed this up is using the Intel HAXM technology (which may be required depending on your version of Android Studio and the emulator). This was one of the packages we downloaded with the SDK Manager, but you’ll still need to do some setup to get HAXM working. First, we’ll need to find our Android SDK folder.

On Mac, go to: /Applications/Android Studio/SDK/extras/intel/ (you may need to [Ctrl + Click] and “Show Package Contents” on Android Studio.app).

On Windows, go to: C:\Program Files (x86)\Android Studio\SDK\extras\intel\

Once you’re there, you should see the HAXM folder, which contains installers. Launch the installer, and follow the directions. Note that some computers won’t be able to use HAXM, or may require a change in your BIOS settings in order to do so.

Hello World

As is tradition when using a new software development platform, we’ll get started with one of the simplest possible version of our app: Hello World. What does Hello World do? It launches, then displays the text “Hello World”. Sorry if you had your hopes up for a personified 3D globe waving an animated greeting to you. What Hello World allows us to do is to confirm that we’ve set everything up properly. If you can’t successfully complete this step, everything after it will be much more difficult.

When you launch Android Studio, you’ll likely be greeted by a Welcome screen. Let’s select “Start a new Android Studio project…”

Screenshot 2016-03-18 13.38.04.png

Now, let’s name our project Sportsball Fanatic. You’ll notice that the New Project wizard will ask for your Company Domain. This is so that we can use the reverse-domain package naming scheme commonly used for apps (both Android and iOS). Since we can reasonably assume that each domain name is only owned by one entity (go ahead, you try to register the Facebook.com domain today!), then it’s safe to assume that this method will yield apps with a unique package name. At this point, feel free to use whatever you’d like, as this package name will only matter if you plan to submit your app to the Google Play store.

Screenshot 2016-03-16 15.28.08.png

Next, we’ll need to decide on the platforms for which we’ll be targeting our app. Let’s select Phone and Tablet, and go with API 14 (aka 4.0 Ice Cream Sandwich) as our minimum SDK. You can play around with different minimum SDK settings, and the wizard will tell you what percentage of active Android devices will be able to run your app.

Screenshot 2016-03-18 11.34.13.png

After that, we’ll be able to select a template for our launch Activity. You’ll see a few options here, including Blank Activity, Empty Activity, and Google Maps Activity. We’ll eventually be using all a few of these Activity templates for parts of our app, but for this part, let’s select Empty Activity.

Screenshot 2016-03-18 13.47.35.png

Let’s leave the name of our Activity “MainActivity”, which should automatically name our Layout “activity_main”, and give us a Title of “MainActivity”, and a Menu Resource Name of menu_main (which we can change later).

Screenshot 2016-03-18 13.42.12.png

Ok, now we’re actually ready to run our app! While you may be used to having to do more to get “Hello World” working in other languages or platforms, the New Project wizard has done all we need to do without requiring us to write a single line of code. To run our app, you can click the green triangle in your toolbar Screen Shot 2014-10-08 at 11.49.29 PM.png, or go to Run -> Run ‘app’. You should be prompted to choose a running device (if your AVD is already running, or you’re using a physical device), or to Launch emulator.

Screenshot 2016-03-18 11.37.28.png

Hit OK to proceed, and you should (after a short wait), see your app launch! Note that you may first see the device’s lock screen, so you may need to “unlock” to see the app actually launch.

Screenshot 2016-03-18 13.46.14.png

So, why did this work? If we look at our Android Studio window, we’ll see two tabs open: MainActivity.java and activity_main.xml. These two files control the logic and layout, respectively, for our Android app in its current state. In our Java file, you can see about 50 lines of boilerplate code. Right now, the method call that matters most for us is this:

@Override

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

}

In particular, the line setContentView(R.layout.activity_main); is how our Java file references our XML file. Let’s switch to that XML file, which will look quite a bit different from our Java file. If you’ve ever worked with HTML or XML for other projects, you might recognize that we have one element (a TextView) contained or nested within another element (a RelativeLayout). Let’s take a look at that TextView code:

<TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Hello World!" />

Once again, there’s one really useful line here that tells our TextView to display the text from a string that contains “Hello World!”. While we directly defined a string with the text “Hello World!” here in our activity_main.xml, the name of our app is defined elsewhere. This means that there’s at least one other file, in this case strings.xml, on which our Hello World example relies. But where do we find all these other files, like strings.xml?

Take a look at our Project pane, on the left hand side of the Android Studio window:

Screenshot 2016-03-20 16.27.18.png

You’ll see a hierarchy of directories that can be overwhelming at first. The parts we care about right now are within the app/src/main directory. In here, we’ll find java and res directories. The java directory will contain another directory with our package name (eg. com.example.sportsballfanatic), and within that will be our Java files. The res (ie resources) directory contains mostly XML files and images. These XML files include layouts (eg activity_main.xml) and values (eg strings.xml).

So now that we’ve found strings.xml, we can find the line where our string app_name is defined:

<string name="app_name">SportsballFanatic</string>

If you’d like to change this string, to “Basketball Craziness” or “Go Cats!”, try it out and see what happens when you re-launch your app.

One other important file that helped control this “Hello World” behavior was AndroidManifest.xml in the app/manifests folder. This file controls what happens when we launch our app. It contains information on which aesthetic styles to use, which icon to display in our device’s list of Apps, permissions to access various services, and which Activity should be displayed upon the launch of our app. Since we only have one basic Activity in our project right now, the necessity of this may be less obvious, but once we have several, more complex Activities, it will make more sense.

Creating Our Launcher, MainActivity

Ok, Hello World was fun, but now it’s time to get down to business (which should be fun as well). We’re going to be launching four other Activities from our MainActivity, so let’s start by creating some buttons to initiate this. If you’re a designer (even if you’re not), you’ll probably realize that this isn’t the most attractive UI for an app. I totally agree, but it works for now.

When activity_main.xml was created by the setup wizard, it was given a Relative Layout with a single Text View inside it. Let’s leave the Text View alone, but for the Relative Layout, let’s change that to a Linear Layout (Vertical). Select the opening tag on line 2, and change RelativeLayout to LinearLayout. Android Studio should do some smart refactoring for you, and automatically change the closing tag to match.

Next, you’ll see a list of android: properties listed in the next several lines. We’ll need to add an Orientation property to make sure that our Linear Layout shows up as Vertical instead of Horizontal. I added the following line, right after the android:paddingTop property:

android:orientation="vertical"

One of the great things about Android Studio for new developers is the built-in Layout Design toolkit, which means you don’t have to edit XML directly like we just did. Let’s use this feature to make some more changes to activity_main.xml. You can click and drag this from the Palette on the left into the main design window. This will help all our elements cascade on top of each other, forming convenient rows. Inside this LinearLayout, let’s first add four Buttons. You can find the Button within the Widgets folder in the Palette. I wanted to give some additional spacing between my buttons, so I added android:layout_marginTop of 20dp. You’ll see Layout files use units like dp, which stands for Density-independent Pixels. Basically, this allows us to more easily account for the wide range of different physical screen sizes and screen resolutions on Android devices than if we were to explicitly specify in units of pixels (px).

Screenshot 2016-03-20 17.49.06.png

Now we’ll need to make some changes to the text in our TextView and Buttons. You can choose to do this in Design mode, or Text mode. As you can see above, we have chosen the following text attributes to be used on our four buttons:

  1. Team Profile
  2. Team Site
  3. Fan Map
  4. Fan Photo

Next, we’ll need to set the id for our buttons. The ID is how we’ll refer to the buttons in code:

  1. team_profile_button
  2. team_site_button
  3. fan_map_button
  4. fan_photo_button

Once you’ve set those properties for your four buttons, this is how your XML file should look:

Screenshot 2016-04-01 14.24.48.png

You may see some [i18n] warnings that “Hardcoded strings should use @string resource”. This is a valid suggestion if you’d like to follow it, but we won’t be externalizing our strings during this tutorial.

Making Buttons Work

Congratulations, your app now has buttons! But we haven’t told them to do anything yet. Let’s do that now. First, we’ll make some text pop up on the screen (called a Toast), then we’ll actually make our buttons open up the desired Activities.

There are three main steps to creating a button that will do something when tapped:

  1. Create button
  2. Create method
  3. Connect button to method using button’s onClick property

We’ve already completed step one (creating our buttons), so let’s move onto step two. Let’s open up MainActivity.java and add the following lines of code:

public void showToast(View v) {

Toast t = Toast.makeText(this, "Hello, world!", Toast.LENGTH_SHORT);

t.show();

    }

Before we can try out our button, we’ll need to perform step three: adding an onClick property to our button. Since this is just to test that we can get our button to actually do something, let’s temporarily use one of our existing buttons to show this Toast. I’m going to use my Team Profile button. To do this, I’ll add this property:

android:onClick="showToast"

Now, we’re ready to test our button’s functionality. Launch your app and click on your Team Profile button. You should see the Toast appear at the bottom of the screen, a rounded rectangle with the text “Hello, world!” Inside.

Screenshot 2016-04-01 15.06.34.png

If you try to click on any of your other buttons, you’ll notice that they don’t do anything yet. These buttons will now serve as a sort of TODO list for our app. Once all our buttons are functioning, we’ll have added all the Activities that we plan to add.

Launching Another Activity

In Android, one way to show something new on our screen is to launch an Activity. There are other options for doing this (Fragments, Custom Views) that you may want to explore in future apps. It’s important for us to point out that we already have one Activity in our app: MainActivity. To add our new Activity, we can go through the File menu, or through your Project pane:

Here we right-clicked on java -> New -> Activity -> Empty Activity to see this context menu. Next, you will see the Android Activity customization dialog:

We’ll want to change the fields on this screen to reflect our desired setup:

Similar to how we re-arranged our activity_main.xml, we’ll want to change the RelativeLayout to a LinearLayout in our activity_profile.xml. Be sure to also add in an android:orientation="vertical" property. I made these two changes in the Text mode. Now, you can continue to use Text, or switch to Design mode if you prefer. Next, we’ll need to add three new components to our layout:

Here we’ll get to do some customization, by selecting our own team name, image, and description. While we can directly edit the text properties to add our team name and team description, the team image involves another step. Once we choose an image (a .jpg or .png file), we’ll need to add that to our project’s res/drawable folder. One common hiccup here is attempting to drag-and-drop from your file manager (eg Windows Explorer or OS X Finder). This does not work, however you can Copy from your file manager, then Paste into the drawable folder in Android Studio’s project pane. Once you do this, you’ll see a dialog box like this:

Once the image file has been added to your drawable folder, you can select it using the src property on your ImageView. When selecting your image, remember that it’s located in your Project’s drawable folder. I find that the quickest way to select it is often to use the search feature, typing the first few letters of the image name.

Once you have selected your image and entered text for your Team Name and Team Description, your activity_profile.xml layout should look similar to this:

You may notice some extra spacing between our text and image. If you’d like to ensure that your ImageView wraps nicely around your actual image, you can adjust the following properties on the ImageView:

android:adjustViewBounds="true"

android:scaleType="fitXY"

Now, to be able to actually navigate to this Activity from our launcher Activity, we’ll need to change some code in MainActivity.java. Let’s “comment out” our showToast method. Comments are used to leave notes in our code, or to prevent code from being executed, without having to remove the code from our source file. In Java, a single-line comment is created by a double forward slash, //. A multi-line comment is created with an open /* and a closing */ notation. I’m going add a single-line comment describing the Toast, then I’ll use a multi-line comment to disable the execution of the Toast method.

// Use this to show a Toast

/*

public void showToast(View v) {

Toast t = Toast.makeText(this, "Hello, world!", Toast.LENGTH_SHORT);

t.show();

}

*/

Next, we’ll add in a new method that will allow us to navigate from MainActivity to ProfileActivity. Here’s what we need to add:

public void showProfile (View v) {

        Intent i = new Intent(this, ProfileActivity.class);

        startActivity(i);

    }

We still have one more step before we can run our app. We need to go back to activity_main.xml and change our onClick property for the Team Profile button from showToast to showProfile. This should be available as an auto-complete option since we’ve added the method to our MainActivity.java file. Now, when we run our app, we should see this:

When you click on the Team Profile button, you should be taken to your ProfileActivity. You should also be able to use your device’s back button to navigate back to the Launcher page.

We’ll eventually add the following onClick events to our Launcher’s buttons to navigate to their respective Activities:

showProfile -> ProfileActivity

showTeamSite -> WebsiteActivity

showFanMap -> MapsActivity

showFanPhoto -> PhotoActivity

Loading A Web View

Let’s create another new Activity. Once again, we’ll use the Empty Activity template. Right-click on java in your Project pane, then New -> Activity -> Empty Activity

We’ll name this one WebsiteActivity, with activity_website.xml for the Layout file. Let’s open up the layout file, and add in a WebView. In that WebView, change the first two properties for layout:width and layout:height from wrap_content to fill_parent. This will make our WebView take up most of the screen real estate for this Activity.

To specify what URL our WebView should load, let’s add 2 lines to our onCreate method in WebsiteActivity.java:

protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_website);

        WebView teamWebView = (WebView) findViewById(R.id.webView);

        teamWebView.loadUrl("http://www.franklingrizzlies.com/");

    }

The first 3 lines here are boilerplate code that were already in our onCreate method. The next 2 lines are what we added. The first line with WebView helps us to target the view with an ID property of webView in our XML layout file. The next line instructs our WebView to load a specified URL.

If you were to run your app now, you may notice that the website will load, but it will do so by opening your device’s web browser app. We want the user to be able to view this site from within our app, so let’s add the following line to the onCreate method, just after WebView teamWebView...:

teamWebView.setWebViewClient(new WebViewClient());

This will prevent Android from trying to launch another app to handle loading your URL. This is helpful for maintaining a consistent experience for our users. Another helpful addition would be to let our user know that the page is actually loading. As we saw before, Toasts are a really handy way to let our user know something important. Let’s add this after your loadUrl line in the onCreate method:

Toast.makeText(this, "Now loading", Toast.LENGTH_LONG).show();

Since we’re not really worrying about things like threading in this tutorial, our user will have to do some waiting, but at least we can let them know that waiting is normal. If you ever took a physics class where you were told to ignore Gravity or Friction, keep in mind that’s what we’re doing right now. A Progress Bar is likely more appropriate for this case, and you can add one if you’d like, but that’s beyond the scope of this tutorial.

Android does a few things to protect its users. One of these is limiting what external features an app can use. In order to successfully open this website, we’ll need to give our app permission to use the Internet. To do this, open manifests/AndroidManifest.xml. Here, give permission for your device to use the Internet by adding the line:

<uses-permission android:name="android.permission.INTERNET"/>

Finally, we’ll need to connect our Launcher screen with this new Activity. The two steps are:

  1. Add showTeamSite method to MainActivity.java (similar to showProfile method) that points to WebsiteActivity.class
  2. Add an onClick property in activity_main.xml for the Team Site button. The property’s value should be showTeamSite.

Now you can run your app. Here’s what you should see (with your URL of choice):

Using Google Maps API

Next, let’s create our Map activity. Since Google has its own mapping service, adding Maps to an Android app is relatively straightforward. To add the necessary files, using the built-in templates, let’s right-click on our Project’s java folder and go to New -> Google -> Google Maps Activity.

Let’s name it “MapsActivity”, with a layout name of “activity_maps”. For the Hierarchical Parent, let’s select MainActivity, and your respective Package name for that field.

Once we do that, we can click Finish and Android Studio will create our new MapsActivity.java and activity_maps.xml files. It will also create a file called google_maps_api.xml, and this should automatically open up in your editor. In that XML file, there will be a line within the comment block with a URL like

https://console.developers.google.com/flows/...com.nicksuch.sportsballfanatic

We’ll need to copy this line, and paste it in our computer’s web browser. Note: this is a very long URL, so make sure you copy the whole thing, ending in your package name (com.example.sportsballfanatic). This URL will take us to the Google Developer’s console, where you’ll need to log in using your Google / Gmail account. If it’s your first time using the Google Developer’s console, you may be asked to create an account there, which will use your regular Google credentials. Once you’re logged in, you’ll see the Enable an API page. Here you’ll want to Create a new project, then select Continue:

It may take a few seconds to Enable the API. You’ll see a screen that says “The API is enabled”, then you can “Go to credentials”. When you get here, you can change the Name field to something like Sportsball Fanatic (this field is mostly for your own reference). The Pacakge name and SHA-1 certificate fingerprint fields should be pre-filled from the link you pasted.

Once you click “Create”, you’ll see another screen with a popup that contains your API key. This API key begins with “AIza…”. You’ll want to copy that key, then we can leave your web browser and go back to Android Studio and the google_maps_api.xml file. In that XML file, you can replace the YOUR_KEY_HERE line with your own API key. At this point, you should have a functioning MapsActivity. To be able to access it from within your app, we’ll need to connect it to our Launcher activity:

  1. Add showTeamMap method to MainActivity.java that points to MapsActivity.class
  2. Add an onClick property in activity_main.xml for the Fan Map button. The property’s value should be showFanMap.

Once you launch your app and click on the Fan Map button, you should see your map in its current state:

This “state” happens to be New South Wales - the Australian state that’s home to Sydney (and Google’s Sydney-based Maps team). Maybe that’s where your team’s fans are located, but perhaps they’re in some other part of the world. You’ll notice a red marker on the screen. We’ll eventually add some new markers. To navigate the map on your emulator, you may notice that double-clicking will zoom in on the map. To zoom out, double-click and hold the second click, then drag your mouse up to zoom out, or drag down to zoom in. A single-click and drag will allow you to drag and pan the map to other locations.

Since my team, the Franklin College Grizzlies, is based in Indiana, I’m going to add some map pins representing fans in the surrounding cities of Indianapolis, Louisville, and Chicago. I’ve used Google Maps to find Latitude/Longitude coordinates for these cities:

Indianapolis: 39.795362, -86.235290

Louisville: 38.202972, -85.770049

Chicago: 41.790613, -87.583044

Now that I know these coordinates, I can update our MapsActivity.java file to display the new map pins. As we look at the onMapReady method, we’ll notice a comment and three important lines of code:

// Add a marker in Sydney and move the camera

LatLng sydney = new LatLng(-34, 151);

mMap.addMarker(new MarkerOptions().position(sydney).title("Marker in Sydney"));

mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));

The first line of code creates a LatLng object, naming it sydney, and specifying the Latitude and Longitude of Sydney, Australia. Next, as the comment specifies, we make use of the LatLng for two purposes: adding a marker and moving the camera. The addMarker method is called on our mMap object and given a position of sydney. This creates the red marker on the map. Then, the moveCamera method is called on our mMap object, also using the position of sydney. This is what controls our viewport for the map, and makes sure that our initial map view is where we want it to be.

We’re going to change the sydney LatLng declaration, and replace it with our own LatLng objects for one of our desired cities (you can use your own respective cities for this part).

LatLng indianapolis = new LatLng(39.795362, -86.235290);

Next, let’s replace sydney with our city name (here, indianapolis) in our other two lines of code. We can also update the title property:

mMap.addMarker(new MarkerOptions().position(indianapolis).title("Grizzly fans here in Indy!!!"));

mMap.moveCamera(CameraUpdateFactory.newLatLng(indianapolis));

Now, we’ll see our map marker in our new city (Indianapolis), and the camera will also be centered on that location. By default, the camera may be more zoomed out than you’d like, so you can add this line to zoom in more:

mMap.moveCamera(CameraUpdateFactory.zoomTo(7));

This will result in your map looking like this:

We can add additional map markers in a similar manner:

// Add a marker in Louisville

        LatLng louisville = new LatLng(38.202972, -85.770049);

        mMap.addMarker(new MarkerOptions().position(louisville).title("Even the Ville loves the Grizz!!!"));

// Add a marker in Chicago

        LatLng chicago = new LatLng(41.790613, -87.583044);

        mMap.addMarker(new MarkerOptions().position(chicago).title("The Region loves Franklin!!!"));

Another thing that is currently missing from our map is the ability to show our own current location. To do this, we’ll need to add permissions tell the Google Maps API to show our location, then give our app permission to actually access our device’s location. By using the Google Maps template, our app should already have the permission to Access Fine Location, but if not, we’ll need to add the following to our AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Next, we will need to prompt the user to give this permission.

TODO

Taking Photos

http://developer.android.com/training/camera/index.html

Final cleanup

BONUS: The Shortcut

Now that you’ve done things the hard way, we wanted to let you know that there is an easier way to make Android apps. As you may expect from other shortcuts in life, there is always a catch. Using Android Studio is still the best way for making production-quality Android apps, and is what you’ll see in use in most professional situations. However, for quick prototypes and for those who are new to software development, there’s a tool that is sometimes a better option: MIT App Inventor

App Inventor, brought to us from the fine folks at MIT, is a great tool if you like making apps, but don’t like typing code. It uses a visual programming language, similar to MIT’s popular Scratch programming language, that provides pre-made “blocks” of code that a developer can snap together. App Inventor also features a great series of tutorials and a whole community of open-source apps that you can use as inspiration for your work. In the end, App Inventor does allow you to export a standard .apk file that can be loaded onto an Android device. It also provides a software-based emulator, and a companion app for your physical Android devices to easily load apps.

Screenshot 2016-04-01 13.36.09.png

We won’t go too in-depth into the process of learning how to use App Inventor since there’s a great library of tutorials, but did want to share a link to a sample app that could get you started on creating a version of Sportsball Fanatic using this tool: Sportsball Fanatic on App Inventor

Note: you will need a Google account (ie Gmail) to log into the App Inventor editor application, to create your own app and view sample code from other apps.

A few notes

So, you’ve made your first app. What’s next? A great way to continue learning is to start working on your second app. Just dive in, it may be scary in the beginning, but there are plenty of resources out there to help you figure things out. Below are a few tips and resources as you continue your journey into Android app development.