Mobile Development Workshop Introduction to Android

Overview The Android operating system The Android Studio IDE Building a simple app Views, layouts, and activities Binding to views Android intents and information passing Function delegation using implicit intents (Use the Android browser) Doing the heavy lifting ourselves (Build our own browser) Getting candid with the camera Introduction to the ImageView Taking pictures Using the file system Creating views at runtime Looking at location Android Location services The location manager Location listener

What is Android? Android is a mobile operating system developed by Google Is it based on the Linux kernel Is uses Java as a main development language

How do you create Android applications? You write applications for Android using the SDK (Software Development Kit) which is built in Java Writing Android applications require knowledge of Java and an understanding of Object Oriented Development principles There is also an NDK (Native Development Kit) that allows you to write applications in C Many parties are constantly exploring extending Android’s available development languages Java’s SDK is essentially a framework that packages the main facets of an Android application You write apps by tying together and extending various components of the framework

The Android Operating System

Android Studio Based on IDEA by IntelliJ Features SDK and AVD Manager Memory and CPU monitor Android Lint - Resource bug finder Multi-view layout display Logcat and ADB messages Android Device Manager and DDMS

SDK Manager Allows installation and removal of Android SDK versions, source code, tools, and extras

AVD Manager Allows the creation and management of virtual devices for use with the Android emulator You can utilize predefined images based on real world devices, or create your own Allows mapping of virtual device hardware to system hardware (camera, keyboard)

Using Logcat View log messages from applications Severity level filter Verbose Debug Info Warn Error Works in tandem with Logger in application

Views The basic building blocks of a User Interface Responsible for drawing the interface and responding to events

Some common views

Layouts Special types of views that hold other views Invisible Each layout type have different rules and properties for positioning their child views Layouts form the visible aspect of activities (more on that later)

Creating a layout file Describe the layout in XML Describe its children

Loading a layout file In your activity, set the layout file to be the view setContentView(R.layout.layout_file_name)

Some common layouts Linear Layout Relative Layout Web View Organizes its children into a single horizontal or vertical row Allows you to specify the location of a child object relative to others or to the parent Displays web pages

View properties Views inside a layout will have properties that tell them how they look, behave, etc. Examples ID Visibility Size, padding margins Position

Activities An Android application is a collection of components An Activity is one of the main components of Android contains application logic (code) Applications generally consist of one or more activities One activity is delegated as the Main activity The main activity is started automatically when the application is started

Activities Think of activities as screens in your application They allow the user to interact with your application by using views

Declaring activities Activities, like all other components, are declared in the Android Manifest The manifest describes your application to the operating system Examples Application name Version Permissions Android studio will declare components automatically when they are created, but you can change properties manually

Activity lifecycle An activity’s lifecycle is the series of states that it passes through from creation to destruction Understanding the lifecycle allow us to build flexible, responsive apps Activities will call various methods automatically when the activity moves through its lifecycle The code you place in those methods will therefore be executed when the particular lifecycle event occurs

Activity lifecycle

Worksheet 2: Set up our screen Follow the instructions in your worksheet to create a screen that looks like this:

Connect Views to Activity In order to make our apps functional, we have to connect the views that we place on the layout to variables in our activity Here’s an example This will give us a variable called username that we can use to read what the user types into the username field. We can also change the information The code that connects your views to your activity variables should be placed inside the activity’s onCreate() method EditText username = (EditText) findViewById(R.id.username);

Connect Views to Activity End result: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); EditText username = (EditText) findViewById(R.id.username); }

Connect Views to Activity Repeat this for all the views in your layout that the user will interact with Hint: The user will probably not interact with TextViews – those are usually only used for displaying information. As a result, you don’t need to connect them to variables View types in out layout so far EditText Button

Connect Views to Activity The onCreate() method so far: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); EditText username = (EditText) findViewById(R.id.username); EditText email = (EditText) findViewById(R.id.email); EditText password = (EditText) findViewById(R.id.password); EditText passwordConfirm = (EditText) findViewById(R.id.password_confirm); Button saveButton = (Button) findViewById(R.id.button); }

Events Events are triggered when a user interacts with a view Event listeners are used to specify what should happen when a particular event takes place Many standard event listeners are found inside the View class

Event listener callbacks Android provides many View.On*Listener classes with appropriate callback methods onClick Called when the user touches the view onLongClick Called when the user touches and holds the view onFocusChange Called when a user navigate to, or away from a view

Create a listener to perform an action Remember, in our app we want to show a message to the user depending on whether they entered the correct information in a signup form We want to execute that logic when the user clicks the save button Therefore, we should put some code inside the onClick() method of a listener and assign it to the button

Create a listener to perform an action Lets create an test our listener. We are going to display a message using a Toast object. A toast is a message window that allows us to show a quick message to the user saveButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, "You clicked the button", Toast.LENGTH_SHORT).show(); } });

Accessing values from a view When you want to access information the user entered in an EditText, you can call certain methods on the variable, like this: The getText() method returns an object that has the information the user entered. The toString() method converts the information the user entered to a String. We then save that string to a variable for use later. String usernameValue = username.getText().toString();

Accessing values from a view Lets grab all the information inside the various EditTexts. We want to do that when the user clicks the Save button @Override public void onClick(View v) { String usernameValue = username.getText().toString(); String emailValue = email.getText().toString(); String passwordValue = password.getText().toString(); String passwordConfirmValue = passwordConfirm.getText().toString(); }

Now for some logic We want to show the user a message based on the information they entered For example, if the user were to click Save on this screen right now, the application should display a message saying the passwords don’t match Even though we can’t see the passwords, we know they don’t match, because they have different lengths

Comparing Strings Remember, a value of type String is a sequence of characters treated as a single item Because a String is an object, we don’t compare them using == Instead we use the equals() method Example You can also use equalsIgnoreCase() if you would like to ignore upper and lowercase differences String name1 = "Michael"; String name2 = "Mi" + "chael"; if (name1.equals(name2)){ // Do something }

Creating a Web Browser Our next project will be to create a web browser for showing webpages

Web Browser: Setup Start a new project for your Web Browser app In the generated layout file for your main activity (e.g. Click on: app -> res -> layout -> activity_main.xml in the project explorer window), arrange a WebView, an EditText, and a Button in a fashion similar to web browsers you have used in the past (WebView)

Permissions Because a browser users the internet to load webpages, we must tell Android that we need access to the network Add the following line to the AndroidManifest.xml file right after the manifest tag: This allows your application to access the internet <manifest xmlns:android="http://schemas.android.com/apk/res/android" package=“org.enontab.browser"> <uses-permission android:name="android.permission.INTERNET" />

Web Browser: Next steps In your main activity, you can now connect variables in your activity to the 3 views in your layout file: WebView, EditText and Button Remember the format for connecting variables to views in a layout ClassName variableName = (ClassName) findViewById(R.id.view_id); So if we are connecting the WebView in our layout file to a variable in our activity, we would say: WebView myWebView = (WebView) findViewById(R.id.webview); Where myWebView is the variable we are creating, and webview is the ID given to the view in the layout file

Web Browser: Now what? Now that everything is connected, we need to describe what should happen when the user clicks the button. This is called the behavior of the application. Discussion: How is a browser used?

Web Browser: Respond to Click Event When the user clicks the button, we want to view the website that they entered into the EditText To do this, we have to use an OnClickListender object Remember that Listeners allow us to specify what should happen when an event (such as a click event) occurs goButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // Do browser stuff here } });

Web Browser: What’s the browser stuff? Let’s break down the steps involved into an algorithm An algorithm is a set of steps to be followed to perform a specific action Create a variable to hold a String String urlString; Get the value entered into the EditText (the URL) and store it in our String variable urlString = urlEditText.getText().toString(); Use the value of the string variable as the address for the WebView by calling its loadUrl() function and passing the variable as an argument loadUrl(urlString)

Web Browser: Showing a website

MalformedURLException After you get your browser working you might notice a slight issue Your browser crashes if the user does not enter a proper URL with the “http” or “https” at the beginning If you take a look at the error logs, it will tell you that there was a MalformedURLException

Exceptions An exception happens when there is a deviation from the intended use of your app that the program does not know how to deal with A MalformedURLException is an example that takes place when you try to load a URL that it not properly written Other examples of exceptions in Android include RuntimeException – When you try to perform an action that is not possible, such as dividing a number by zero FileNotFoundException – When you try to open a file that is not on the device ActivityNotFoundException – When you try to open an activity that isn’t present

Fixing the MalformedURLException We know that if a user types a URL without http at the beginning, there will be an exception But it would not be good user design if we forced the user to type http:// each time Possible solution: Automatically attach http:// to the beginning of the URL that the user enters. If the user enters www.google.com, attach http:// to the beginning, resulting in http://www.google.com Example code: urlString = "http://" + urlEditText.getText().toString(); loadUrl(urlString)

What’s the problem with our solution?

What’s the problem with our solution? If the user did enter a URL with http at the beginning, we have messed up the data by adding it again If the user enters http://www.google.com, and we attach http:// to the beginning, it will result in http://http://www.google.com

What’s the problem with our solution? Algorithm to proper solution If URL does not have “http://” at beginning Attach “http://” to beginning of URL Load URL urlString = urlEditText.getText().toString(); if (!urlString.startsWith("http://")){ urlString = "http://" + urlString; } loadUrl(urlString)