Android NativeApp 10th Sep15 P91 Edited

|7/8-R, 8/8-S MAP
Tuesday, August 11-13, 2015| 7 March 2016, 10:01:54 AM |
ANDROID APPLICATION
APPROACH
Android follows code-behind approach
(a) Application Layout (UI Design)
-->
.xml
-->
.java code
Ex. (test.xml)
(b) Logic File
Ex. (JTest.java)
Android Application
= Markup + Code
XML (Extensible Markup Language)

It is a not a programming language
It is a markup language which is used to design UI of the android
application (define activity)
All the information in xml follows tree order or hierarchical order
XML is used to define the app's user interface (define screen layout
& GUI controls)
JAVA
To provide the application logic
To implement the activities of application
NATIVE APP DETAILS
Technology
Android Native app
System Packages
import android.widgets.*;
Super Class
Activity or ActionBarActivity
1
|7/8-R, 8/8-S MAP
HYBRID WEB APP DETAILS

Technology
Android Hybrid Web app
System Packages
import android. webkit.*;
Super Class
Activity or ActionBarActivity
ANDROID COMPILATION & EXECUTION PROCESS

Application Source codes (.java)
java compiler (javac)
Java Byte Code (.class)
Dex compiler (dx)
Byte Code
Conversion
Dalvik Byte Code (.dex)
Packing Tool (AAPT)
Target Output (.apk)
|7/8-R, 8/8-S MAP
(i) Java Compiler (javac)

Javac is used to convert java source file (.java) into byte code
(.class)
Input
: Source Code (.java)
Output
: Java Byte Code (.class)
(ii) Dex compiler (dx tool)

dx tool is a platform specific tool
dx tool is used to convert all .class files (Java Byte Code) into single
.dex file (Dalvik Byte Code)
dex stands for "Dalvik Executable"
Input
: Java Byte Code (.class)
Output
: Dalvik Byte Code (.dex)
(iii) AAPT (apkbuilder)

It handles the packing process
It is a tool that will generate a ".apk file" from a "dex file + non-java
libraries + zipped resources" (this tool packages all non-compiled
resources(e.g. images), compiled resources & dex file into .apk file)
APK = dex file + zipped resources + any native libraries (non-java)
APK File Contents
resources.arsc
classes.dex (dex files)
AndroidManifest.xml
res
META-INF
3
|7/8-R, 8/8-S MAP
DIFFERENCE BETWEEN DVM & JVM

S.N DALVIK VM (DVM)
JAVA VM (JVM)
1.
It is a register machine
It is a stack machine
2.
It produces Dalvik executable code

(.dex)
It produces Java Bytecode

(.class)
3.
Owned & maintained by Google
Maintained by Oracle
FOUR IMPORTANT ELEMENTS IN GUI

1. Activity
2. UI Containers
3. UI Controls
4.Event
1. Activity
Basic building blocks for developing both native & web applications
Every GUI application starts with an Activity.
We can programmatically and manually create a activity, we can
inherit a activity from the Activity super class
Package:
android.app.*;
2. Containers (Layouts)
A container for holding all controls
A container can contain another containers
Required package:
android.widgets.*;
E.g. LinearLayout, RelativeLayout, FrameLayout, etc, ...

3. UI Widgets or UI Controls
UI element in Android applications
Each UI element in android can generate events
4
|7/8-R, 8/8-S MAP
Used to create different GUI applications in android

Required package: android.widgets.*;
E.g. TextView, Button, EditText, Spinner, etc,...
4. Event
Certain action in USER INTERFACE TECHNOLOGY
Each UI element can make an event in android application
Objects(components) can register themselves to register events of
interest
When an event happens, an appropriate method is called in all
listeners
A listener object must implement the interface corresponding to the
events, which means implementing all methods declared in the
interface
To handle Events, we write objects and methods which will be
invoked whenever a certain event happens.
E.g. Click event, Menu Event, Window event, etc.
5. Event Handling
A method which is responsible for handling an event is called
"Event Handling"
|7/8-R, 8/8-S MAP
EVENT HANDLING IN JAVA

AIM
Write code to handle events that occur in a GUI
Create the appropriate interface and event handler methods for a
variety of event types
Register Event Listener
Event Source
Event
Event Listener
Fire
event
Event Handler
Fig: Event Handling in Java
In Java, the event handling concept is based on publisher-subscriber

pattern (ooad pattern)
Here publisher is called server class & subscriber is called client
class
Events and Event Source are the components of Server class
Event Listener and Event Handler are the components of client class
|7/8-R, 8/8-S MAP
(i) Events
Objects that describe what happened
Ex. Click, TextChanged, ValueChanged, etc
(ii) Event sources
It is a component of server class
The generator of an event
Ex. Button, TextView, ImageButton, etc,
(iii) Event Listener
It is a component of client class
Used to receive & handle the event
Used to give the solution to event via Event Handler
(iv) Event Handler
It is a component of client class
A special method which gives the solution, when an event happens
Ex. Button Click Event
public void test(View v)
{
// user code
}
XML Event Handler (automated event handler)
(OR)
public void onClick(View v)
{
// user code
}
Java Event Handler (manual event handler)
7
|7/8-R, 8/8-S MAP
7. TYPES OF EVENT
There are many types of events that are generated by android
Application.
These events are used to make the application more effective and
efficient.
IMPORTANT EVENT LISTENERS & EVENT HANDLERS
S.N EVENT HANDLER
EVENT LISTENER & DESCRIPTION
1. onClick()
This is called when the user either clicks or
touches or focuses upon any widget like
button, text, image etc.
2. onLongClick()
This is called when the user either clicks or
touches or focuses upon any widget like
button, text, image etc. for one or more
seconds.
3. onFocusChange()
This is called when the widget loses its
focus i.e. user goes away from the view
item.
4. onKey()
This is called when the user is focused on
the item and presses or releases a hardware
key on the device.
5. onTouch()
This is called when the user presses the
key, releases the key, or any movement
gesture on the screen.
6. onMenuItemClick()
This is called when the user selects a menu
item.
7. onCreateContextMenu() This is called when the context menu is
being built(as the result of a sustained "long
click)
|7/8-R, 8/8-S MAP
IMPORTANT METHODS
(i) setText(CharSequence ch)
sets the text to UI elements like Button, TextView, etc
It takes only one argument
Return type: void
(ii) getText()
gets the text of UI elements like Button, TextView, etc
It does not take any arguments
Return type: CharSequence
I. UI WIDGETS
ANDROID UI WIDGETS
1. View
Create a view class
It is a base class for all UI widgets like Button, TextView, etc
Required package: android.widgets.*;
|7/8-R, 8/8-S MAP
Screenshot
2. Button
It represents the push button
A push button that can be pressed or clicked by the user to perform
an action
Buttons allow user tom perform some action
It is very similar to JButton in swing
Types of Buttons:
Button (Button)
Image Button (ImageButton)
Toggle Button (ToggleButton)
Radio Button (RadioButton)
Important Methods
Sets the string value (text) of the button
10
|7/8-R, 8/8-S MAP
It takes 1 argument
Return type : void
(ii) getText()
Gets the text of the button
Return type : CharSequence
Screenshot
3. TextView
It is used to set or get the messages (static message / dynamic
message)
It is very similar to JLabel in swing
Important Methods
Sets the string value (text) of the textview
It takes 1 argument
Return type : void
11
|7/8-R, 8/8-S MAP
(ii) getText()
Gets the text of the textview
Screenshot
4. ImageButton
It is a special type of button
It is used for displaying images in android
Android supports 3 common image formats like PNG, JPG, GIF
along with 9 batch PNG Images
Images are stored in the directory "res/layout/drawable"
It is important to note that, all image filenames should be lowercase
and only contain letters, numbers & underscores
12
|7/8-R, 8/8-S MAP
Important Methods of ImageButton

(i) setImageResource(int resId)
Sets the image to ImageButton
It takes 1 argument
Return type : void
Image Id /drawable folder
(ii) setBackgroundColor(int color)

Set the background color to image
It takes 1 argument
Return type: void
Screenshot
Background
Color
Image of Image
Button
13
|7/8-R, 8/8-S MAP
5. ImageView
Like ImageButton, It is the base element used for displaying
images in android
It is an alternative to ImageButton
Important Methods of ImageView
(i) setImageResource(int resId)
Sets the image to ImageButton
It takes 1 argument
Return type : void
Image Id /drawable folder
(ii) setBackgroundColor(int color)

Set the background color to image
It takes 1 argument
Return type: void
Screenshot
14
|7/8-R, 8/8-S MAP
6. EditText
It is the pre-defined subclass of TextView that includes rich editing
capabilities
It is used to create both single line textbox and multi-line textbox in

android
It allows the user to submit the runtime inputs
It is very similar to JTextField & JTextArea in java swing
Important Methods
Sets the string value (text) of the edittext
It takes 1 argument
Return type : void
(ii) getText()
Gets the text of the editext
Return type : Editable
15
|7/8-R, 8/8-S MAP
Screenshot
7. CheckBox
It is used to select more than one option at a time
It present options to a user, usually in a multiple choice format.
CheckBox can be selected or deselected
Any number of check boxes in the group (none or some or all) can be
selected
It is similar to JCheckBox in swing
Important Methods
Sets the string value (text) of the checkbox
It takes 1 argument
Return type : void
(ii) getText()
Gets the text of the checkbox
16
|7/8-R, 8/8-S MAP

(iii) setChecked(boolean checked)
Used to mark checkbox as checked or unchecked (changes
the checked state of this button)
Return type: void
(iv) isChecked()
It is used to find, whether checkbox is selected or not
It doesn't take any arguments
Return type: boolean
Screenshot
17
|7/8-R, 8/8-S MAP
8. RadioButton
It is used to select only one option at a time
It present options to a user, usually in a multiple choice format.
It is similar to JRadioButton in java swing
Important Methods
Sets the string value (text) of the radio button
It takes 1 argument
Return type : void
(ii) getText()
Gets the text of the radio button
Used to mark radio button as checked or unchecked
Return type: void
(iv) isChecked()
It is used to find, whether checkbox is selected or not
It doesn't take any arguments
18
|7/8-R, 8/8-S MAP
Screenshot
9. ToggleButton
It is a special type of button
It is used to display checked / unchecked (on/off) state on the
button (It is basically an on/off button with a light indicator)
Toggle button is very useful if you want to switch between two states.
A toggle button takes only two states ACTIVATED state &
DEACTIVATED state [or] ON state and OFF state.
The default value for on state is "ON" and for off state is "OFF".
This is the best alternative for radio buttons.
Important Methods
Sets the string value (text) of the toggle button
It takes 1 argument
19
|7/8-R, 8/8-S MAP
Return type : void

(ii) getText()
Gets the current state (on state or off state) of toggle button
Used to mark toggle button as checked or unchecked
Return type: void
(iv) isChecked()
It is used to find, whether toggle button is selected or not
Screenshot
Event Listener
: setOnCheckedChangeListener()
Event Handler
: void onToggleClicked(View view) { ... }

20
|7/8-R, 8/8-S MAP
10. RatingBar
It is used to get the rating from the user. (used to show rating in stars)
The rating bar shows number of stars in which the user can touch,
drag to set the value
The rating returns a floating-point number (e.g. 2.0, 3.0, 4.0, etc, ...)
It is an extension of SeekBar & ProgressBar
Android gives direct way to create the rating bars using <RatingBar> in
the xml
Important Methods
(i) setRating(int float)
Sets the rating (the number of stars filled)
It takes 1 argument
Used to set the default value of the rating.
Ex. If we set the rating at 2.0f which means 2 stars will be
selected by default
Return type : void
(ii) getRating()
gets the current rating (used to get the value of the rating bar)
Return Type: float
21
|7/8-R, 8/8-S MAP
ScreenShot
Event Listener
: OnRatingBarChangeListener
Event Handler
: void onRatingChanged(RatingBar rb, float rating,

boolean user)
11. SeekBar
It is an extension of ProgressBar element
It is a kind of ProgressBar with draggable thumb.
It allows the selection of integer values using a natural user interface
It has a thumb that can be slided in order to choose a value between 0
& some maximum that can be set from the developer
The maximum value can be set either in the XML or programmatically.
Usage of SeekBar
It is used to adjust media player volume, set brightness of the screen,
seek a playing music etc.
22
|7/8-R, 8/8-S MAP
Important Methods
(i) setProgress(int value)
sets the progress value (int value) of seekbar (sets the initial
value of seekbar)
It takes 1 argument
Return type : void
(ii) getProgress()
gets the current progress of seek bar (gets the current value of
seekbar)
Return type: int
Screenshot
Event Listener
: OnSeekBarChangeListener
Event Handler
1. onProgressChanged() : This is called when the progress level changes

2. onStartTrackingTouch() : This is called when the dragging starts
3. onStopTrackingTouch() : This is called when the dragging stops
23
|7/8-R, 8/8-S MAP
12. Spinner
It is like the dropdown menu with multiple values from which the user
can select only one
It is used to select only one value (either none or one item) from the list
of options (set)
It is similar to JComboBox in swing
Important Methods of Spinner
(i) getSelectedItme()
Gets the selected item from JComboBox
Return Type : Object
(ii) getItemAtPosition(int pos)
Gets the index position of the currently selected item in the
spinner
Return Type : Object
(iii) setAdapter(SpinnerAdapter sp)
Sets the adapter object to spinner
Return type: void
Event Listener
: OnItemSelectedListener\
Event Handler
:
public void onItemSelected(AdapterView<?> parent, View v, int
position,
long id) {
// user code
sp.setText(items[position]);
}
Spinner Object
public void onNothingSelected(AdapterView<?> parent) {
sp.setText("");
24
|7/8-R, 8/8-S MAP
}
Screenshot
13. TimePicker
It is used to select time. It allows user to select time by hour and
minute.
We cannot select time by seconds.
25
|7/8-R, 8/8-S MAP
Screenshot
14. WebView
It is an extension of the view class that helps displays web content
If we want to deliver a web application (web apps) as a part of client
application, we can do it using webview Layout
It is used to display the web page inside the activity
It does not include any features of a fully developed web browser, such
as navigation controls or an address bar.
It doesn't support all features of a regular browser but we can enable
Javascript inside our Web View and also override the Back button to
view if there are any history pages.
26
|7/8-R, 8/8-S MAP
IMPORTANT METHODS
1. loadUrl(String url)
It is used to load a web page using an URL
Return Type: void
Ex.
wb.loadUrl("www.google.com");
2. loadData(String htmlData, String mime, String Encoding)
It is used to load data from an HTML string
It takes 3 arguments
Return Type: void
Ex.
String html= "<html><body>A very basic <b>WebView</b>
demo!</body></html>";
wb.loadData(html, "text/html", null);
Screenshot
27
|7/8-R, 8/8-S MAP
II. UI LAYOUTS
LAYOUTS or CONTAINERS
Layout denotes the architecture of the application, where and how
the controls should be organized in the UI
It is classes that can have other components on it
So for creating a GUI, we need at least one container object
To design UI for an App, we need to know about Android Layout. It is
also known as ViewGroup.
1. Activity
Main screen in GUI
It is a top level layout with its own title, icon, settings menu (Action Bar)
It holds other UI Layouts & UI Widgets
2. LinearLayout
It is the simplest layout
It is a view group that arranges all children in a single direction
vertically or horizontally (All the UI elements are displayed in a linear /
sequential fashion, either horizontally or vertically with help of
"android:orientation" attribute)
28
|7/8-R, 8/8-S MAP
Screenshot
3. RelativeLayout
It is the flexible layout for all
It is a view group, that displays child views in relative positions (All
the UI elements are arranged in relative to each other)
For ex, we can set a UI element to be positioned "above" or "below" or
"to the left of" or "to the right of" another control, referred to by its
unique identifier
29
|7/8-R, 8/8-S MAP
Screenshot
4. FrameLayout
It is designed to display a stack of child view controls (UI widgets)
It allows the UI elements to be overlapped with each other
Multiple view controls (UI elements) can be added to this layout (This
can be used to show multiple controls within the same screen space)
Screenshot
30
|7/8-R, 8/8-S MAP
5. TableLayout
A table layout is a grid which contains rows & columns
It arranges its children in tabular view-Rows & Columns (All the
controls are arranged into rows & columns)
It is same as HTML table
<TableLayout> is the parent and <TableRow> is its child. This is
similar to HTML <table> and <tr>
<TableRow> can contain any UI elements like Button, TextView,
EditText, etc
Screenshot
31
|7/8-R, 8/8-S MAP
6. ScrollView
It is a special type of FrameLayout that allows users to scroll through a
list of views that occupy more space than the physical display
Conditions
The ScrollView can contain only one child view or ViewGroup, which
normally is a LinearLayout.
Screenshot
32
|7/8-R, 8/8-S MAP
7. AbsoluteLayout
It is used for placing UI elements at the exact location on the screen
using x and y co-ordinates
As shown below in the XML, for both EditText & Button 'x' & 'y'
coordinates have been specified via "android:layout_x" and
"android:layout_y"
Ex
<AbsoluteLayout android:id="@+id/abs"
android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<EditText android:id="@+id/EditText01" android:layout_width="200px"
android:layout_height="wrap_content" android:layout_x="12px"
android:layout_y="12px" />
<Button android:text="Search" android:id="@+id/Button01"
android:layout_width="100px" android:layout_height="wrap_content"
android:layout_x="220px" android:layout_y="12px" />
</AbsoluteLayout>
33
|7/8-R, 8/8-S MAP
Screenshot
8. GridLayout
It is a ViewGroup that displays items in a two-dimensional, scrollable
grid
It is an android layout that places its children in a rectangular grid
Screenshot
34
|7/8-R, 8/8-S MAP
XML (UI Layer)

It is a markup language (not a programming language)
In android, XML files are used to define layout of Android apps and
store data
IMPORTANT XML ATTRIBUTES
S.N XML ATTRIBUTES
1.
MEANING
android:id
Resource ID
Syntax:
android:id=@+id/name
id is used to identify the control in

the java code
Ex.
Sets the identifier to UI views &

viewgroups (Ex. TextView, Button,
LinearLayout, etc, )
android:id=@+id/tb
@ global variable
+ The plus symbol
indicates This is a new
resource name that must be
created & added to our
R.class file
2.
android:layout_height
Ex.
android:layout_height=
fill_parent
(OR)
match_parent
Sets the layout height to UI

element
The height and width value can be
expressed using any of
the dimension units supported by
Android (px, dp, sp, pt, in, mm) or
with the following keywords:
fill_parent, match_parent,
wrap_content
match_parent: sets the dimension
35
|7/8-R, 8/8-S MAP
(OR)
wrap_content
(OR)
100dp sets the custom
height using dp value
3.
android:layout_width
to match that of the parent

element. Added in API level 8 to
deprecate fill_parent
fill_parent: Sets the dimension to
match that of the parent element
wrap_content: Sets the dimension
only to the size required to fit the
content of this element
dp value: we can set the custom
height & width using dp value
Sets the layout width to UI element
Ex.
=fill_parent
=match_parent
=wrap_content
=55dp
4.
android:text
Sets the text to UI elements
Ex.
Sets the direct text using

assignment operator
36
|7/8-R, 8/8-S MAP
android:text=Hello World
(OR)
Sets the indirect text using

<string.xml> file
android:text=@string/lb
<string name=lb>Hello
World</string>
5.
android:textStyle
Ex.
Sets the styles for text to UI elements

(Ex. TextView, EditText, Button, etc)
android:textSyle=bold
android:textSyle=normal
android:textSyle=italic
6.
android:textSize
Ex.
Sets the text size to UI elements (Ex.

TextView, EditText, Button, etc)
android:textSyle=18sp
7.
android:textColor
Ex.
Sets the foreground color to UI

elements (Ex. TextView, EditText,
Button, etc)
android: textColor =#ffffff
8.
android:background
Ex.
Sets the background color to UI widgets

& Layouts (Ex. LinearLayout, TextView,
EditText, Button, etc)
android: background=12ffff
37
|7/8-R, 8/8-S MAP
9.
android:src
Syntax:
android:src=@drawable/
imageName
Sets the image or background

image to ImageView or
ImageButton
Supported formats: .png, .jpg, .gif
Ex.
android:src=@drawable/mit
mit.png
10
android:onClick
Ex.
Assign direct event handler to UI

elements like Button, ImageButton
(Automatic event handler)
android:onClick=test
// Event Handler
{
// code
}
NOTE
Difference b/w android:id=@+id/name & android:id=@id/name
android:id=@+id/tb means we are adding a new UI widget (view)
with the name tb in our R.class file
android:id=@id/tb means we are using or referring an already
defined UI widget (view) with the name tb in our R.class file
38
|7/8-R, 8/8-S MAP
TERMINOLOGIES IN ANDROID
Screen Size
Screen size in android is grouped into categories small, medium, large,
extra-large, double-extra & triple-extra
Screen Density
Screen density is the amount of pixels within an area (like inch) of the
screen.
Generally it is measured in dots-per-inch (dpi).
Screen density is grouped as low, medium, high and extra high.
Resolution
Resolution is the total number of pixels in the screen
dp
Density Independent Pixel, it varies based on screen density
In 160 dpi screen, 1dp=1pixel
Except for font size, use dp always
dip
dip=dp. In earlier android versions dip was used & later changed
to dp
sp
Scale Independent Pixel, scale based on users font size
preference.
Fonts should use sp
px
Pixels-corresponds to actual pixels on the screen
39
|7/8-R, 8/8-S MAP
in
Inches-based on the physical size of the screen
1 inch=2.54 centimeters
mm
Millimeters-based on the physical size of the screen
pt
Points-1/72 of an inch, based on the physical size of the screen
NOTE
Always use dp & sp only. sp for font size & dp for everything else (e.g.
Height, Width, etc, )
It will make UI compatible for android devices with different
densities
ACCESSING XML RESOURCES IN JAVA

All resources in XML can be accessed via findViewById() method in
java code
Ex.
<UI-Widget> objectname=< UI-Widget >findViewById(R.id.viewId);
Where,
<UI-Widget> can be Button, TextView, EditText, etc
Ex.
Button bt=(Button)findViewById(R.id.bb);
40
|7/8-R, 8/8-S MAP
I. EXAMPLE OF TEXTVIEW DEMO

(Displaying Message using XML & Java)
Approach
: Code-Behind
UI Design
: XML
Logic
: Java
1. XML CODE
(test.xml)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
tools:context=".JTest" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/tb"
android:textColor="#2ad2c9"
android:textSize="22sp"
android:textStyle="bold"
/>
</LinearLayout>
41
|7/8-R, 8/8-S MAP
2. JAVA CODE
package com.example.textviewdemo;
import android.os.Bundle;
import android.app.Activity;
import android.widget.*;
// sub class should inherit the super class Activity
public class JTest extends Activity {
TextView tv;
// called when activity is 1st created
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// set the specific layout file for current screen
setContentView(R.layout.test);
// find XML resource
tv=(TextView)findViewById(R.id.tb);
// display message
tv.setText("Welcome to Android Programming...");
}
}
42
|7/8-R, 8/8-S MAP
3. START AVD MANAGER
43
|7/8-R, 8/8-S MAP
4. LIST OF EXISTING AVD DEVICES DETAILS
44
|7/8-R, 8/8-S MAP
5. AVD CREATION
45
|7/8-R, 8/8-S MAP
6. OUTPUT
46
|7/8-R, 8/8-S MAP
EXAMPLE OF MATERIAL DESIGN APP CREATION IN ANDROID

STUDIO
I. EXAMPLE OF TEXTVIEW DEMO USING ANDROID STUDIO
(Displaying Message using XML & Java)
Approach
: Code-Behind
UI Design
: XML
Logic
: Java
47
|7/8-R, 8/8-S MAP
Step 1: Project Creation in Android Studio
48
|7/8-R, 8/8-S MAP
Step 2: SELECTION OF TARGET DEVICES
49
|7/8-R, 8/8-S MAP
Step 3: ACTIVITY SELECTION IN ANDROID STUDIO
50
|7/8-R, 8/8-S MAP
Step 4: HOME ACTIVITY DETAILS
51
|7/8-R, 8/8-S MAP
1. XML CODE
(test.xml)
res/layout/test.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#ffffff">
<TextView
android:text="Hello World!"
android:layout_marginTop="60dp"
android:textColor="#1277e1"
android:gravity="center"
/>
</LinearLayout>
2. JAVA CODE
(JTest.java)
package ganesh.pugazh.helloworld;
import android.support.v7.app.AppCompatActivity;
// current class must extend the super class AppCompactActivity
public class JTest extends AppCompatActivity {
// called when activity is 1st created
@Override
52
|7/8-R, 8/8-S MAP
// set the specific layout file for current screen

}
}
3. START AVD MANAGER IN ANDROID STUDIO
53
|7/8-R, 8/8-S MAP
4. LIST OF EXISTING AVD DEVICES DETAILS
54
|7/8-R, 8/8-S MAP
5. AVD CREATION IN ANDROID STUDIO

5.1 HARDWARE SELECTION
55
|7/8-R, 8/8-S MAP
5.2 VALID INSTALLED SYSTEM API IMAGE SELECTION
56
|7/8-R, 8/8-S MAP
5.3 AVD DETAILS
57
|7/8-R, 8/8-S MAP
5.4 AVD VERIFICATION & START AVD
58
|7/8-R, 8/8-S MAP
5.5 START VIRTUAL MOBILE DEVICE (AVD)
59
|7/8-R, 8/8-S MAP
6. OUTPUT
NOTE:
For classic native application, the current class must extend
Activity super class
For material design native application, the current class must
extend AppCompactActivity super class.
60
|7/8-R, 8/8-S MAP
II. EXAMPLE OF TEXTVIEW DEMO

(Displaying Message w/o using XML)
AIM
Aim of this source code (.java) is used to display message without
using XML
Approach
: Inline-Coding
UI Design
: Java
Logic
1. JAVA CODE
: Java
(JTest.java)
import android.graphics.Color;
@Override
// Create TextView Object
TextView tv=new TextView(this);
// set the Text Size
tv.setTextSize(20.0f);
// display message
tv.setText("Good Morning :-)");
// set the TextView to Current Screen via setContentView
setContentView(tv);
61
|7/8-R, 8/8-S MAP
}
}
2. OUTPUT
62
|7/8-R, 8/8-S MAP
III. CHANGING THE BG COLOR & FG COLOR OF TEXTVIEW

(Displaying Message w/o using XML)
AIM
Aim of this code (.java) is used to change the background color &
fore color of TextView and display the message without using XML
Approach
: Inline-Coding
UI Design
: Java
Logic
1. JAVA CODE
: Java
(JTest.java)
import android.graphics.Color;
import android.view.*;
// Create TextView Object
TextView tv=new TextView(this);
//
Set the background color
tv.setBackgroundColor(Color.parseColor("#331e54"));
// set the foreground color
tv.setTextColor(Color.parseColor("#f7f7f7"));
// set the Text Size
tv.setTextSize(20.0f);
// display message
tv.setText("Good Morning :-)");
// set the TextView to Current Screen via setContentView
63
|7/8-R, 8/8-S MAP
setContentView(tv);
}
}
USED METHODS
1. setText(CharSequence msg)
Set the message to TextView

Here the message can be static message or dynamic message
This method takes only one argument
Return type: void
2. OUTPUT
64
|7/8-R, 8/8-S MAP
IV. EXAMPLE OF BUTTON DEMO

(AUTOMATED EVENT HANDLER USING XML CODE)
Event
: Click
Event Handler
: test() onClick()
ANDROID EVENT HANDLER

In android, we can create two types of event handlers. They are:
1. XML Event Handler
This is automated approach
Here we can easily register the event handler by setting
android:onClick=test attribute in layout xml file
Ex.
{
// user code
}
2. Java Event Handler

This is manual approach
Here user is responsible for registering event, assigning event
& creating event handler using java code
65
|7/8-R, 8/8-S MAP
Ex.
Button bt;
public void onCreate(Bundle b)
{
bt=(Button)findViewById(R.id.button);
// register & assign events
bt.setOnClickListener(this);
}
Event Generator
// Event Handler
{
// user code
}
Event Listener
Event Location
Event Handler
66
|7/8-R, 8/8-S MAP
1. INITIAL DESIGN
2. LAYOUT XML CODE

(buttonexample.xml)
android:orientation="vertical"
tools:context=".JButtonExample" >
<Button
android:id="@+id/bt"
android:layout_height="55dp"
67
|7/8-R, 8/8-S MAP
android:text="@string/l1"
android:background="#0099e5"
android:textColor="#f7f7f7"
android:onClick="test"
/>
(Automatic event handler)
<TextView
android:id="@+id/tv"
/>
</LinearLayout>
(string.xml)
<resources>
<string name="app_name">ButtonDemo</string>
<string name="action_settings">Settings</string>
<string name="hello_world">Hello world!</string>
<string name="l1">Click Me</string>
</resources>
3. ACTIVITY JAVA CODE
package krish.pugazh.button1demo;
// supports Bundle class
// supports Activity class (super class)
// supports View & Menu classes
// supports UI elements like Button,
public class JButtonExample extends Activity {
// TextView Element Declaration
TextView tb;
68
|7/8-R, 8/8-S MAP
// This method is called only ONCE, when activity is 1st created

@Override
// set the specific layout file to current screen via setContentView()
setContentView(R.layout.buttonexample);
// find XML resources & map it to java widget
tb=(TextView)findViewById(R.id.tv);
}
// Button Code (Automated Event Handler)
// XML Event handler
{
// Display the message
tb.setText("Good Morning");
// Append the text message (add the text to end of the TextView) & display it
tb.append("Have a good day :-)");
}
}
USED METHODS
1. setText(CharSequence msg)
Set the message to TextView

Here the message can be static message or dynamic message
Return type: void
2. append(CharSequence msg)
Add the text messages at the end of the TextView
Return type: void
69
|7/8-R, 8/8-S MAP
4. OUTPUT
V. EXAMPLE OF BUTTON DEMO

(MANUAL EVENT HANDLER USING JAVA CODE)
AIM
Aim of this application is used to register & assign the event
handler to Button programmatically (manual) in java
Here user (client) is responsible for registering an event &
responding that event (event handler)
Event location can be current class (via this keyword) or named
inner class or anonymous inner class.
70
|7/8-R, 8/8-S MAP
1. UI LAYOUT CODE (.xml)

(buttonexample.xml)
tools:context=".JButtonExample" >
<Button
android:text="@string/l1"
android:background="#0099e5"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
/>
<TextView
android:id="@+id/tv"
/>
</LinearLayout>
(string.xml)
<resources>
<string name="app_name">ButtonDemo</string>
<string name="hello_world">Hello world!</string>
<string name="l1">Click Me</string>
</resources>
71
|7/8-R, 8/8-S MAP
2. ACTIVITY CODE (.java)

(JButton2.java)
package krish.pugazh.button1demo;
// Sub class must extend Activity super class & implement OnClickListener
public class JButton2 extends Activity implements View.OnClickListener{
// TextView & Button Elements Declaration
TextView tb;
Button but;
// This method is called only when activity is 1st created
@Override
protected void onCreate(Bundle savedInstanceState)
{
// set the specific layout file to current screen via setContentView()
setContentView(R.layout.buttonexample);
// find XML resources & map them to java widget
tb=(TextView)findViewById(R.id.tv);
but=(Button)findViewById(R.id.bt);
// registering event handler in same class
but.setOnClickListener(this);
}
// Button Code: Event Handler (Manual Approach)
{
tb.setText("Hello World");
}
}
72
|7/8-R, 8/8-S MAP
3. OUTPUT
73
|7/8-R, 8/8-S MAP
V. EXAMPLE OF IMAGEBUTTON DEMO

Event
: Click
Event Handler
: info() onClick()

(test.xml)
android:background="#f7f7f7"
tools:context=".JTest" >
<ImageButton
android:id="@+id/img"
android:src="@drawable/hike"
android:scaleType="fitXY"
android:contentDescription="@string/cc"
android:onClick="info"
/>
<TextView
android:id="@+id/tb"
74
Input Image (.png)
XML Event Handler
|7/8-R, 8/8-S MAP
/>
</LinearLayout>
(string.xml)
<resources>
<string name="app_name">ImageButton</string>
<string name="cc"></string>
</resources>
(JTest.java)
TextView tw;
@Override
// set the specific layout to current activity
// find XML resources & map them to java widget
tw=(TextView)findViewById(R.id.tb);
}
// Image Button Code
public void info(View v)
{
tw.setText("This is Hike Image...");
}
}
75
|7/8-R, 8/8-S MAP
3. OUTPUT
3.1 SCREENSHOT1
76
|7/8-R, 8/8-S MAP
3.2 SCREENSHOT2
ANDROID ALERTDIALOG CREATION

ALERT DIALOG
It is one of the most important and basic UI element in android
applications
AlertDialog.Builder is a built-in class, which is used to create the
Alert Dialog
It is used to display the dialog message with ok and cancel buttons
It is the sub class of Dialog class (Derived from Dialog class)
77
|7/8-R, 8/8-S MAP
DERIVATION
Object
Dialog class
Alert Dialog
THREE REGIONS OR PARTS OF ALERT DIALOG

There are three parts in the alert dialog
1. Title
2. Content
3. Action Buttons
1. Title
It is an optional
It is used to add or set the heading message or title message to
the alert dialog
2. Content
It is used to show the message to the user (message to display)
This content can be a string message or a listview or any custom
view
3. Action Buttons
This is one of the important parts in the alert dialog
This is mainly used to interact with the user
78
|7/8-R, 8/8-S MAP
It can be three types: positive button, negative button, neutral

button
We can add all these three buttons to the alert dialog. It depends
on the need
It is very important to note that, we cant add more than action
buttons in the alert dialog.
So an alert dialog can have maximum of one positive, one
negative & one neutral action button
Normally, positive action button is used to accept the action
(ok/yes)
Negative action button is used to cancel the action (no)
Neutral action button is used in neutral situations
It is important note that, each action buttons can make an event
IMPORTANT METHODS OF ALERTDIALOG INTERFACE
1. setTitle(CharSequence msg)
Sets the title message of dialog class
Return type: AlertDialog.Builder
2. setMessage(CharSequence msg)
Sets the message to display
3. setPostiveButton(CharSequence text,
DialogInterface.OnClickListener )
79
|7/8-R, 8/8-S MAP
Sets the content message to positive button with event handler

1st argument is the content of button (the text to display in the
positive button)
2nd argument is the event handler of positive button (It is the
listener to be invoked when the +ive button is pressed)
4. setNegativeButton(CharSequence text,
DialogInterface.OnClickListener)
Sets the content message to negative button with event
handler
negative button)
2nd argument is the event handler of negative button
5. setNeutralButton(CharSequence text,
DialogInterface.OnClickListener)
Sets the content message to neutral button with event handler
neutral button)
2nd argument is the event handler of neutral button
80
|7/8-R, 8/8-S MAP
6. setIcon(Drawable icon)
It is used set the icon of the alert dialog box
7. show()
It is used to show the alert dialog box
VI. ALERTDIALOG DEMO

(alert.xml) [res/layout/alert.xml]
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent
tools:context=".JAlert" >
<Button
81
|7/8-R, 8/8-S MAP
android:onClick="disp"
android:text="@string/lb"
/>
</RelativeLayout>
(string.xml) [/res/values/string.xml]
<resources>
<string name="app_name">AlertDemo</string>
<string name="lb">Click</string>
</resources>
(JAlert.java) [/src/ram.pugazh.alertdemo/JAlert.java]
package ram.pugazh.alertdemo;
import android.app.*;
import android.content.DialogInterface;
// Sub class must extends the super class Activity
public class JAlert extends Activity {
// this method is called when an app is loaded
@Override
// set the specific layout to current screen
setContentView(R.layout.alert);
}
82
|7/8-R, 8/8-S MAP
// Button Code (Event Handler)

public void disp(View v)
{
AlertDialog.Builder ab=new AlertDialog.Builder(this);
ab.setTitle("Message");
ab.setMessage("Good Morning");
// Positive Button Event Handler
ab.setPositiveButton("OK", new DialogInterface.OnClickListener()
{
@Override
public void onClick(DialogInterface dialog, int id) {
// User Code
}
});
NOTE
DialogInterface.OnClickListener
Interface used to allow the creator of a dialog to run some code when
an item on the dialog is clicked..
// This method will be called when a button in the dialog is clicked
// Parameters
dialog
The dialog that received the click
id
The button that was clicked (e.g. bt) or the position of the
item clicked
// Negative Button Event Handler

ab.setNegativeButton("Cancel", new
DialogInterface.OnClickListener()
{
83
|7/8-R, 8/8-S MAP
@Override
public void onClick(DialogInterface dg, int id) {
dg.cancel();
}
});
ab.show();
// show the dialog
}
}
3. OUTPUT
3.1 SCREENSHOTS
84
|7/8-R, 8/8-S MAP
3.2 SCREENSHOTS
85
|7/8-R, 8/8-S MAP
CIRCLE BUTTON CREATION

ELEMENTS
1. Shape
The shape drawable. This must be the root element
Generally it is used to create beautiful layouts
Here, it is used to create circle button, ring button, square button,
line ,etc,
It is the root element of drawable xml file
It must be placed in /res/drawable/name.xml folder
Important attributes
android:shape=oval
create circle button
android:shape=rectangle create square button

android:shape=ring
create ring button
android:shape=line
create straight line
2. Stroke
It is the sub element of shape element
It is used to set the border width & border color of button
android:width=2dp
set the border width of button
android:color=#000
set the border color of button
3. Corners
86
|7/8-R, 8/8-S MAP
It creates rounded corners for the shape

It applies only when the shape is a rectangle.
android:topLeftRadius=2dp
corner
set the radius for the top-left
android:topRightRadius=2dp
corner
set the radius for the top-right
android:bottomLeftRadius=2dp set the radius for the bottom-left

corner
android:bottomRightRadius=2dp set the radius for the bottomright corner
4. Solid
A solid color to fill the shape (background color of the shape)
android:color=#000 set a solid color to fill the shape
87
|7/8-R, 8/8-S MAP
VI. CIRCLE BUTTON DEMO

Event
: Click
Event Handler
: info() onClick()

(circle.xml) [res/layout/circle.xml]
android:gravity="top|center"
tools:context=".JCircle" >
<Button
android:layout_width="85dp"
android:text="@string/m1"
android:textColor="#ffffff"
android:background="@drawable/circledesign"
android:onClick="test"/>
</LinearLayout>
88
|7/8-R, 8/8-S MAP
(circledesign.xml) [/res/drawable/circledesign.xml]
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<stroke
android:width="2.5dp"
android:color="#fbb034"
/>
<solid
android:color="#0091cd"
/>
</shape>
(string.xml) [/res/values/string.xml]
<resources>
<string name="app_name">Cutebutton</string>
<string name="m1">Click</string>
</resources>
(JCircle.java) [/src/ram.pugazh.cutebutton/JCircle.java]
import android.app.*;
public class JCircle extends Activity {
@Override
setContentView(R.layout.circle);
}
89
|7/8-R, 8/8-S MAP
// Circle Button Code

{
AlertDialog.Builder ab=new AlertDialog.Builder(this);
ab.setTitle("Circle Button");
ab.setMessage("Good Morning...");
ab.setPositiveButton("OK", null);
ab.show();
}
}
3. OUTPUT
3.1 SCREENSHOTS
90
|7/8-R, 8/8-S MAP
3.2 SCREENSHOTS
Title
Message
Postive Button
91

Android NativeApp 10th Sep15 P91 Edited

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Android NativeApp 10th Sep15 P91 Edited

Diunggah oleh

Hak Cipta:

Format Tersedia

|7/8-R, 8/8-S MAP

Tuesday, August 11-13, 2015| 7 March 2016, 10:01:54 AM |

XML (Extensible Markup Language)