Download First Android Application

First Android
Application
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.
GETTING ECLIPSE READY
1. Click the New Android Application Project Button in the
Toolbar. The button looks like this:
22 Fill out the form that appears (image on slide 4):
33 Application name is the app name that appears to users. For
this project, use "My First App".
44 Project name is the name of the project directory and the
name visible in Eclipse. For this project use "MyFirstApp".
55 Package name is the Java namespace for your app. In this
project lets use "com.example.myfirstapp“
66 Minimum Required SDK is the lowest version Android SDK
version that your application will support. Let's choose API 8
1
NEW ANDROID APP SCREEN
7 Leave the rest of the options at their default values and click
Next
7
NEW ANDROID APP SCREEN (CONTINUED)
8 Leave all these options at their default values and click Next
8
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 When you are finished
click Next
9
NEW ANDROID APP SCREEN (CONTINUED)
Now you can select an
Activity template from
which you can begin
building your app.
1 For this project, select
Blank Activity and click
Next
10
NEW ANDROID APP SCREEN (CONTINUED)
1 On this screen, leave all of the defaults in place and click
Finish
11
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.
1 Click the fragment_main.xml tab.
12
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.
PROJECT EXPLORER
- Now let's take a look at what the Android project created for
us.
131 Open up the Project Explorer in Eclipse by going to Window >
Show View > Project Explorer
141 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.
151 Double click the AndroidManifest.xml file
to open it in the main panel.
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.
16- Click on the fifth tab which is the AndroidManifest.xml tab
ANDROIDMANIFEST.XML (CONTINUED)
This file should look familiar as we looked at a similar
AndroidManifest.xml file during the lesson on XML.
PROJECT EXPLORER - SRC DIRECTORY
- The src directory is the
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.
17 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.
PROJECT EXPLORER - RES DIRECTORY
- 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 Double click on the strings.xml file to open it
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.
UNDERSTANDING HOW YOUR APPS RUN
- 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
- 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.
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.
ANDROID VIRTUAL EMULATOR
- In order to use the Android Emulator you must first set up an
Android Virtual Device (AVD).
20- In the Eclipse toolbar, click the Android Virtual Device
Manager
21 In the Android Virtual Device Manager click the New button
to set up a new Android Virtual Device.
-
ANDROID VIRTUAL EMULATOR
(CONTINUED)
- Use the information to the right to
create the new AVD
23Click OK (this may take a few
minutes to create). The dialog box
below will pop up when completed.
22
ANDROID VIRTUAL DEVICE
- You now have an Android Virtual Device to test on.
Click on the Nexus_S_v10 device in the Android Virtual
24Device Manager and click Start.
25 Click Launch in the Launch Options window. Loading the
emulator may take a few minutes.
-
Loading
screen
Finished
loading
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_v10
- Close the Android Virtual Device Manager
26
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.
CHANGING THE APP TITLE
- Click on the strings.xml tab along the top.
27
- Click on the Resources tab, click the app_name (String) item,
and change the Value to First Android App
28
CHANGING THE APP TITLE (CONTINUED)
- Click on the strings.xml tab.
30- Notice the value of app_name has changed.
29
- Save the file
32- Run the application in the Android Emulator
to confirm the app title has changed.
31
There is the First
Android App icon
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 .
33
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.
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
- Click on the strings.xml tab.
34
STRINGS.XML
- Click on the Resource tab along the bottom.
Select the hello_world string, then click Remove.
3635
- The hello_world string is the greeting on your app which is
not needed
- Now go back to the fragment_main.xml tab.
37
FRAGMENT_MAIN.XML
- Delete the entire TextView information.
38
- Click save
39
CHANGING THE LAYOUT
- We are going to change the layout from a RelativeLayout to a
LinearLayout to make it easier to add a textfield and a button.
- On the fragment_main.xml file find the two spots where it
states <RelativeLayout>
40
- Change <RelativeLayout> to say <LinearLayout>
41
- Click Save
42
CHANGING THE LAYOUT (CONTINUED)
- This is what the fragment_main.xml file will look like now.
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.
ADDING THE TEXTFIELD (CONTINUED)
- Go to the Graphical Layout tab on the fragment_main.xml
layout file.
43
- In the Palette section, click on the Text Fields subsection.
44
- Click and drag the Plain Text Text Field onto your App.
45
Click and
Drag This
To the
Android App
ADDING THE TEXTFIELD (CONTINUED)
- Now click on the fragment_main.xml tab to view the XML
code.
- 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.
46
- If you see some yellow underlines in your fragment_main.xml
file, you can ignore those for now. We will fix them later.
ADDING THE TEXTFIELD (CONTINUED)
- Go back to the Graphical Display tab
Click the textfield so it is selected.
48- In the properties window, on the right panel, search for the
first Hint field. Do not use the Hint field inside the TextView
section.
49Click the ellipsis (...) button
on the very right of the Hint
field.
47
Click Here
ADDING THE TEXTFIELD (CONTINUED)
- Click the New String button
50
Click Here
ADDING THE TEXTFIELD (CONTINUED)
- In the String field enter "Enter a Message".
51
- In the New.R.String. field enter "edit_message".
52
-
Leave the rest of the fields at their defaults.
54
-
Click OK to close the Create New Android String dialog box.
55
Click OK to close the Resource Chooser dialog box.
53
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
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.
57Add 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.
59Click the Save button to save your strings.xml file.
58
ADDING THE BUTTON (CONTINUED)
- Click back to the fragment_main.xml file in the Graphical
Layout section.
60
- In the Palette section, click on the Form Widgets subsection.
61
- 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.
62
Drag This
Over Here
ADDING THE BUTTON (CONTINUED)
- Click on the fragment_main.xml tab that is along the bottom.
- 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.
63
We need to change this
ADDING THE BUTTON (CONTINUED)
- There are two ways to change this text to use a strings.xml
resource.
- 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.
64Change the android:text attribute to a value of
"@string/button_send".
65
- Click Save
66Click back to the Graphical Layout to see the changes.
ADDING THE BUTTON (CONTINUED)
- The Button element in your fragment_main.xml file should
look like this:
- The Graphical Layout should look like this:
RUNNING THE APPLICATION
- Run 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.
67
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.
RESPONDING TO THE SEND BUTTON
- To respond to the clicking of the Send button, click on the
fragment_main.xml file.
Click the fragment_main.xml tab at the bottom of the main
69panel.
70Add the android:onClick attribute to the Button element,
giving it a value of "sendMessage".
68
Add the onClick
attribute
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.
71Click on the MainActivity.java file tab.
Add the following code after the onCreateOptionsMenu
72method.
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"
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.
BUILDING AN INTENT
- 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.
73 Click inside the sendMessage() method, create an Intent to
start an activity called DisplayMessageActivity.
-
- 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.
74
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.
BUILDING AN INTENT
-
Add the code below to the sendMessage() method:
-
Use the shortcut Shift+Ctrl+O or go to Source > Organize
Imports to import the EditText class.
75
76
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
BUILDING AN INTENT (CONTINUED)
- 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.
- 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:
77-
Variable Type
Variable Name
Variable Value
START THE SECOND ACTIVITY
- 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.
78Add 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:
CREATE THE SECOND ACTIVITY
- In order to get the sendMessage() code to work, we need to
create the DisplayMessageActivity class.
- Click New in the toolbar
79
- In the window that appears, open the Android folder and
select Android Activity
80
- Click Next
81
CREATE THE SECOND ACTIVITY (CONTINUED)
- Select BlankActivity
82
- Click Next
83
CREATE THE SECOND ACTIVITY (CONTINUED)
- Fill in the activity details:
Project: MyFirstApp
Activity Name: DisplayMessageActivity
Layout Name: activity_display_message
Title: My Messages
Hierarchical Parent: com.example.myfirstapp.MainActivity
Navigation Type: None
84
- Click Finish
85
CREATE THE SECOND ACTIVITY (CONTINUED)
CREATE THE SECOND ACTIVITY (CONTINUED)
- Click on the newly created DisplayMessageActivity.java file
tab.
- Eclipse has already created the onCreate method for us,
however, it also created some extra code that we do not need
for this project.
87Remove the other methods besides the onCreate method.
- Here is what the DisplayMessageActivity.java file will look like
after removing the code:
86
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.
CREATE THE SECOND ACTIVITY
- Click on the MyFirstApp/AndroidManifest.xml file tab.
88
- Locate the the second <activity> element.
89
The first Activity. This is
the home screen with the
text field and Send
button
The second Activity. This
is what we just created.
RUNNING THE PROGRAM
- Run your application.
- The app should now allow you to enter text, click the send
button, and then display the “My Messages“ screen.
90
First Activity
Second Activity
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.
DISPLAYING THE MESSAGE
- Click on the DisplayMessageActivity.java file tab.
91
- Add the code below:
92
- Make sure to organize your sources by clicking Sources >
Organize Sources or using the shortcut Shift+Ctrl+O.
93
DISPLAYMESSAGEACTIVITY
- Click Save
- Here is the code for the entire DisplayMessageActivity class.
94
RUN YOUR APPLICATION
- Click on the MyFirstApp/AndroidManifest.xml file tab.
95
- Run your Android application.
96
- 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.