Lab 1.1: GUI Design

In this lab, we will learn how to create our first android application, launch it on a real device, and we also learn basics of building a simple user interface. In addition, we will learn how to use collaboration tools (i.e. git) in order to be able to work efficiently with a team or individually.

Creating first Android project on Android Studio

If this is your first time running Android Studio, you’ll see the following welcome screen. To begin, click on “Start a new Android Studio project” from the available options.

Note: If it notifies you that there are updates available for Android Studio, accept to download and install the updates so you have the latest version of Android Studio.

welcome_to_android_studio

 

If you already have an Android project open, you can create a new project via the “File” menu at the top left corner of the open window. Choose “New Project”.

 

your-first-android-app-2

 

Application Name, Company Domain, Project Location

Fill in the form that appears as follows:

 

 

  • Application Name is the app name that appears to users. For this project, use the default name
  • The company domain name is used to uniquely identify your app. In this case, the domain name doesn’t matter so much and you can use the default domain name. Only if you plan to release it on Google Play, then the company domain name matters.
  • Package Name is the package namespace for your app (following the same rules as packages in the Java programming language). Your package name must be unique across all packages installed on the Android system. For this reason, it’s generally best if you use a name that begins with the reverse domain name of your organization or publisher entity. For this project, you can use the default package name.
  • The project location is a directory on your hard drive where you want to put all files related to this Android Studio project. It is recommended to create an android-studio-projects directory in which you store all your Android Studio projects. For this project, you can use the default location.

Once you have set the application name, company domain and project location, click on the “Next” button in the lower right corner of the dialog.

Selecting Form Factors

The second screen in the “New Project” dialog box asks you to select what form factors your app will run on. Form factors means screen sizes and device types. Just select the “Phone and Tablet” option and leave the rest unselected. Then click the “Next” button.

  • Minimum SDK is the lowest version of Android that your app supports. To support as many devices as possible, you should set this to the lowest version available that allows your app to provide its core feature set. If any feature of your app is possible only on newer versions of Android and it’s not critical to the app’s core feature set, you can enable the feature only when running on the versions that support it. Leave it to the default value for this project and click Next.

 

Add An Activity

The third screen in the “New Project” dialog asks you to add an activity to your Android app. Activities are similar to windows in an desktop application. Thus, you have to choose what “window” or “screen” (activity) that your Android app will use. An Android app can use more than one activity (switching between “screens” / activities), but in this case just select “Empty Activity”. Then click the “Next” button.

 

Choose Activity Options

The fourth screen in the “New Project” dialog asks you to choose various options for your new file (activity). You have to choose an activity name, layout name and a title. The dialog has already suggested some names. Just leave these suggestions in the input fields and click the “Finish” button.

When you click the “Finish” button Android Studio takes a bit of time to create your new project. When it is finished it will open your new project in Android Studio. You should be aware of a few directories and files in the Android project:

manifests/
Directory for AndroidManifest.xml file. The manifest file describes the fundamental characteristics of the app and defines each of its components. For example, you define what permission your app requires (network access, SD card read, contacts read…etc)
java/
Directory for your app’s main source files. By default, it includes an Activity class that runs when your app is launched using the app icon.
res/
Contains several sub-directories for app resources. Here are just a few:

drawable-hdpi/
Directory for drawable objects (such as bitmaps) that are designed for high-density (hdpi) screens. Other drawable directories contain assets designed for other screen densities.
layout/
Directory for files that define your app’s user interface.
values/
Directory for other various XML files that contain a collection of resources, such as string and color definitions.

 

 

Running the App

You are now ready to run your first Android app on your Android phone.

Run your app on real phone

  1. Enable Developer Options

    First you need enable developer options on your device. The developer options enable you to connect the device to your computer via a USB cable, and run your apps directly on your phone via Android Studio. This is nice when testing out how your app works on a real phone. Enabling developer options can be a bit tricky. Developer options can be enabled by locating “Build Number” in your Android phone settings and repeatedly tapping on it. Once enabled, go to “Developer Options” and enable “USB Debugging”. Ask the TA to help you if necessary.

  2. Install USB Drivers

    If you are developing on Windows instead of Linux, you may have to install some USB drivers for your device on your Windows computer. How that is done is explained in Android’s guide to install USB drivers.

  3. Plugin Your Device

    Now plugin your Android device. Connect it to your computer with a USB cable. On the device, in the notifications bar it should say “connected as a media device”. That is the right connection type. After a short while the phone should show a dialog asking if you want to allow USB debugging on the phone. The dialog will show you the computer’s RSA key plus some more information. Click the “OK” button. Now the device is connected to Android Studio. If you by accident click “Cancel” or click outside the dialog so it disappears, disconnect your Android device and re-connect it again. That should make the dialog show up again.

  4. Run the App

    In Android Studio’s “Run” menu select ” Run ‘app’ “.

    Running the Android app via the Run menu.

    You can also run your new Android app via the “Run” button in the toolbar. Here is where the “Run” button is located:

Running the Android app via the toolbar.

Android Studio will show you a dialog where you can choose what device to run your Android app on. You should see your connected device in the list.

realphone

Choose your device and click the “OK” button. Look at your Android device. It should now be running a basic app with the title “My First App” (or whatever name you gave it) and with the text “Hello world!” on the screen. This is the basic app that Android Studio created for you when you created the project. You are now ready to modify the project to turn the app into whatever app you want to develop.

Run your app on emulator

The Android SDK includes a virtual mobile device emulator that runs on your computer. The emulator lets you prototype, develop and test Android applications without using a physical device. The Android emulator mimics all of the hardware and software features of a typical mobile device, except that it cannot place actual phone calls. It provides a variety of navigation and control keys, which you can “press” using your mouse or keyboard to generate events for your application. It also provides a screen in which your application is displayed, together with any other active Android applications.

Run the application. Android Studio will show you a dialog where you can choose what device to run your Android app on. Choose the option “Launch emulator” and click OK. Android emulator will open in a new window and will take some time to boot Android operating system, after which you’ll be able to see “Hello world!” on emulator’s screen.

emulator

 

ADB tool and command line

It is also possible to run and install your app through command line. Android Debug Bridge adb tool is quite similar to ssh in which you can have a shell in your android device, read/write files, transfer data between computer and phone and more.
adb tool is actually located in the sdk directory. Namely, we installed in ~/sdk/android-sdk-linux/platform-tools. In order to access anywhere adb tool, you need to update your PATH environment variable.
  1. nano ~/.bashrc
  2. add the following line anywhere: PATH=$PATH:<location-to-sdk-installation>/platform-tools
  3. Press control and “o”, then control “x” to save the file and exit
  4. execute “source ~/.bashrc” to update your environment setting in the current shell.
Now you can execute adb from anywhere. To see adb options, run
  • adb
To have a access to a shell in your device, run
  • adb shell
Interestingly, you can freely navigate in your device, remove and add files using linux commands.  Actually, android gives a limited shell so don’t expect to find all Linux commands.
To install your app, go to your project root directory and execute:
  • adb install bin/MyFirstApp-debug.apk
Open your device and launch your “MainActivity” app.
If you re-execute the adb command, you will get an error, because the app is already installed. You need to uninstall the app through your android device.

 

Layout Design

Now open res>layout>activity_main.xml. You will see a very easy GUI editor where you can drag and drop different components. At the bottom of the editor, you can switch to the XML file. Play with components in the GUI and check the changes in XML file.

Now, follow these two quick instructions form google:

 

Setting up version controlled project

In any project you are likely to work with others. In order to keep track of changes and prevent overwriting, it is necessary to have a version control system. In fact, there are many version control systems such as SVN, CVS and more recently GIT. SVN and CVS follow a client-server approach only to track changes which means you need always a network connection in-order to commit changes (or upload changes). On the other hand, GIT can also work locally. This means that you even use GIT for your own projects to set checkpoints in your code progress so that you can revert back at any time.

In this course, we will use our own private git server (www.systemdev.org/git). Tt provides nice online visual tools, code statistics and collaboration tools.

First of all, install git client in your machine. For linux machine (we assume an ubuntu flavor here). Open the terminal and type:

Tell Git your name so your commits will be properly labeled.

Tell Git the email address that will be associated with your Git commits.

For Windows, install git from git-scm. After installing git, open git terminal and repeat the above steps.

Now go to www.systemdev.org/git and sign in using your Masdar username (you should have received a email containing a link for account activation and setting up password).

Once you login, you will see a project in your name. Go to the project, and you will see instructions for “Git global setup” and “Create a new repository”. Open a terminal on your laptop and execute these instructions to clone the repository on your laptop.

Change directory to the cloned repository, then create a folder named lab-1.1. Now use the following commands to add the new changes to the repository, commit changes, and push changes to the remote server.

Please note that for subsequent lab and project submissions, you just need to perform these simple git commands (assuming the files/folder to be submitted are already inside the cloned directory). Always make sure that the cloned directory contains only those files which you want to submit.

 

Lab Exercise 1.1

The goal of this exercise is to make sure everybody can develop a simple GUI and know how to interact with XML GUI components from the code.

In the past, students were asked to develop a simple calculator from the scratch. Now, you don’t have to develop it from scratch but start with a partially developed application instead by following these steps:

  • Please download the partially developed application, and extract it to a directory.
  • Open the application in Android Studio by launching Android Studio, selecting File=>New=>Import Project, navigating to the directory where you extracted the partial application, and selecting it.

Now that you have imported the application, you will need to implement the remaining functionality as described below:

  1. Application: Change the application Label. The application label is basically the name of application you will see when you install it on your phone. Currently, it is set to “AppName“. Change it something meaningful like “Calculator”. Hint: The relevant files are “AndroidManifest.xml” and “strings.xml“.
  2. Layout: Use @string resource instead of hardcoded strings to label buttons and texviews in the file “activity_main.xml“. Hint: see how it’s done for “delButton” in “activity_main.xml“.
  3. Layout: In the file “activity_main.xml“, replace all occurrences of “dummyFunction” with the correct function from “MainActivity.java”. 
  4. MainActivity: Complete the functions “showAbout()” and “clickExecute()“.

How to Submit

  • Copy the final exercise files into ‘lab-1.1’ folder that you created in the lab.
  • Add, commit, and push your changes to the remote server.
  • The deadline is before the next lab.

 

References

  1. http://developer.android.com/index.html
  2. http://tutorials.jenkov.com/android/your-first-android-app.html