First Android. Application

Transcription

1 First Android Application

2 GETTING STARTED In this lesson we will walk through creating your very first Android application. It may seem complicated at first, but if you follow along you will end up with a very basic Android application. It is OK if you do not understand everything that is happening as we go through the slides. When you are ready to get started, Open up Eclipse.

3 GETTING ECLIPSE READY 1. Click the New Android Application Project Button in the Toolbar. The button looks like this: Fill out the form that appears (image on slide 4): 3 Application name is the app name that appears to users. For this project, use "My First App". 3 4 Project name is the name of the project directory and the name visible in Eclipse. For this project use "MyFirstApp". 4 5 Package name is the Java namespace for your app. In this project lets use "com.example.myfirstapp 5 6 Minimum Required SDK is the lowest version Android SDK version that your application will support. Let's choose API 8 6

4 NEW ANDROID APP SCREEN 7 Leave the rest of the options at their default values and click Next 7

5 NEW ANDROID APP SCREEN (CONTINUED) 8 Leave all these options at their default values and click Next

6 NEW ANDROID APP SCREEN (CONTINUED) On this screen you can use the tools to create an App icon. You can use the default App icon or create one of your own. 9 9 When you are finished click Next

7 NEW ANDROID APP SCREEN (CONTINUED) Now you can select an Activity template from which you can begin building your app For this project, select Blank Activity and click Next

8 NEW ANDROID APP SCREEN (CONTINUED) 111 On this screen, leave all of the defaults in place and click Finish

9 FIRST ANDRIOD APP CREATED - Congratulations, you have now created your first Android application. - Notice that a window appears that has the icon you created along with the text saying "Hello world!". - The file that is being displayed is the fragment_main.xml file and it represents one graphical display or page in your app. - There is a Graphical Layout tab and a fragment_main.xml tab on the bottom left of the main panel. 121 Click the fragment_main.xml tab.

10 FRAGMENT_MAIN.XML - This should look a little familiar. It is just an XML file that is used to control the display on the Android Device.

11 PROJECT EXPLORER - Now let's take a look at what the Android project created for us. 1 Open up the Project Explorer in Eclipse by going to Window > Show View > Project Explorer 1 Expand the MyFirstApp section in the Project Explorer. - We will go over the various parts of the Android application, starting with the AndroidManifest.xml file. 1 Double click the AndroidManifest.xml file to open it in the main panel.

12 ANDROIDMANIFEST.XML - The manifest file describes the fundamental characteristics of the app and defines each of its components. - You will notice that there are many tabs at the bottom of the main panel when viewing the manifest file. - Go ahead and click through the various tabs briefly to look at what options are available. You will learn more about these options as you continue through the class. - The first four tabs, Manifest, Application, Permissions, and Instrumentation are just easier to use interfaces for adding and modifying the AndroidManifest.xml file Click on the fifth tab which is the AndroidManifest.xml tab

13 ANDROIDMANIFEST.XML (CONTINUED) This file should look familiar as we looked at a similar AndroidManifest.xml file during the lesson on XML.

14 - The src directory is the 17 PROJECT EXPLORER - SRC DIRECTORY directory for your apps main Java source files. - It includes an Activity class called MainActivity that runs when your applications is launched using the app icon. The MainActivity.java file should already be open, but if it isn t, double click on the MainActivity.java file to open it in the main panel. In the project explorer go to src/com.example.myfirstapp/mainactivity.java. You will notice it is not a very large file right now. Although you may not yet understand what is going on in this file, you should at least be able to recognize the Java code as it is structured the same as other Java code you have worked on.

15 - The res directory contains several subdirectories that contain app resources. - This includes things like images, strings, and layout files. - The layout subdirectory contains a fragment_main.xml file that controls the layout - The values subdirectory contains a strings.xml file that defines the strings of text that are used in your application. 18 PROJECT EXPLORER - RES DIRECTORY Double click on the strings.xml file to open it

16 STRINGS.XML - The strings.xml file contains a graphical interface to add strings to the file. - If you click the strings.xml tab on the bottom of the main panel, you will see the XML document containing the strings.

17 - When you build and run the default Android app, the default Activity class starts and loads a layout file that says "Hello World. - Click the MainActivity.java file tab, look at the oncreate method. 19 UNDERSTANDING HOW YOUR APPS RUN - This is the method that gets run when your application is launched. Don't worry about what the code does yet, just know that this code is run when the app is launched.

18 ANDROID EMULATOR - In order to test your application, you will need to run your Android application inside of an emulator. - The Android Emulator will display a window with an Android phone in the window. You will be able to interact with the phone as if it was on an actual Android device. - The Android Emulator can run all different kinds of Android phones and tablets for testing.

19 ANDROID VIRTUAL EMULATOR - In order to use the Android Emulator you must first set up an Android Virtual Device (AVD). - In the Eclipse toolbar, click the Android Virtual Device Manager - In the Android Virtual Device Manager click the New button to set up a new Android Virtual Device

20 - Use the information to the right to create the new AVD ANDROID VIRTUAL EMULATOR (CONTINUED) - Click OK (this may take a few minutes to create). The dialog box below will pop up when completed.

21 ANDROID VIRTUAL DEVICE - You now have an Android Virtual Device to test on. - Click on the Nexus_S_v10 device in the Android Virtual Device Manager and click Start. - Click Launch in the Launch Options window. Loading the emulator may take a few minutes Loading screen Finished loading

22 ANDROID VIRTUAL DEVICE (CONTINUED) - After the emulator loads, if your app does not appear. Close the Android Virtual Device Manager and then reopen it. - If your app does appear, you will notice that is looks and acts like a real Android phone. Go ahead and navigate around the emulator to learn how it works. If you are familiar with how Android phones work, most of this will be the same. If you are not familiar with Android phones, take a few minutes to learn more about the Android device. - From this point on we will only test on the Nexus_S_v Close the Android Virtual Device Manager

23 RUNNING YOUR APPLICATIONS - Running your app through the Android Virtual Device Manager is not the only way to run your app. - As you have done in your earlier java projects, you can also click the Run button or use the keyboard shortcut Ctrl+F11. - When you run your app using one of the above mentioned methods, if you get an error then make sure you have the MainActivity.java file open.

24 - Click on the strings.xml tab along the top. 27 CHANGING THE APP TITLE 28 - Click on the Resources tab, click the app_name (String) item, and change the Value to First Android App

25 - Click on the strings.xml tab CHANGING THE APP TITLE (CONTINUED) - Notice the value of app_name has changed Save the file - Run the application in the Android Emulator to confirm the app title has changed. 32 There is the First Android App icon

26 ADDING A USER INTERFACE - Our next goal with this application is to add a textfield that will allow you to type in a message, click a button, and then have that message displayed on another screen When you are ready, click the fragment_main.xml tab.

27 FRAGMENT_MAIN.XML - You will see the following XML code. The TextView tells the Android App to display text on the screen. - This code defines how our app is displayed when it is run.

28 FRAGMENT_MAIN.XML (CONTINUED) - The TextView displays the string called hello_world that is defined in the strings.xml file. The text is defined here 34 - Click on the strings.xml tab.

29 - Click on the Resource tab along the bottom STRINGS.XML - Select the hello_world string, then click Remove. - The hello_world string is the greeting on your app which is not needed 37 - Now go back to the fragment_main.xml tab.

30 - Delete the entire TextView information. 38 FRAGMENT_MAIN.XML 39 - Click save

31 - We are going to change the layout from a RelativeLayout to a LinearLayout to make it easier to add a textfield and a button CHANGING THE LAYOUT - On the fragment_main.xml file find the two spots where it states <RelativeLayout> - Change <RelativeLayout> to say <LinearLayout> - Click Save

32 CHANGING THE LAYOUT (CONTINUED) - This is what the fragment_main.xml file will look like now.

33 ADDING THE TEXTFIELD (CONTINUED) - There are two different ways to add a TextField (or any other type of Form Item to your Activity (remember Activity is basically just a display or screen that shows on the Android device) - The first way is to go into the fragment_main.xml file and type out the code for the TextField. This is the more difficult of the two options but gives you better control over what happens to your TextField. - The other option is to use the interface on Eclipse and drag in a TextField display. In this example, we will use the second option.

34 - Go to the Graphical Layout tab on the fragment_main.xml layout file ADDING THE TEXTFIELD (CONTINUED) - In the Palette section, click on the Text Fields subsection. - Click and drag the Plain Text Text Field onto your App. Click and Drag This To the Android App

35 - Now click on the fragment_main.xml tab to view the XML code. 46 ADDING THE TEXTFIELD (CONTINUED) - You will notice that there is now an EditText section in the XML file. This tells the Android application to display a textfield when the app is run. - If you see some yellow underlines in your fragment_main.xml file, you can ignore those for now. We will fix them later.

36 - Go back to the Graphical Display tab ADDING THE TEXTFIELD (CONTINUED) - Click the textfield so it is selected. - In the properties window, on the right panel, search for the first Hint field. Do not use the Hint field inside the TextView section. - Click the ellipsis (...) button on the very right of the Hint field. Click Here

37 ADDING THE TEXTFIELD (CONTINUED) - Click the New String button 50 Click Here

38 - In the String field enter "Enter a Message" ADDING THE TEXTFIELD (CONTINUED) - In the New.R.String. field enter "edit_message". - Leave the rest of the fields at their defaults Click OK to close the Create New Android String dialog box. - Click OK to close the Resource Chooser dialog box.

39 ADDING THE TEXTFIELD (CONTINUED) - Go back to the strings.xml file, you should see your newly added string. 56 The edit_message string also shows up in the Resources tab. The edit_message string is in the strings.xml code

40 57 ADDING THE BUTTON - While we are in the strings.xml file, add some text for a new button we are about to create. This is to show you that you can add items to the strings.xml file from multiple places. However, regardless of where you enter the information, it should always end up in the XML code of this file. - Add the following line to the bottom of the strings.xml file. - After you finish, click over to the Resources tab and confirm that button_send is now displayed Click the Save button to save your strings.xml file.

41 - Click back to the fragment_main.xml file in the Graphical Layout section ADDING THE BUTTON (CONTINUED) - In the Palette section, click on the Form Widgets subsection. - Drag a Button to the right of the message textfield. You will have to resize the text field box to make room for the button. Drag This Over Here

42 - Click on the fragment_main.xml tab that is along the bottom. 63 ADDING THE BUTTON (CONTINUED) - A new self closing Button XML element has been added to the file for us. - Look at the android:text attribute. Notice the yellow line under the code? This is to warn us that we should use one of the strings from our strings.xml file. We need to change this

43 - There are two ways to change this text to use a strings.xml resource ADDING THE BUTTON (CONTINUED) - The first would be to go back to the Graphical Layout, click the button, and find the Text field. You could then click the ellipsis (...) and find your button_send string resource. - However, in this case it is probably much faster to type it in. Lets go ahead and type in the changes now. - Change the android:text attribute to a value of "@string/button_send". - Click Save - Click back to the Graphical Layout to see the changes.

44 ADDING THE BUTTON (CONTINUED) - The Button element in your fragment_main.xml file should look like this: - The Graphical Layout should look like this:

45 - Run the Application 67 RUNNING THE APPLICATION - You will see your textfield and button on the screen. You can even type text into the textfield, but clicking the button does not do anything.

46 STARTING ANOTHER ACTIVITY - We now have an app that shows an activity (a single screen) with a text field and a button. Now we will add some code to MainActivity that starts a new activity when the user clicks the Send button.

47 - To respond to the clicking of the Send button, click on the fragment_main.xml file. 68 RESPONDING TO THE SEND BUTTON - Click the fragment_main.xml tab at the bottom of the main panel Add the android:onclick attribute to the Button element, giving it a value of "sendmessage". 70 Add the onclick attribute

48 71 THE ANDROID:onClick EVENT - Now that you added the android:onclick attribute to the Button element in your fragment_main.xml file, the code will try to call a method called sendmessage in your MainActivity.java file. - Since that method does not yet exist, we need to create it. - Click on the MainActivity.java file tab. - Add the following code after the oncreateoptionsmenu method. 72

49 THE ANDROID:onClick EVENT (CONTINUED) - In order for your application to recognize a method name given to android:onclick the method must: 1 - Be public 2 - Have a void return value 3 - Have a View as the only parameter (this will be the View that was clicked) 1. Our method is public 2. We have a void return value 3. Our only method parameter is a View that we call "view"

50 THE ANDROID:onClick EVENT (CONTINUED) - You will notice a red error under the View variable type. A View variable type is not a standard Java variable and is defined by an Android class that we must import. - There are a couple of ways you can import Android classes: 1 - You can manually import needed classes by typing them in. or 2 - You can use a shortcut that will try to automatically import the needed classes. You can get to this by going to Source > Organize Imports in the Eclipse menu or use Shift+Ctrl+O.

51 - An Intent is an object that provides runtime binding between separate components (such as two activities). - The Intent represents an app s "intent to do something." You can use intents for a wide variety of tasks, but most often they're used to start another activity. - Click inside the sendmessage() method, create an Intent to start an activity called DisplayMessageActivity. 73 BUILDING AN INTENT 74 - Use the shortcut Shift+Ctrl+O or go to Source > Organize Imports to import the Intent class - Ignore the DisplayMessageActivity error for now. The error will be fixed when we add the DisplayMessageActivity class.

52 BUILDING AN INTENT - Do not worry about what exactly the code is doing when it creates an Intent. Just know that the Intent we are creating will be used to start another Activity (display another screen on the Android device). - An Intent not only allows you to start another activity, but it can carry a bundle of data to the activity as well. So, use the findviewbyid method to get the EditText element and add its text value to the Intent we created.

53 - Add the code below to the sendmessage() method: 75 BUILDING AN INTENT 76 - Use the shortcut Shift+Ctrl+O or go to Source > Organize Imports to import the EditText class.

54 BUILDING AN INTENT - This last block of code may be the most complex we have seen. However, it will be more clear what is going on in later lessons. For now, just follow along and understand that we are just creating an Intent (think of this as a message or a request), to pass to another Activity (just another screen/page on the Android device). Create the Intent Get the EditText text field Get the message from the EditText text field Add the message to the Intent so we can display it on the next Activity (screen) This is the android:id attribute of the EditText Element

55 - Because we have not yet defined what EXTRA_MESSAGE is, we will do that now. We will use a special type of Java variable called a Constant. 77 BUILDING AN INTENT (CONTINUED) - A Constant is a special variable in which the value will not change. The value always remains constant. - In Java, a Constant variable name is generally all uppercase letters. - Add this code above the sendmessage() method: Variable Type Variable Name Variable Value

56 - To start an activity, you simply need to call the startactivity method and pass it your Intent. The system receives this call and starts an instance of the Activity specified by the Intent. 78 START THE SECOND ACTIVITY - Add this code to the sendmessage() method: - With this new code, the complete sendmessage() method that's invoked by the Send button now looks like this:

57 - In order to get the sendmessage() code to work, we need to create the DisplayMessageActivity class CREATE THE SECOND ACTIVITY - Click New in the toolbar - In the window that appears, open the Android folder and select Android Activity - Click Next

58 - Select BlankActivity CREATE THE SECOND ACTIVITY (CONTINUED) - Click Next

59 - Fill in the activity details: 84 CREATE THE SECOND ACTIVITY (CONTINUED) Project: MyFirstApp Activity Name: DisplayMessageActivity Layout Name: activity_display_message Title: My Messages Hierarchical Parent: com.example.myfirstapp.mainactivity Navigation Type: None 85 - Click Finish

60 CREATE THE SECOND ACTIVITY (CONTINUED)

61 - Click on the newly created DisplayMessageActivity.java file tab CREATE THE SECOND ACTIVITY (CONTINUED) - Eclipse has already created the oncreate method for us, however, it also created some extra code that we do not need for this project. - Remove the other methods besides the oncreate method. - Here is what the DisplayMessageActivity.java file will look like after removing the code:

62 CREATE THE SECOND ACTIVITY (CONTINUED) - All subclasses of Activity must implement the oncreate() method. - The system calls this when creating a new instance of the activity. - This is where you must define the activity layout and where you should perform initial setup for the activity components. - All Activities must be declared in the AndroidManifest.xml file using an <activity> element. Eclipse automatically added the default code to the AndroidManifest.xml file for us.

63 - Click on the MyFirstApp/AndroidManifest.xml file tab. 88 CREATE THE SECOND ACTIVITY 89 - Locate the the second <activity> element. The first Activity. This is the home screen with the text field and Send button The second Activity. This is what we just created.

64 - Run your application. 90 RUNNING THE PROGRAM - The app should now allow you to enter text, click the send button, and then display the My Messages screen. First Activity Second Activity

65 RECEIVE THE INTENT - Every Activity is created by an Intent, regardless of how the user got there. You can get the Intent that started your activity by calling the getintent() method and retrieving the data contained within it. - This is why the My Messages screen was blank even though you typed in a message before hitting the send button. - To get the message to display, we need to create a TextView widget and set the text using the settext() method. - We then call the setcontentview() to set the TextView as the current activity layout.

66 - Click on the DisplayMessageActivity.java file tab DISPLAYING THE MESSAGE - Add the code below: - Make sure to organize your sources by clicking Sources > Organize Sources or using the shortcut Shift+Ctrl+O. 93

67 - Click Save 94 DISPLAYMESSAGEACTIVITY - Here is the code for the entire DisplayMessageActivity class.

68 - Click on the MyFirstApp/AndroidManifest.xml file tab RUN YOUR APPLICATION - Run your Android application. - Type a message and click the Send button and the message should be displayed on the My Messages screen. 97 Congratulations! You have just successfully built your first Android application.