You are on page 1of 91

|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

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

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

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

(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

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

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

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

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

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

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

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

(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

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

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

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

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

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

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
(i) setText(CharSequence ch)
Sets the string value (text) of the button
10

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

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

It takes 1 argument
Return type : void
(ii) getText()
Gets the text of the button
It does not take any arguments
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
(i) setText(CharSequence ch)
Sets the string value (text) of the textview
It takes 1 argument
Return type : void
11

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

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

(ii) getText()
Gets the text of the textview
It does not take any arguments
Return type : CharSequence
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

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

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

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

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

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

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
(i) setText(CharSequence ch)
Sets the string value (text) of the edittext
It takes 1 argument
Return type : void
(ii) getText()
Gets the text of the editext
It does not take any arguments
Return type : Editable

15

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

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

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
(i) setText(CharSequence ch)
Sets the string value (text) of the checkbox
It takes 1 argument
Return type : void
(ii) getText()
Gets the text of the checkbox
It does not take any arguments
16

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

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

Return type : CharSequence


(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

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

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
(i) setText(CharSequence ch)
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
It does not take any arguments
Return type : CharSequence
(iii) setChecked(boolean checked)
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
Return type: boolean

18

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

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

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
(i) setText(CharSequence ch)
Sets the string value (text) of the toggle button
It takes 1 argument
19

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

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

Return type : void


(ii) getText()
Gets the current state (on state or off state) of toggle button
It does not take any arguments
Return type : CharSequence
(iii) setChecked(boolean checked)
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
Return type: boolean
Screenshot

Event Listener

: setOnCheckedChangeListener()

Event Handler

: void onToggleClicked(View view) { ... }


20

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

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

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)
It does not take any arguments
Return Type: float

21

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

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

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

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

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

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

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

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

}
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

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

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

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

IMPORTANT METHODS
1. loadUrl(String url)
It is used to load a web page using an URL
It takes only one argument
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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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)
android:layout_height=
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

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

(OR)
android:layout_height=
wrap_content
(OR)
android:layout_height=
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.
android:layout_width
=fill_parent
android:layout_width
=match_parent
android:layout_width
=wrap_content
android:layout_width
=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

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

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.

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

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
public void test(View v)
{
// 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

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

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

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

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

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

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

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

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

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

3. START AVD MANAGER

43

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

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

4. LIST OF EXISTING AVD DEVICES DETAILS

44

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

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

5. AVD CREATION

45

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

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

6. OUTPUT

46

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

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

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

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

Step 1: Project Creation in Android Studio

48

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

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

Step 2: SELECTION OF TARGET DEVICES

49

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

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

Step 3: ACTIVITY SELECTION IN ANDROID STUDIO

50

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

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

Step 4: HOME ACTIVITY DETAILS

51

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

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

1. XML CODE
(test.xml)

res/layout/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="#ffffff">
<TextView
android:text="Hello World!"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="60dp"
android:textColor="#1277e1"
android:textStyle="bold"
android:gravity="center"
android:textSize="18sp"
/>
</LinearLayout>
2. JAVA CODE
(JTest.java)
package ganesh.pugazh.helloworld;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
// current class must extend the super class AppCompactActivity
public class JTest extends AppCompatActivity {
// called when activity is 1st created
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

52

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

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

// set the specific layout file for current screen


setContentView(R.layout.test);
}
}
3. START AVD MANAGER IN ANDROID STUDIO

53

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

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

4. LIST OF EXISTING AVD DEVICES DETAILS

54

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

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

5. AVD CREATION IN ANDROID STUDIO


5.1 HARDWARE SELECTION

55

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

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

5.2 VALID INSTALLED SYSTEM API IMAGE SELECTION

56

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

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

5.3 AVD DETAILS

57

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

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

5.4 AVD VERIFICATION & START AVD

58

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

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

5.5 START VIRTUAL MOBILE DEVICE (AVD)

59

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

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

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

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

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)
package com.example.textviewdemo;
import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.widget.*;
public class JTest extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 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

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

}
}
2. OUTPUT

62

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

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

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)

package com.example.textviewdemo;
import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.view.*;
import android.widget.*;
public class JTest extends Activity {
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 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

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

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

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

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.
public void onClick(View v)
{
// 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

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

Ex.

Button bt;
public void onCreate(Bundle b)
{
bt=(Button)findViewById(R.id.button);
// register & assign events
bt.setOnClickListener(this);
}

Event Generator

// Event Handler
public void onClick(View v)
{
// user code
}

Event Listener
Event Location

Event Handler

66

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

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

1. INITIAL DESIGN

2. LAYOUT XML CODE


(buttonexample.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="#000000"
android:orientation="vertical"
tools:context=".JButtonExample" >
<Button
android:id="@+id/bt"
android:layout_width="match_parent"
android:layout_height="55dp"
67

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

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

android:text="@string/l1"
android:background="#0099e5"
android:textColor="#f7f7f7"
android:textSize="18sp"
android:textStyle="bold"
android:onClick="test"
/>
(Automatic event handler)
<TextView
android:id="@+id/tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textSize="18sp"
android:textColor="#f7f7f7"
/>
</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;
import android.os.Bundle;
// supports Bundle class
import android.app.Activity;
// supports Activity class (super class)
import android.view.*;
// supports View & Menu classes
import android.widget.*;
// supports UI elements like Button,
public class JButtonExample extends Activity {
// TextView Element Declaration
TextView tb;

68

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

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

// This method is called only ONCE, when activity is 1st created


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 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)
public void test(View v)
// 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
This method takes only one argument
Return type: void

2. append(CharSequence msg)
Add the text messages at the end of the TextView
This method takes only one argument
Return type: void

69

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

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

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

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

1. UI LAYOUT CODE (.xml)


(buttonexample.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="#000000"
android:orientation="vertical"
tools:context=".JButtonExample" >
<Button
android:id="@+id/bt"
android:layout_width="match_parent"
android:layout_height="55dp"
android:text="@string/l1"
android:background="#0099e5"
android:textColor="#f7f7f7"
android:textSize="18sp"
android:textStyle="bold"
android:layout_marginTop="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
/>
<TextView
android:id="@+id/tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textSize="18sp"
android:textColor="#f7f7f7"
/>
</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

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

2. ACTIVITY CODE (.java)


(JButton2.java)
package krish.pugazh.button1demo;
import android.app.Activity;
import android.os.Bundle;
import android.widget.*;
import android.view.*;
// 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)
{
super.onCreate(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)
public void onClick(View v)
{
tb.setText("Hello World");
}
}
72

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

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

3. OUTPUT

73

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

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

V. EXAMPLE OF IMAGEBUTTON DEMO


(AUTOMATED EVENT HANDLER USING XML CODE)
Event

: Click

Event Handler

: info() onClick()

1. UI LAYOUT CODE (.xml)


(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:orientation="vertical"
android:background="#f7f7f7"
tools:context=".JTest" >
<ImageButton
android:id="@+id/img"
android:layout_width="fill_parent"
android:layout_height="230dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="35dp"
android:layout_marginRight="10dp"
android:src="@drawable/hike"
android:scaleType="fitXY"
android:contentDescription="@string/cc"
android:onClick="info"
/>
<TextView
android:id="@+id/tb"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:textSize="18sp"
android:textStyle="bold"
74

Input Image (.png)

XML Event Handler

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

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

/>
</LinearLayout>
(string.xml)
<resources>
<string name="app_name">ImageButton</string>
<string name="cc"></string>
</resources>
2. ACTIVITY CODE (.java)
(JTest.java)
import android.os.Bundle;
import android.app.Activity;
import android.view.*;
import android.widget.*;
public class JTest extends Activity {
TextView tw;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// set the specific layout to current activity
setContentView(R.layout.test);
// 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

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

3. OUTPUT
3.1 SCREENSHOT1

76

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

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

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

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

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

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

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
It takes only one argument
Return type: AlertDialog.Builder
2. setMessage(CharSequence msg)
Sets the message to display
It takes only one argument
Return type: AlertDialog.Builder
3. setPostiveButton(CharSequence text,
DialogInterface.OnClickListener )
79

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

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

Sets the content message to positive button with event handler


It takes 2 arguments
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)
Return type: AlertDialog.Builder
4. setNegativeButton(CharSequence text,
DialogInterface.OnClickListener)
Sets the content message to negative button with event
handler
It takes 2 arguments
1st argument is the content of button (the text to display in the
negative button)
2nd argument is the event handler of negative button
Return type: AlertDialog.Builder
5. setNeutralButton(CharSequence text,
DialogInterface.OnClickListener)
Sets the content message to neutral button with event handler
It takes 2 arguments
1st argument is the content of button (the text to display in the
neutral button)
2nd argument is the event handler of neutral button
Return type: AlertDialog.Builder
80

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

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

6. setIcon(Drawable icon)
It is used set the icon of the alert dialog box
It takes only one argument
Return type: AlertDialog.Builder
7. show()
It is used to show the alert dialog box
It does not take any arguments
Return type: AlertDialog.Builder

VI. ALERTDIALOG DEMO


1. UI LAYOUT CODE (.xml)
(alert.xml) [res/layout/alert.xml]
<RelativeLayout
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
tools:context=".JAlert" >
<Button
android:id="@+id/bt"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="10dp"
android:gravity="center"
81

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

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

android:onClick="disp"
android:textSize="20sp"
android:background="#463014"
android:textColor="#f7f7f7"
android:text="@string/lb"
/>
</RelativeLayout>
(string.xml) [/res/values/string.xml]
<resources>
<string name="app_name">AlertDemo</string>
<string name="lb">Click</string>
</resources>
2. ACTIVITY CODE (.java)
(JAlert.java) [/src/ram.pugazh.alertdemo/JAlert.java]
package ram.pugazh.alertdemo;
import android.os.Bundle;
import android.view.*;
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
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// set the specific layout to current screen
setContentView(R.layout.alert);
}
82

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

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

// 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

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

@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

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

3.2 SCREENSHOTS

85

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

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

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
Important attributes
android:width=2dp

set the border width of button

android:color=#000

set the border color of button

3. Corners
It is the sub element of shape element
86

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

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

It creates rounded corners for the shape


It applies only when the shape is a rectangle.
Important attributes
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
It is the sub element of shape element
A solid color to fill the shape (background color of the shape)
Important attributes
android:color=#000 set a solid color to fill the shape

87

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

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

VI. CIRCLE BUTTON DEMO


(AUTOMATED EVENT HANDLER USING XML CODE)
Event

: Click

Event Handler

: info() onClick()

1. UI LAYOUT CODE (.xml)


(circle.xml) [res/layout/circle.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:gravity="top|center"
android:background="#333333"
tools:context=".JCircle" >
<Button
android:layout_marginTop="30dp"
android:layout_width="85dp"
android:layout_height="85dp"
android:gravity="center"
android:text="@string/m1"
android:textColor="#ffffff"
android:background="@drawable/circledesign"
android:onClick="test"/>
</LinearLayout>

88

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

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

(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>
2. ACTIVITY CODE (.java)
(JCircle.java) [/src/ram.pugazh.cutebutton/JCircle.java]
import android.os.Bundle;
import android.app.*;
import android.view.*;
public class JCircle extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.circle);
}
89

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

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

// Circle Button Code


public void test(View v)
{
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

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

3.2 SCREENSHOTS

Title
Message
Postive Button

91