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

2

|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

UI Containers 3. FrameLayout. Activity 2. It produces Dalvik executable code (. 2015| 7 March 2016. 2.widgets. 3.Event 1. 8/8-S MAP Tuesday.N DALVIK VM (DVM) JAVA VM (JVM) 1. Containers (Layouts)  A container for holding all controls  A container can contain another containers  Required package: android. It is a register machine It is a stack machine 2. Owned & maintained by Google Maintained by Oracle FOUR IMPORTANT ELEMENTS IN GUI 1..g. 10:01:54 AM | DIFFERENCE BETWEEN DVM & JVM S.*. RelativeLayout.app. etc. we can inherit a activity from the Activity super class  Package: android.  E.class) 3.dex) It produces Java Bytecode (. ..|7/8-R. UI Controls 4. August 11-13. LinearLayout.*.  We can programmatically and manually create a activity. UI Widgets or UI Controls  UI element in Android applications  Each UI element in android can generate events 4 . Activity  Basic building blocks for developing both native & web applications  Every GUI application starts with an Activity.

2015| 7 March 2016.widgets. August 11-13. an appropriate method is called in all listeners  A listener object must implement the interface corresponding to the events. etc. Menu Event. etc. TextView.. Event Handling  A method which is responsible for handling an event is called "Event Handling" 5 . Button. which means implementing all methods declared in the interface  To handle Events.  E.. 10:01:54 AM |  Used to create different GUI applications in android  Required package: android.|7/8-R. we write objects and methods which will be invoked whenever a certain event happens. Click event. 5. Window event. 4..g.  E. 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. EditText.g. Spinner. 8/8-S MAP Tuesday.*.

2015| 7 March 2016. 8/8-S MAP Tuesday. 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 6 .|7/8-R. August 11-13.

TextView. Button. “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 . when an event happens  Ex. 10:01:54 AM | (i) Events  Objects that describe what happened  Ex.|7/8-R. TextChanged. 2015| 7 March 2016. etc. etc (ii) Event sources  It is a component of server class  The generator of an event  Ex. 8/8-S MAP Tuesday. ValueChanged. ImageButton. Click. August 11-13. (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.

onFocusChange() This is called when the widget loses its focus i. onCreateContextMenu() This is called when the context menu is being built(as the result of a sustained "long click) 8 . text. for one or more seconds. 2015| 7 March 2016. 8/8-S MAP Tuesday.N EVENT HANDLER EVENT LISTENER & DESCRIPTION 1. 2. image etc. onLongClick() This is called when the user either clicks or touches or focuses upon any widget like button. onMenuItemClick() This is called when the user selects a menu item. text. onClick() This is called when the user either clicks or touches or focuses upon any widget like button. 10:01:54 AM | 7.|7/8-R. image etc. IMPORTANT EVENT LISTENERS & EVENT HANDLERS S. 4. 6.e. 5. onKey() This is called when the user is focused on the item and presses or releases a hardware key on the device. 3. August 11-13. releases the key.  These events are used to make the application more effective and efficient. 7. user goes away from the view item. or any movement gesture on the screen. TYPES OF EVENT  There are many types of events that are generated by android Application. onTouch() This is called when the user presses the key.

etc  It takes only one argument  Return type: void (ii) getText()  gets the text of UI elements like Button. 2015| 7 March 2016. TextView.*. 8/8-S MAP Tuesday.widgets. TextView. 9 . August 11-13. etc  It does not take any arguments  Return type: CharSequence I. View  Create a view class  It is a base class for all UI widgets like Button. TextView. UI WIDGETS ANDROID UI WIDGETS 1. 10:01:54 AM | IMPORTANT METHODS (i) setText(CharSequence ch)  sets the text to UI elements like Button. etc  Required package: android.|7/8-R.

10:01:54 AM | Screenshot 2. August 11-13. 8/8-S MAP Tuesday. 2015| 7 March 2016. 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.

|7/8-R. 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. 2015| 7 March 2016. 8/8-S MAP Tuesday. 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 . 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. 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.|7/8-R. 8/8-S MAP Tuesday. numbers & underscores 12 . 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. August 11-13.

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 . 8/8-S MAP Tuesday. 2015| 7 March 2016. August 11-13.|7/8-R.

August 11-13. 8/8-S MAP Tuesday.|7/8-R. ImageView  Like ImageButton. 2015| 7 March 2016. 10:01:54 AM | 5. 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 .

10:01:54 AM | 6. 8/8-S MAP Tuesday.|7/8-R. August 11-13. 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 . 2015| 7 March 2016.

2015| 7 March 2016. CheckBox  It is used to select more than one option at a time  It present options to a user.  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 . 8/8-S MAP Tuesday. usually in a multiple choice format. 10:01:54 AM | Screenshot 7. August 11-13.|7/8-R.

8/8-S MAP Tuesday.|7/8-R. 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. August 11-13. whether checkbox is selected or not  It doesn't take any arguments  Return type: boolean Screenshot 17 . 2015| 7 March 2016.

|7/8-R. usually in a multiple choice format. 8/8-S MAP Tuesday. RadioButton  It is used to select only one option at a time  It present options to a user.  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. August 11-13. 2015| 7 March 2016. whether checkbox is selected or not  It doesn't take any arguments  Return type: boolean 18 . 10:01:54 AM | 8.

Important Methods (i) setText(CharSequence ch)  Sets the string value (text) of the toggle button  It takes 1 argument 19 . August 11-13. 8/8-S MAP Tuesday.|7/8-R.  A toggle button takes only two states ACTIVATED state & DEACTIVATED state [or] ON state and OFF state. 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.  The default value for on state is "ON" and for off state is "OFF".  This is the best alternative for radio buttons. 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) { ..|7/8-R. } 20 . 2015| 7 March 2016.. 8/8-S MAP Tuesday. August 11-13.

0. 2015| 7 March 2016. If we set the rating at 2. August 11-13.)  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. RatingBar  It is used to get the rating from the user. 2.0.  Ex. 3. 8/8-S MAP Tuesday.g. 10:01:54 AM | 10..|7/8-R.. .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 . drag to set the value  The rating returns a floating-point number (e. etc.0. (used to show rating in stars)  The rating bar shows number of stars in which the user can touch. 4.

Usage of SeekBar  It is used to adjust media player volume. 8/8-S MAP Tuesday.  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. boolean user) 11. August 11-13.|7/8-R. 2015| 7 March 2016. float rating. 22 . set brightness of the screen. seek a playing music etc. 10:01:54 AM | ScreenShot Event Listener : OnRatingBarChangeListener Event Handler : void onRatingChanged(RatingBar rb. SeekBar  It is an extension of ProgressBar element  It is a kind of ProgressBar with draggable thumb.

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. 8/8-S MAP Tuesday.|7/8-R. onStartTrackingTouch() : This is called when the dragging starts 3. August 11-13. onProgressChanged() : This is called when the progress level changes 2. 2015| 7 March 2016. onStopTrackingTouch() : This is called when the dragging stops 23 .

August 11-13. } Spinner Object public void onNothingSelected(AdapterView<?> parent) { sp. 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.|7/8-R. 8/8-S MAP Tuesday. int position. 24 .setText(items[position]). 10:01:54 AM | 12. 2015| 7 March 2016. long id) { // user code sp.setText(""). View v.

8/8-S MAP Tuesday. TimePicker  It is used to select time. 10:01:54 AM | } Screenshot 13. It allows user to select time by hour and minute. 25 . 2015| 7 March 2016.|7/8-R. August 11-13.  We cannot select time by seconds.

August 11-13. 8/8-S MAP Tuesday. such as navigation controls or an address bar. 26 . 10:01:54 AM | Screenshot 14.  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. 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. 2015| 7 March 2016.|7/8-R. 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.

loadUrl(String url)  It is used to load a web page using an URL  It takes only one argument  Return Type: void Ex.google. String Encoding)  It is used to load data from an HTML string  It takes 3 arguments  Return Type: void Ex. wb.|7/8-R. August 11-13.loadData(html. 2. wb.loadUrl("www. String mime. null). "text/html". String html= "<html><body>A very basic <b>WebView</b> demo!</body></html>". loadData(String htmlData. Screenshot 27 .com"). 2015| 7 March 2016. 10:01:54 AM | IMPORTANT METHODS 1. 8/8-S MAP Tuesday.

2015| 7 March 2016. either horizontally or vertically with help of "android:orientation" attribute) 28 . 1. 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. August 11-13. Activity  Main screen in GUI  It is a top level layout with its own title. It is also known as ViewGroup. UI LAYOUTS LAYOUTS or CONTAINERS  Layout denotes the architecture of the application. settings menu (Action Bar)  It holds other UI Layouts & UI Widgets 2. icon. we need to know about Android Layout. 8/8-S MAP Tuesday. 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.|7/8-R. we need at least one container object  To design UI for an App. 10:01:54 AM | II.

8/8-S MAP Tuesday. that displays child views in relative positions (All the UI elements are arranged in relative to each other)  For ex. 2015| 7 March 2016. August 11-13. 10:01:54 AM | Screenshot 3. referred to by its unique identifier 29 . RelativeLayout  It is the flexible layout for all  It is a view group. we can set a UI element to be positioned "above" or "below" or "to the left of" or "to the right of" another control.|7/8-R.

|7/8-R. 8/8-S MAP Tuesday. 2015| 7 March 2016. 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 . August 11-13. 10:01:54 AM | Screenshot 4.

10:01:54 AM | 5. TextView.|7/8-R. etc Screenshot 31 . 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. EditText. August 11-13. This is similar to HTML <table> and <tr>  <TableRow> can contain any UI elements like Button. 2015| 7 March 2016. 8/8-S MAP Tuesday.

2015| 7 March 2016. August 11-13. which normally is a LinearLayout. 8/8-S MAP Tuesday.|7/8-R. 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. Screenshot 32 . 10:01:54 AM | 6.

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 . 2015| 7 March 2016. 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. 10:01:54 AM | 7. 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. August 11-13.android.|7/8-R. 8/8-S MAP Tuesday.

2015| 7 March 2016. GridLayout  It is a ViewGroup that displays items in a two-dimensional. 10:01:54 AM | Screenshot 8.|7/8-R. 8/8-S MAP Tuesday. scrollable grid  It is an android layout that places its children in a rectangular grid Screenshot 34 . August 11-13.

MEANING android:id  Resource ID Syntax: android:id=”@+id/name”  id is used to identify the control in the java code Ex. wrap_content  match_parent: sets the dimension 35 . LinearLayout. August 11-13. 8/8-S MAP Tuesday.class” file 2. …) android:id=”@+id/tb” @  global variable +  The plus symbol indicates This is a new resource name that must be created & added to our “R. in. 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. 2015| 7 March 2016. match_parent. TextView. XML files are used to define layout of Android apps and store data IMPORTANT XML ATTRIBUTES S.  Sets the identifier to UI views & viewgroups (Ex. dp. etc. 10:01:54 AM | XML (UI Layer)  It is a markup language (not a programming language)  In android. android:layout_height Ex. mm) or with the following keywords: fill_parent. Button. sp.|7/8-R. pt.N XML ATTRIBUTES 1.

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. August 11-13. 2015| 7 March 2016.  Sets the direct text using assignment operator 36 . android:layout_width =”fill_parent” android:layout_width =”match_parent” android:layout_width =”wrap_content” android:layout_width =”55dp” 4.|7/8-R. 10:01:54 AM | (OR) android:layout_height= ”wrap_content” (OR) android:layout_height= ”100dp”  sets the custom height using dp value 3. 8/8-S MAP Tuesday. android:layout_width to match that of the parent element. android:text  Sets the text to UI elements Ex.

LinearLayout. 10:01:54 AM | android:text=”Hello World” (OR)  Sets the indirect text using <string. Button.|7/8-R. EditText. 2015| 7 March 2016. Button. 8/8-S MAP Tuesday. etc) android:textSyle=”bold” android:textSyle=”normal” android:textSyle=”italic” 6. android:textStyle Ex. Button. TextView. August 11-13. android:textColor Ex. Sets the text size to UI elements (Ex. etc) android:textSyle=”18sp” 7. etc) android: textColor =”#ffffff” 8. Sets the foreground color to UI elements (Ex. EditText. Sets the background color to UI widgets & Layouts (Ex. android:textSize Ex. android:background Ex. Button. etc) android: background=”12ffff” 37 . TextView. TextView. EditText. EditText.xml> file android:text=”@string/lb” <string name=”lb”>Hello World</string> 5. Sets the styles for text to UI elements (Ex. TextView.

png. .png 10 android:onClick Ex. August 11-13.jpg.|7/8-R. 2015| 7 March 2016.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. . 8/8-S MAP 9. 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. Tuesday. Assign direct event handler to UI elements like Button. 10:01:54 AM | android:src Syntax: android:src=”@drawable/ imageName”  Sets the image or background image to ImageView or ImageButton  Supported formats: .class” file 38 .gif Ex. android:src=”@drawable/mit ” mit.

In earlier android versions dip was used & later changed to dp  sp  Scale Independent Pixel. large. medium. extra-large. 8/8-S MAP Tuesday. 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).  Fonts should use sp  px  Pixels-corresponds to actual pixels on the screen 39 . 2015| 7 March 2016. scale based on user’s font size preference. August 11-13. high and extra high. medium. 10:01:54 AM | TERMINOLOGIES IN ANDROID Screen Size  Screen size in android is grouped into categories small. 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.  Screen density is grouped as low. 1dp=1pixel  Except for font size. use dp always  dip  dip=dp.|7/8-R.

etc  Ex. Where.bb). Width.g. sp for font size & dp for everything else (e.54 centimeters  mm  Millimeters-based on the physical size of the screen  pt  Points-1/72 of an inch.viewId).|7/8-R. …)  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. etc. August 11-13.id. based on the physical size of the screen NOTE  Always use dp & sp only. <UI-Widget> can be Button.id. 2015| 7 March 2016. TextView. 40 . <UI-Widget> objectname=< UI-Widget >findViewById(R. 8/8-S MAP Tuesday. EditText. Height. 10:01:54 AM |  in  Inches-based on the physical size of the screen  1 inch=2. Button bt=(Button)findViewById(R.

|7/8-R. 2015| 7 March 2016. 10:01:54 AM | I. XML CODE (test.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 . 8/8-S MAP Tuesday. EXAMPLE OF TEXTVIEW DEMO (Displaying Message using XML & Java) Approach : Code-Behind UI Design : XML Logic : Java 1.com/apk/res/android" xmlns:tools="http://schemas. August 11-13.android.xml) <LinearLayout xmlns:android="http://schemas.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#000" tools:context=".android.

import android..*.. import android.tb).os. 2015| 7 March 2016.layout.test). // called when activity is 1st created @Override protected void onCreate(Bundle savedInstanceState) { super.app. // find XML resource tv=(TextView)findViewById(R. 10:01:54 AM | 2.example. } } 42 .|7/8-R.Bundle. 8/8-S MAP Tuesday.id. // display message tv. // set the specific layout file for current screen setContentView(R.textviewdemo.widget. JAVA CODE package com.setText("Welcome to Android Programming.").onCreate(savedInstanceState). August 11-13. import android. // sub class should inherit the super class “Activity” public class JTest extends Activity { TextView tv.Activity.

August 11-13. 8/8-S MAP Tuesday. 2015| 7 March 2016. START AVD MANAGER 43 .|7/8-R. 10:01:54 AM | 3.

10:01:54 AM | 4. August 11-13. 2015| 7 March 2016. LIST OF EXISTING AVD DEVICES DETAILS 44 .|7/8-R. 8/8-S MAP Tuesday.

2015| 7 March 2016. 8/8-S MAP Tuesday. August 11-13.|7/8-R. 10:01:54 AM | 5. AVD CREATION 45 .

10:01:54 AM | 6. OUTPUT 46 .|7/8-R. 8/8-S MAP Tuesday. 2015| 7 March 2016. August 11-13.

August 11-13. 10:01:54 AM | EXAMPLE OF MATERIAL DESIGN APP CREATION IN ANDROID STUDIO I. 8/8-S MAP Tuesday.|7/8-R. 2015| 7 March 2016. EXAMPLE OF TEXTVIEW DEMO USING ANDROID STUDIO (Displaying Message using XML & Java) Approach : Code-Behind UI Design : XML Logic : Java 47 .

8/8-S MAP Tuesday. 2015| 7 March 2016. 10:01:54 AM | Step 1: Project Creation in Android Studio 48 .|7/8-R. August 11-13.

8/8-S MAP Tuesday. 10:01:54 AM | Step 2: SELECTION OF TARGET DEVICES 49 . August 11-13.|7/8-R. 2015| 7 March 2016.

|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

START AVD MANAGER IN ANDROID STUDIO 53 . August 11-13.test). 10:01:54 AM | // set the specific layout file for current screen setContentView(R.|7/8-R.layout. 8/8-S MAP Tuesday. } } 3. 2015| 7 March 2016.

|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

August 11-13. 8/8-S MAP Tuesday.|7/8-R. 10:01:54 AM | 5. 2015| 7 March 2016.3 AVD DETAILS 57 .

|7/8-R.4 AVD VERIFICATION & START AVD 58 . 10:01:54 AM | 5. 2015| 7 March 2016. August 11-13. 8/8-S MAP Tuesday.

2015| 7 March 2016. 8/8-S MAP Tuesday. August 11-13.5 START VIRTUAL MOBILE DEVICE (AVD) 59 .|7/8-R. 10:01:54 AM | 5.

the current class must extend “Activity” super class  For material design native application. 2015| 7 March 2016. 10:01:54 AM | 6. August 11-13. 8/8-S MAP Tuesday.|7/8-R. OUTPUT NOTE:  For classic native application. the current class must extend “AppCompactActivity” super class. 60 .

|7/8-R.textviewdemo.Bundle.Color. import android. 10:01:54 AM | II.Activity. 8/8-S MAP Tuesday. EXAMPLE OF TEXTVIEW DEMO (Displaying Message w/o using XML) AIM  Aim of this source code (. JAVA CODE : Java (JTest. import android. // set the TextView to Current Screen via setContentView setContentView(tv). // display message tv.graphics.java) package com. August 11-13. import android. 61 .*. // Create TextView Object TextView tv=new TextView(this).setTextSize(20.java) is used to display message without using XML Approach : Inline-Coding UI Design : Java Logic 1.os.setText("Good Morning :-)"). public class JTest extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super. // set the Text Size tv.app.onCreate(savedInstanceState).widget. 2015| 7 March 2016.example. import android.0f).

August 11-13. 10:01:54 AM | } } 2. OUTPUT 62 . 2015| 7 March 2016.|7/8-R. 8/8-S MAP Tuesday.

app.widget. public class JTest extends Activity { protected void onCreate(Bundle savedInstanceState) { super. JAVA CODE : Java (JTest. import android.parseColor("#331e54")).view. // display message tv.java) package com.*.setTextColor(Color.setBackgroundColor(Color.setText("Good Morning :-)"). 8/8-S MAP Tuesday. August 11-13. 10:01:54 AM | III. import android.setTextSize(20. // set the foreground color tv.onCreate(savedInstanceState). // Create TextView Object TextView tv=new TextView(this).Color. // Set the background color tv. 2015| 7 March 2016. // set the Text Size tv.os.|7/8-R.Activity.parseColor("#f7f7f7")). CHANGING THE BG COLOR & FG COLOR OF TEXTVIEW (Displaying Message w/o using XML) AIM  Aim of this code (. import android.*. import android.Bundle. import android.graphics. // set the TextView to Current Screen via setContentView 63 .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.example.0f).textviewdemo.

August 11-13.|7/8-R. OUTPUT 64 . 2015| 7 March 2016. 8/8-S MAP Tuesday. } } USED METHODS 1. 10:01:54 AM | setContentView(tv). 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.

public void onClick(View v) { // user code } 2. They are: 1. EXAMPLE OF BUTTON DEMO (AUTOMATED EVENT HANDLER USING XML CODE) Event : Click Event Handler : test()  onClick() ANDROID EVENT HANDLER  In android. 2015| 7 March 2016. 10:01:54 AM | IV. assigning event & creating event handler using java code 65 . we can create two types of event handlers.|7/8-R. 8/8-S MAP Tuesday. August 11-13. Java Event Handler  This is manual approach  Here user is responsible for registering event. 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.

10:01:54 AM | Ex. … Button bt. August 11-13. 2015| 7 March 2016. public void onCreate(Bundle b) { bt=(Button)findViewById(R.|7/8-R. // register & assign events bt.setOnClickListener(this). 8/8-S MAP Tuesday. } Event Generator // Event Handler public void onClick(View v) { // user code } Event Listener Event Location Event Handler 66 .id.button).

10:01:54 AM | 1. August 11-13.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#000000" android:orientation="vertical" tools:context=". 8/8-S MAP Tuesday.xml) <LinearLayout xmlns:android="http://schemas. INITIAL DESIGN 2. 2015| 7 March 2016.android.com/apk/res/android" xmlns:tools="http://schemas.|7/8-R.JButtonExample" > <Button android:id="@+id/bt" android:layout_width="match_parent" android:layout_height="55dp" 67 .android. LAYOUT XML CODE (buttonexample.

button1demo.*.Bundle. August 11-13. import android.|7/8-R. … public class JButtonExample extends Activity { // TextView Element Declaration TextView tb. 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.app.view.os. 2015| 7 March 2016.pugazh. // supports View & Menu classes import android. 68 .widget. // supports Bundle class import android.Activity.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. 8/8-S MAP Tuesday. // supports UI elements like Button.*. // supports Activity class (super class) import android.

onCreate(savedInstanceState). // find XML resources & map it to java widget tb=(TextView)findViewById(R.setText("Good Morning").id.tv).layout. 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. when activity is 1st created @Override protected void onCreate(Bundle savedInstanceState) { super.append("Have a good day :-)"). 10:01:54 AM | // This method is called only ONCE. 8/8-S MAP Tuesday.buttonexample). 2015| 7 March 2016. // Append the text message (add the text to end of the TextView) & display it tb. August 11-13.|7/8-R. // set the specific layout file to current screen via setContentView() setContentView(R. append(CharSequence msg)  Add the text messages at the end of the TextView  This method takes only one argument  Return type: void 69 . } } USED METHODS 1. } // Button Code (Automated Event Handler) public void test(View v) // XML Event handler { // Display the message tb.

10:01:54 AM | 4. 8/8-S MAP Tuesday. OUTPUT V.|7/8-R. 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 . 2015| 7 March 2016. August 11-13.

|7/8-R.xml) <resources> <string name="app_name">ButtonDemo</string> <string name="hello_world">Hello world!</string> <string name="l1">Click Me</string> </resources> 71 . 10:01:54 AM | 1.android.com/apk/res/android" xmlns:tools="http://schemas.xml) <LinearLayout xmlns:android="http://schemas. 8/8-S MAP Tuesday.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#000000" android:orientation="vertical" tools:context=".xml) (buttonexample. 2015| 7 March 2016. UI LAYOUT CODE (.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. August 11-13.

id.id. but=(Button)findViewById(R.layout. import android.onCreate(savedInstanceState).setText("Hello World").bt). // registering event handler in same class but.widget. // find XML resources & map them to java widget tb=(TextView)findViewById(R.OnClickListener{ // TextView & Button Elements Declaration TextView tb.buttonexample).os. // set the specific layout file to current screen via setContentView() setContentView(R.*.Activity. Button but.button1demo. ACTIVITY CODE (.setOnClickListener(this).pugazh.java) (JButton2. import android. } // Button Code: Event Handler (Manual Approach) public void onClick(View v) { tb.tv). // Sub class must extend Activity super class & implement OnClickListener public class JButton2 extends Activity implements View. // This method is called only when activity is 1st created @Override protected void onCreate(Bundle savedInstanceState) { super. August 11-13. 2015| 7 March 2016.view.Bundle.*. } } 72 .|7/8-R.app. import android. 8/8-S MAP Tuesday. 10:01:54 AM | 2. import android.java) package krish.

8/8-S MAP Tuesday. 2015| 7 March 2016. OUTPUT 73 . August 11-13.|7/8-R. 10:01:54 AM | 3.

png) XML Event Handler .com/apk/res/android" xmlns:tools="http://schemas. August 11-13.android. 2015| 7 March 2016.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#f7f7f7" tools:context=".android. UI LAYOUT CODE (.|7/8-R.xml) (test.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 (. EXAMPLE OF IMAGEBUTTON DEMO (AUTOMATED EVENT HANDLER USING XML CODE) Event : Click Event Handler : info()  onClick() 1. 8/8-S MAP Tuesday.xml) <LinearLayout xmlns:android="http://schemas. 10:01:54 AM | V.

widget.*. } } 75 .xml) <resources> <string name="app_name">ImageButton</string> <string name="cc"></string> </resources> 2. import android. import android.setText("This is Hike Image. 2015| 7 March 2016.tb). ACTIVITY CODE (.|7/8-R.Bundle. // find XML resources & map them to java widget tw=(TextView)findViewById(R.os.id.onCreate(savedInstanceState).. public class JTest extends Activity { TextView tw.Activity.java) import android. // set the specific layout to current activity setContentView(R."). } // Image Button Code public void info(View v) { tw.. 8/8-S MAP Tuesday. 10:01:54 AM | /> </LinearLayout> (string.*.view.app. import android. August 11-13.java) (JTest.layout.test). @Override protected void onCreate(Bundle savedInstanceState) { super.

OUTPUT 3. 2015| 7 March 2016. August 11-13.|7/8-R. 8/8-S MAP Tuesday.1 SCREENSHOT1 76 . 10:01:54 AM | 3.

8/8-S MAP Tuesday. 2015| 7 March 2016.Builder” is a built-in class.2 SCREENSHOT2 ANDROID ALERTDIALOG CREATION ALERT DIALOG  It is one of the most important and basic UI element in android applications  “AlertDialog. 10:01:54 AM | 3. 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 . August 11-13.|7/8-R.

August 11-13. 8/8-S MAP Tuesday. Action Buttons 1. 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. Action Buttons  This is one of the important parts in the alert dialog  This is mainly used to interact with the user 78 . 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. Content 3.|7/8-R. Title  It is an optional  It is used to add or set the heading message or title message to the alert dialog 2. 2015| 7 March 2016.

each action buttons can make an event IMPORTANT METHODS OF ALERTDIALOG INTERFACE 1.  So an alert dialog can have maximum of one positive. we can’t add more than action buttons in the alert dialog. neutral button  We can add all these three buttons to the alert dialog. DialogInterface.Builder 3. August 11-13. It depends on the need  It is very important to note that.Builder 2. 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. 10:01:54 AM |  It can be three types: positive button. setMessage(CharSequence msg)  Sets the message to display  It takes only one argument  Return type: AlertDialog. negative button. 2015| 7 March 2016. setTitle(CharSequence msg)  Sets the title message of dialog class  It takes only one argument  Return type: AlertDialog. 8/8-S MAP Tuesday. setPostiveButton(CharSequence text.OnClickListener ) 79 .|7/8-R.

Builder 4. 2015| 7 March 2016.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. setNegativeButton(CharSequence text.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.|7/8-R. DialogInterface.Builder 80 . August 11-13.Builder 5. DialogInterface. 8/8-S MAP Tuesday. 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. setNeutralButton(CharSequence text.

setIcon(Drawable icon)  It is used set the icon of the alert dialog box  It takes only one argument  Return type: AlertDialog.Builder VI.xml) (alert.com/tools" android:layout_width="match_parent" android:layout_height="match_parent” tools:context=".Builder 7.xml) [res/layout/alert.android. 2015| 7 March 2016.com/apk/res/android" xmlns:tools="http://schemas.|7/8-R. August 11-13. ALERTDIALOG DEMO 1.xml] <RelativeLayout xmlns:android="http://schemas.android. UI LAYOUT CODE (. show()  It is used to show the alert dialog box  It does not take any arguments  Return type: AlertDialog. 10:01:54 AM | 6. 8/8-S MAP Tuesday.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 .

alert). import android. import android. import android.onCreate(savedInstanceState). // set the specific layout to current screen setContentView(R.pugazh. 2015| 7 March 2016.java] package ram. August 11-13.view. ACTIVITY CODE (.java) [/src/ram.*. import android. 10:01:54 AM | android:onClick="disp" android:textSize="20sp" android:background="#463014" android:textColor="#f7f7f7" android:text="@string/lb" /> </RelativeLayout> (string.layout. 8/8-S MAP Tuesday.DialogInterface.app. } 82 .Bundle.*.os.alertdemo.xml] <resources> <string name="app_name">AlertDemo</string> <string name="lb">Click</string> </resources> 2. // 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.xml) [/res/values/string.alertdemo/JAlert.content.|7/8-R.java) (JAlert.pugazh.

g. ab. int id) { // User Code } }). new DialogInterface. 2015| 7 March 2016. 10:01:54 AM | // Button Code (Event Handler) public void disp(View v) { AlertDialog. new DialogInterface. ab. August 11-13.setMessage("Good Morning").OnClickListener() { 83 .. NOTE DialogInterface.setPositiveButton("OK".Builder ab=new AlertDialog. bt) or the position of the item clicked // Negative Button Event Handler ab.setNegativeButton("Cancel".OnClickListener  Interface used to allow the creator of a dialog to run some code when an item on the dialog is clicked.OnClickListener() { @Override public void onClick(DialogInterface dialog.setTitle("Message"). 8/8-S MAP Tuesday. // 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.|7/8-R. // Positive Button Event Handler ab.Builder(this).

10:01:54 AM | @Override public void onClick(DialogInterface dg. // show the dialog } } 3. } }). August 11-13.show().1 SCREENSHOTS 84 .cancel().|7/8-R. int id) { dg. OUTPUT 3. 8/8-S MAP Tuesday. ab. 2015| 7 March 2016.

2015| 7 March 2016.|7/8-R.2 SCREENSHOTS 85 . August 11-13. 8/8-S MAP Tuesday. 10:01:54 AM | 3.

10:01:54 AM | CIRCLE BUTTON CREATION ELEMENTS 1. line . Shape  The shape drawable. This must be the root element  Generally it is used to create beautiful layouts  Here. 2015| 7 March 2016. it is used to create circle button. ring button. …  It is the root element of drawable xml file  It must be placed in “/res/drawable/name. 8/8-S MAP Tuesday.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.etc. square button. 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. August 11-13.|7/8-R. Corners  It is the sub element of “shape” element 86 .

8/8-S MAP Tuesday. August 11-13. 2015| 7 March 2016.|7/8-R. 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. 10:01:54 AM |  It creates rounded corners for the shape  It applies only when the shape is a rectangle. 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 .

xml) [res/layout/circle. August 11-13.android.android.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 . CIRCLE BUTTON DEMO (AUTOMATED EVENT HANDLER USING XML CODE) Event : Click Event Handler : info()  onClick() 1.xml] <LinearLayout xmlns:android="http://schemas. 10:01:54 AM | VI. UI LAYOUT CODE (.com/apk/res/android" xmlns:tools="http://schemas. 2015| 7 March 2016. 8/8-S MAP Tuesday.xml) (circle.|7/8-R.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="top|center" android:background="#333333" tools:context=".

|7/8-R. 8/8-S MAP Tuesday. 2015| 7 March 2016.os.xml) [/res/values/string. ACTIVITY CODE (.layout.onCreate(savedInstanceState). August 11-13. public class JCircle extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.xml] <shape xmlns:android="http://schemas.*.java) [/src/ram.java) (JCircle. setContentView(R. 10:01:54 AM | (circledesign.com/apk/res/android" android:shape="oval" > <stroke android:width="2.cutebutton/JCircle. } 89 .java] import android.app.Bundle.view.*.5dp" android:color="#fbb034" /> <solid android:color="#0091cd" /> </shape> (string.pugazh. import android. import android.android.xml] <resources> <string name="app_name">Cutebutton</string> <string name="m1">Click</string> </resources> 2.circle).xml) [/res/drawable/circledesign.

..Builder ab=new AlertDialog. ab. 10:01:54 AM | // Circle Button Code public void test(View v) { AlertDialog.setPositiveButton("OK".show(). OUTPUT 3.|7/8-R. 2015| 7 March 2016. 8/8-S MAP Tuesday. ab. August 11-13."). ab. null). ab. } } 3.setTitle("Circle Button").Builder(this).1 SCREENSHOTS 90 .setMessage("Good Morning.

8/8-S MAP Tuesday.2 SCREENSHOTS Title Message Postive Button 91 .|7/8-R. August 11-13. 2015| 7 March 2016. 10:01:54 AM | 3.