Lec005_Android_Start_Program

1. Lec 5 – Creating Your First
Application
Eyad M. AlMassri

2. Using AndroidStudio –basic
Android
• Lets do a “Hello World Project”
• Start up AndroidStudio (assume you
have installed with Android support)

3. Hello World Project – Android Studio
1. App name, package
2. Target
3. Activity type
4. Name of Activity
5. Now finish to setup

4. Hello World Project

5. Hello World Project---basic folders &files
Folders
• Number of folders and files
are auto-
generated when you create a
project
File of note
AndroidManifest.xml – like a
ship’s manifest
it tells us the components of our
app

6. Project basics….
Android Studio
• manifests/AndroidManifest.xml:
an XML file describing the
application being built and
what components – activities,
services, etc. – are being
supplied by that application
• java/: holds the Java source
code for the application

7. res/: contains
layout files
drawable =icons
menus
values = static files like strings.xml
Gradle/: an Ant script for
compiling the application and
installing it on the device
(integrated with IDE—don’t see it
there)
default.properties: a property file
used by the compiler
res/ – contains multiple xml files
and other resources used by
application

8. Project basics….
Android Studio
•Gradle Scripts/: an gradle script
for compiling the application and
installing it on the device
(integrated with IDE—don’t see
it there)
–gradle.properties: a property file
used by the compiler

9. Manifest file – AndroidManifest.xml
• an XML file describing the application being built
and what components – activities, services,
etc. – are being supplied by that application
• Initially created by IDE
• must declare all activities, services, broadcast
receivers and content provider of the application.
• must contain the required permissions for the
application.
– For example if the application requires network access it
must be specified here.

10. Hello World Project – AndroidManifest.xml
Manifest file
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.helloworldandroid"
android:versionCode="1"
android:versionName="1.0">
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".HelloWorldAndroid"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<uses-sdk android:minSdkVersion="4" />
</manifest>
Here have intent created for
This acitivity that is associated with
launch of application
Define Application –see res/strings.xml
–see res/drawable-resolution/icon.png

11. THE LAYOUT
Interface specifications

12. Interface ---2 options
• Do it with XML file(s)
– Many modern frameworks whether for mobile
programming like Android or iOS or for other
platforms have gone to specifying GUI (graphical
user interface) elements in static XML files rather
than programming source code (like java).
– The reason –it allows separation of the look (view)
from how the code works (model and controller).
Have you ever heard of Model View Controller –it
is a famous software engineering framework that
programmers try to achieve in their software
systems.
• Do it with Java code.
– This has similarities if you have created desktop
GUI Java applications

13. OPTION 1: The Layout with
XML
• We are going to discuss a
specific resource in the
res folder
res/layout/activity_main.xml

14. The Layout-the interface
• res/layout/main.xml = contains
layout for interface
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout>
The above will create an interface in vertical (versus portrait) mode that fills
the parent
Both in width and write and wraps and content as necessary.

15. The Layout-the interface
• res/layout/main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
• android:orientation = vertical (versus portrait) mode.
• that fills the parent both in width and write and wraps and
content as necessary.
Landscape
Vertical

16. Hello World Project
Layout file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout>
This adds a “TextView” to the interface and this has the text
referenced by @string/hello in it.
Creating a Layout file—2
options
1) Do it manually –type it in
2) For Layouts corresponding to GUIs
You have a drag and drop option
we will learn about in a later lecture

17. Using IDE to Visually
Create XML file
• Visual creation of XML file
• AndroidStudio: New->
Layout resource file
– Select layout (root)
– &qualifiers as needed
– drag & drop

18. Visually Creating XML interface
• I dragged and dropped an EditText
view and a Button. Below I show you
the corresponding code.
res/layout/main2.xml
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText android:text="@string/hello" android:id="@+id/editText1" android:inputType="textMultiLine"
android:layout_width="169dp" android:layout_height="115dp" android:layout_x="11dp"
android:layout_y="20dp"></EditText>
<Button android:id="@+id/button1" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Button" android:layout_x="27dp"
android:layout_y="146dp"></Button>
</AbsoluteLayout>

19. LETS LOOK AT THE “MAIN”
CLASS
It is an Activity
Activity is a class in the Android sdk (android.app.Activity)
It represents us now the main application itself—we will learn
more about what this means in a near future lecture –remember
we are at the beginning!

20. Create an Activity with simple
text Interface ……first
• An Android user interface is
composed of hierarchies of objects
called Views.
• A View is a drawable object used as
an element in your UI layout, such as
a button, image, or
– In the next code will create a text label.
Each of these objects is a subclass of
the View class and the subclass that
handles text is TextView.

21. Hello World Project – here we are creating
interface with programatically/code
create a TextView with the class constructor,
which accepts an Android Context instance as
its parameter.
•Context is a handle to the system
•provides services like resolving resources,
•obtaining access to databases and preferences, etc.
The Activity class inherits from Context, and because
your HelloAndroid class is a subclass of Activity, it is
also a Context. So, you can pass this as your Context
reference to the TextView.
text content is set with setText(CharSequence)
pass the TextView to setContentView() in order to display
it as the content for the Activity UI.

22. Hello World Project – here we are creating
interface with programatically/code
Helloworld.java
package com.teach.helloworld;
import android.app.Activity;
import android.os.Bundle;
public class helloworld extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TextView tv = new TextView(this);
tv.setText("Hello, Android.....Lynne");
setContentView(tv);
}
}

23. What we just learned
• You will have a class created for you
that is your android application, i.e. “
helloworld” and it extends Activity
• Your application is an Activity and
that also descends from Content
• Context = class that gives us access
to System
• provides services like resolving resources,
• obtaining access to databases and
preferences, etc
• .constructor needs Context instance (we

24. What we just learned
• View = is a GUI element, there are
different kinds like the TextView we
are using

25. Alter your Activity to Use an
XML layout file
• package com.example.helloandroid;
import android.app.Activity;
import android.os.Bundle;
public class HelloAndroid extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
Now going to change the
code so it uses instead an
XML file for its intervace
This line of code says
use the xml layout file called
main.xml that is pointed to
inside your R.java file in memory

26. Interfaces ---XML-based layout
• Previous HelloWorld example has
interface created in java code.
• ALTERNATIVE: XML-based layout
files. Example that duplicates previous.
• <?xml version="1.0" encoding="utf-8"?>
<LinearLayout……….>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="@string/hello"/>
Above located in res/layout/main.xml
Here is our main.xml file
that will be used and do
the same thing as our
previous java code –show
a TextView

27. XML interface
• <TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="hello"/>
– xmlns:android XML namespace declaration that tells
the Android tools that you are going to refer to common
attributes defined in the Android namespace. The
outermost tag in every Android layout file must have this
attribute.
– android:layout_width This attribute defines how much of
the available width on the screen this View should
consume. As it's the only View so you want it to take up
the entire screen, which is what a value of "fill_parent"
Lets understand the XML
Tag used to describe our
TextView

28. XML interface
• android:layout_height This is just like
android:layout_width, except that it
refers to available screen height.
• android:text This sets the text that
the TextView should display. In this
example, you use a string resource
instead of a hard-coded string value.
The hello string is defined in the
res/values/strings.xml file.

29. MORE ON RESOURCES
The res directory

30. We mentioned res folder
Android Studio

31. res/ directory
• res/layout/ : contains one or more
xml files that define interfaces
• res/values/strings.xml : file where
you specify strings (constants) that
you can use in your program

32. • res/drawable-* : gives file use for
different resolutions like icon.jpg.
*=hdpi (high), mdpi(medium), ldpi
(low). Depends on device what
mode it can/may be running in.
• res/menu/ : contains one or more
xml files for menus
res/ directory

33. EVENT HANDLING
So we have an interface what can we do with it.
Event Handling = code that responds when “events”
happen. For GUI elements we usually have events
associated with them. For example, a button has the event
of hitting the button.
res/ directory

34. Widget : Views that have events
• For a list of the widgets provided by
Android, see the android.widget
package.
• Some Examples
– Button
– CheckBox
– DatePicker
– EditText
– ImageView
– SearchView
There are more ---here are a
few.

35. Event Handling
• Decide what Widgets who’s events to
process
3 steps:
1)Decide what events to respond to
2)Create a listener to respond to each
event
3)Register the listener to the
corresponding widget

36. • Define an event listener and
register it with the View.
– View.OnClickListener (for handling
"clicks" on a View),
View.OnTouchListener (for handling
touch screen events in a View), and
View.OnKeyListener (for handling
device key presses within a View)
• http://developer.android.com/guid
e/topics/ui/ui-events.html details
more
Event Handling

37. Lets add a Button to a program-
based interface
• Step 1: Add button
• Step 2: Register Event Handler
• TWO OPTIONS – separate class to
handle event(s), OR have the Activity
containing the button do the event
handling
• Step 3: Implement Event
Handler…for a Button means
implementing the
View.OnClickListener interface

38. Event handling done by Activity
itself –one option
• Here code to handle is inside Activity
itself
• public class ExampleActivity extends Activity implements OnClickListener {
protected void onCreate(Bundle savedValues) {
...
Button button = (Button)findViewById(R.id.corky);
button.setOnClickListener(this);
}
// Implement the OnClickListener callback
public void onClick(View v) {
// do something when the button is clicked
}
...
}
This option is okay only if the
event handling code is simple
and you will not reuse it ever
---if the code is longer or will
reuse make a separate class

39. Event Handling - here have a
SEPARATE class
EVENT HANDLING CODE in separate object mCorkyListner
// Create an anonymous implementation of OnClickListener
private OnClickListener mCorkyListener = new OnClickListener() {
public void onClick(View v) {
// do something when the button is clicked
}
};
//Now inside your Activity class
protected void onCreate(Bundle savedValues) {
...
// STEP 1: Capture our button from layout
Button button = (Button)findViewById(R.id.corky);
// STEP 2: Register the onClick listener with the implementation above
button.setOnClickListener(mCorkyListener);
...
}
Better for readability and
reuse

40. RUN YOUR CODE

41. Running Your Android
Application in the Emulator
• Now you can run the
MyFirstAndroidApp project using
the following steps found on the next
few slides.

42. Running Your Android
Application in the Emulator
(Cont’d)1. With the Run/Debug Configuration named app
already selected, click the Run icon ( ) on the
toolbar.
– Here is the app configuration selected:

43. Running Your Android
Application in the Emulator
(Cont’d)
2. You are now prompted to Choose a running
device.
– The default emulator you launched for the
previous example should be listed as a
running device.
– If it is not already running, select Launch
emulator and choose the appropriate AVD
if it is not already selected.
– Then click OK.

44. Running Your Android
Application in the Emulator
(Cont’d)

45. Running Your Android
Application in the Emulator
(Cont’d)
3. If not already started, the Android
emulator starts up, which might take a
moment.
4. Unlock the emulator if it is locked.
5. The application starts, as shown in
the figure on the next slide.

46. Running Your Android
Application in the Emulator
(Cont’d)

47. Running Your Android
Application in the Emulator
(Cont’d)
6. Click the Back button in the emulator to end
the application, or click Home to suspend it.
7. Click the All Apps button found in the
Favorites tray to browse all installed
applications from the All Apps screen.

48. Running Your Android
Application in the Emulator
(Cont’d)
8. Your screen should now present all the
applications installed on the device.
– Click the My First Android App icon
to launch the application again.

49. Running Your Android
Application in the Emulator
(Cont’d)

50. Running code
• TIP: Emulator can take a long time to load at
first----be patient and keep it up---just re-run
after changes and won’t have to relaunch
emulator, will just load up new app.
• Look if you have Intell Virtualization speed
up, check out GPU and snapshot options –
search online for current info on these tips