TOPICS TO BE COVERED

• Introduction to android.• Setup android environment.• User interface development.• Interactive application development.

OVERVIEW

• What is android?• History of android.• What is Open handset alliance?• Different Versions of android.

BRIEF HISTORY

• Android is a Linux-based open source software stack that comes along with: 1. operating system 2. middleware 3. native mobile applications

• It was designed primarily for touchscreen mobile devices such as smartphones, tablets.

• Initially developed by Android Inc.,(founded in 2003 and is based in Palo Alto, California) which operated as subsidiary of Google and later purchased by Google in 2005.

• Android was publically announced in 2007 and first phone was sold on October 2008.

VERSIONS OF ANDROID

NAMES & SPECIFICATION

• Initial two versions were called as beta versions specified as Android 1.0 & 1.1.

• Later on names of subsequent versions were based on some dessert & are in alphabetic orders e.g.1. 1.5 Cupcake2. 1.6 Donut3. 2.0/2.1 Éclair4. 2.2 Froyo5. 2.3 Gingerbread6. 3.0/3.1 Honeycomb7. 4.0 Ice-cream Sandwich8. 4.1 Jelly Bean9. 4.4 Kitkat

Open handset Alliance

What is activity ?

OPEN SOURCE

Industry• Software stack open-

sourced under Apache2.0 license

• Source available afterfirst handsets ship

• Anyone will be able tobuild a system image

Users• Users have control of their experience• They control what gets

installed• They choose the defaults

Developer • Don not need

permission to ship anapplication

• No hidden or privilegedframework APIs

• Can integrate, extendand replace existingcomponents

INDUSTRY

USER

DEVELOPER

ANDROID

USER INTERFACE

• User interface layout• View• View group• UI attributes and ID• Types of layouts• Basic Input controlsI. Buttons II. Textfields III. Radio buttonIV. CheckboxV. Toggle buttonVI. Spinners VII. Pickers

USER INTERFACE DESIGNING

Two ways:1. Programming 2. Drag & Drop (good and efficient)

View & view group

What is view?• All user interface elements in the android app are build using view

and view group objects.e.g. view contains: button, textfields, etc.

What is view group?

For Example Vertical layout in which Button and Text View look like this

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="I am a TextView" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="I am a Button" /></LinearLayout>

ATTRIBUTES

• Id: every view element has a unique id.Example android:id=“@+id/unique name”

Indicates xml should be parsed

Indicates new resource has to added to R.java file

Resource generated automatically

LAYOUT AND ITS TYPES

• Linear• Relative• Table layout• Grid layout• Grid view• List view

LINEAR LAYOUT

• LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the android :orientation attribute.

Example:

• <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="16dp" android:paddingRight="16dp" android:orientation="vertical" > <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/to" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/subject" /> <EditText android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:gravity="top" android:hint="@string/message" /> <Button android:layout_width="100dp" android:layout_height="wrap_content" android:layout_gravity="right" android:text="@string/send" /></LinearLayout>

RELATIVE LAYOUT

• Relative layout is a view group that displays child views in relative positions

• <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="16dp" android:paddingRight="16dp" > <EditText android:id="@+id/name" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/reminder" /> <Spinner android:id="@+id/dates" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_below="@id/name" android:layout_alignParentLeft="true" android:layout_toLeftOf="@+id/times" /> <Spinner android:id="@id/times" android:layout_width="96dp" android:layout_height="wrap_content" android:layout_below="@id/name" android:layout_alignParentRight="true" />

<Button android:layout_width="96dp" android:layout_height="wrap_content" android:layout_below="@id/times" android:layout_alignParentRight="true" android:text="@string/done" /></RelativeLayout>

LIST VIEW

• List view a view group that displays a list of scrollable items. • The list using an adapter that pulls content from a source such as an

array or database query and converts each item result into a view that’s placed into the list.

GRID VIEW

• Grid view is a view group that displays items in a two dimensional, scrollable grid. The grid items are automatically inserted to the layout using list adapter.

Control Type Description Related Classes

Button A push-button that can be pressed, or clicked, by the user to perform an action.

Button

Text field An editable text field. You can use theAutoCompleteTextView widget to create a text entry widget that provides auto-complete suggestions

EditText,AutoCompleteTextView

Checkbox An on/off switch that can be toggled by the user. You should use checkboxes when presenting users with a group of selectable options that are not mutually exclusive.

CheckBox

Radio button Similar to checkboxes, except that only one option can be selected in the group.

RadioGroup RadioButton

Toggle button An on/off button with a light indicator. ToggleButton

Spinner A drop-down list that allows users to select one value from a set.

Spinner

Pickers A dialog for users to select a single value for a set by using up/down buttons or via a swipe gesture. Use aDatePickercode> widget to enter the values for the date (month, day, year) or a TimePicker widget to enter the values for a time (hour, minute, AM/PM), which will be formatted automatically for the user's locale.

DatePicker,TimePicker

TEXTFIELD

• <EditText android:layout_width="match_parent“

android:layout_height="wrap_content" android:hint="@string/subject" />

BACKGROUND COLOR

android:background=“hex-value”

TEXT COLOR

android:textColor=“hex-value”

HINT

android:hint=“string”

TEXT

• android:text=“string”

BUTTON

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_text" ….>

HOW TO MAKE APP INTERACTIVE?Two ways:

1. onclick event2. onclick listerner

Onclick event

• <Button xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/button_send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send"

android:onClick=“name_of_event" />

public void sendMessage(View view){ // Do something in response to button click}The method you declare in the android:onClick attribute must have a signature exactly as shown above. Specifically, the method must:• Be public• Return void• Define a View as its only parameter

USING Onclicklistener

Button button = (Button) findViewById(R.id.button_send);button.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { // Do something in response to button click }});

CHECKBOX public void onCheckboxClicked(View view) { // Is the view now checked? boolean checked = ((CheckBox) view).isChecked(); // Check which checkbox was clicked switch(view.getId()) { case R.id.checkbox_meat: if (checked) // Put some meat on the sandwich else // Remove the meat break;

case R.id.checkbox_cheese: if (checked) // Cheese me else // I'm lactose intolerant break; // TODO: Veggie sandwich }}

RADIO BUTTONS

ONCLICK EVENTpublic void onRadioButtonClicked(View view) {

// Is the button now checked?

boolean checked = ((RadioButton) view).isChecked();

// Check which radio button was clicked

switch(view.getId()) {

case R.id.radio_pirates:

if (checked)

// Pirates are the best

break;

case R.id.radio_ninjas:

if (checked)

// Ninjas rule

break;

}}

Important Folders• Whenever we create any Application, there are a number of folders which are created by default.

• These folders contain subfolders and important files associated to them which play a key role in proper UI designing as well as coding.

1. src (source code of activities)

2. Android 4.4 (contains all library files)

3. gen ( auto generated files (R.java))

4. Res (resource)

1. it contains all Drawable components

2. layouts ( it contains the xml file)

3. menu

4. values – string.xml

dimens.xml

style.xml

5. Android Manifest File1. Sdk (min to max)2. Application (contain main activity details)

a. Activityb. Intent filterc. Providersd. Servicese. Receivers etc.

Image View

1. If we want to add an Image in our activity, we need to copy the image to the “Drawable folder” in “res folder”.

2. Drawable folder contains subfolders :1. hdpi ( 240 dpi) is High density pixels %2. ldpi ( 120 dpi) is Low density pixels %3. mdpi ( 160 dpi) is medium density pixels %4. xhdpi ( 320 dpi) is extra high density pixels %

3. Add <imageView> and define different parameters in it.

Toast Message (notification)

• Toast provides simple feedback about an operation in a small popup.

• It only fills the amount of space required for the message and the current activity remains visible and interactive.

• Toast automatically disappears after timeout.

Syntax : Toast toast=Toast.makeText (context, text, duration);

toast.show();

Note:- Toast is instantiated by using makeText() method.

Activity 1 Background= #F00000

text="@string/button_01" textStyle="bold" fontFamily="times new roman" background="#68AD00" textColor="#000000"

text="@string/button_02" textStyle="bold" fontFamily="times new roman" background="#FFF000" textColor="#000000"

Button

Button

Activity 2 layout_width=”30dp” ems="10" hint="@string/Textview" inputType="text" textColor="#000000" background="#FF00FF”

layout_width=”30dp” ems="10" hint="@string/Textview" textColor="#000000" background="#00FF00” inputType= “date”

layout_width=”30dp” ems="10" hint="@string/Textview" textColor="#000000" background="#663300” inputType= “time”

layout_width=”130dp”android:text="Submit"android:textColor="#FFFFFF"android:background="#FF0000"

layout_width=”30dp” ems="10" hint="@string/Textview" textColor="#000000" background="#009900”

Background= #FFFF66