MBi

Mobile BootCamp Initiative

 Phase One BootCamp
Application Development Fundamentals
Android Hello World
 Language used in android

Functionality UI design
&
Advanced UI features Look n Feel of the App
Activity
 Android Widgets
Button

EditText

ImageView

ImageButton

And many more…..

INPUT OUTPUT
 Android Intents
provides runtime
binding

Intent about=new Intent(getApplicationContext(),About.class);

startActivity(about);
 Android Intents
Intent intent = new Intent(this, DisplayMessageActivity.class);

Parameters
 Context

The Class of the app component to which the system

should deliver the Intent (in this case, the activity that
should be started)

Current Location[context] Destination [Class]

 Android Intents
Carry Collection of Data to another Activity

extras

putExtra
public void sendMessage(View view) {
Intent intent = new Intent(this, DisplayMessageActivity.class);
EditText editText = (EditText) findViewById(R.id.edit_message);
String message = editText.getText().toString();
intent.putExtra(EXTRA_MESSAGE, message);
startActivity(intent);
}
Receive Intent
Intent intent = getIntent();
String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);
 XML codes
<OpeningTag

PropertyName=“value”

PropertyName=“value”

PropertyName=“value”

PropertyName=“value”
>

</ClosingTag>
 XML codes

<OpeningTag <Button
PropertyName=“value” android:id="@+id/btngenrefnumber”

PropertyName=“value” android:layout_width="fill_parent“

PropertyName=“value” android:layout_height="wrap_content"

PropertyName=“value” android:text=“Button" >

>
</ClosingTag> </Button>
 XML codes
<OpeningTag <TextView
PropertyName=“value”
android:text="vertical"
PropertyName=“value” android:layout_width="fill_parent"
android:layout_height="fill_parent"
PropertyName=“value” android:background="#008080“
android:textColor="vertical"
PropertyName=“value”
>
>
</ClosingTag> </ TextView>
 Android layouts
Linear Layout Grid Layout

Absolute layout Table layout

Frame layout Relative layout

A layout defines the visual structure for a user interface,

such as the UI for an activity or app widgets.
 Comments in Android

//single line comments <!-- comments -->

OR
/* multi-
line
Comments */
Android App Deployment

APK FILE
Android App Deployment
Android 4 Major building blocks
Get your hands Dirty
Let’s Start

Building!
 Android Activity
What makes up an activity
 XML Layouts

 Java Class

 Change it to Android Activity

 OnCreate Method

 Link to the XML Layout

 Register all new Activity to the manifest file

 Android Manifest File
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.randomname.costech"
android:versionCode="1"
android:versionName="1.0">
<application android:icon="@drawable/appicon"
android:label="@string/app_name">
<activity android:name=".AppStartmenu"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Think of plane manifest!
 Android Manifest File

<activity android:name=".Startmenu"></activity>
<activity android:name=".About"></activity>
<activity android:name=".Help"></activity>
</application>
<uses-sdk android:minSdkVersion="8" />
</manifest>

Think of plane manifest!

 EditText Widget

CAPTURE INPUTS FROM USER

 EditText Widget
On XML

Basic Properties for EditText

<EditText
android:id="@+id/email_address"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/email_hint"
android:inputType="textEmailAddress“
/>
 EditText Widget
On XML
Specify the Keyboard Type
 Use android:inputType="textEmailAddress“
property
 "text“
Normal text keyboard.
 "textEmailAddress“
Normal text keyboard with the @ character.
 "textUri“
Normal text keyboard with the / character.
 EditText Widget
On XML

Specify the Keyboard Type

 Use android:inputType="textEmailAddress“
property
 "number“
Basic number keypad.
 "phone“
Phone-style keypad.
 EditText Widget
On XML
Controlling other Behaviors
 android:inputType also allows you to specify
certain keyboard behaviors

 "textCapSentences“
Normal text keyboard that capitalizes the first
letter for each new sentence.
 EditText Widget
On XML
Controlling other Behaviors
 "textCapWords“
Normal text keyboard that capitalizes every
word. Good for titles or person names.

 "textAutoCorrect“
Normal text keyboard that corrects commonly
misspelled words.
 EditText Widget
On XML
Controlling other Behaviors
 "textPassword“
Normal text keyboard, but the characters
entered turn into dots.
 "textMultiLine“
Normal text keyboard that allow users to input
long strings of text that include line breaks
(carriage returns).
 EditText Widget
On XML

 Example on Controlling Keyboard Behavior using more

than one property value

 Use | to include more than one property value

<EditText
android:id="@+id/postal_address"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/postal_address_hint“
android:inputType=
"textPostalAddress|textCapWords|textNoSuggestions" />
 EditText Widget
On Java

 Create a widget(EditText) Java object

EditText myedittext=new EditText(getApplicationContext());

OR

 EditText myedittext;
 EditText Widget
On Java

 Link the object with the UI from XML Layout

 Use findViewById

EditText myedittext=(EditText)findViewById(R.id.edttext);
 Add Cast to specify
EditText
the type ofWidget
View

On Java
 EditText Widget
On Java

 Get the Content of the EditText from User Inputs

 Assign to a variable

String textToshare=myedittext.getText().toString();
 TextView Widget

 Displays text to the user and optionally allows

them to edit it.

 A TextView is a complete text editor

 However the basic class is configured to not

allow editing.
 TextView Widget
On XML

<TextView
android:id="@+id/textView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content“
android:text="GoSocial"/>
 TextView Widget
On Java

 Create a widget(TextView) Java object

TextView mytextview=new TextView(getApplicationContext());

OR

 TextView mytextview;
 TextView Widget
On Java

 Link the object with the UI from XML Layout

 Use findViewById

TextView mytextview=(TextView)findViewById(R.id.textview1);

 Add Cast to specify the type of View

 TextView Widget
On Java

 Get the Content of the TextView from User Inputs

 Assign to a variable

String textToshare=mytextview.getText().toString();

 Change the content of the TextView use

 TextView Widgettext");
mytextview.setText("new
On Java
 Android ImageView

 Used to Display Image

on Android UI

 It can also receives

Click events

 Image displayed can

be static or dynamic
images
 Android ImageView
On XML

<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
Button Widget
 Button Widget
On XML

<Button
android:id="@+id/btngo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Go"/>
 Button Widget
On Java
 Create a widget(Button) Java object

 Use a keyword new.

Button mybutton =new Button(getApplicationContext());

OR

 Button mybutton;
 Button Widget
On Java

 Link the object with the UI from XML Layout

 Use findViewById

Button mybutton=(Button) findViewById(R.id.button1);

 Add Cast to specify
Button Widget
the type of View
On Java
 Button Click Event
On Java

 Direct setting of click event to a button

 Use of implements on class declaration

 Use a Separate Method associate with the

onClick XML Property
 Button Click Event
On Java

 Direct setting of click event to a button

//handle click event of the button

mybutton.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub

}
});
 Button Click Event
On Java

 Use of implements on class declaration

public class MainActivity extends Activity implements

OnClickListener{

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
} Button Click Event
On Java
 Button Click Event
On Java

 Use a Separate Method associate with the

onClick XML Property

 Commonly used to implement event listener

for widget of the same type

 Example having more than one buttons on the

same activity
 Button Click Event
On XML

 All widget must have the same onClick property’s

value
<Button <Button
android:id="@+id/btn1" android:id="@+id/btn2"

android:layout_width="fill_parent" android:layout_width="fill_parent"

android:layout_height="wrap_content“ android:layout_height="wrap_content“

android:text=“Send” android:text=“Next”

android:onClick="ButtonClicked" /> android:onClick="ButtonClicked" />

 Button Click Event
On Java
 Create a Method to Match the onClick property’s value

 [ButtonClicked]
public void ButtonClicked(View v){
switch (v.getId()) {
case R.id.btn1:
break;
case R.id.btn2:
break;
default:
break;
}
}
Android Toast
 Android Toast
On Java
Implementation of Toast on Android Activity
Parameters

 Context

 Message

 Duration

Toast.makeText(getApplicationContext(), "Hello!",
Toast.LENGTH_LONG).show();
 Android Intents
Functions of Intents are:

 Connect Activities

 Transfer data from one activity to the other

 Launch another activity

 Launch Android Services

 Android Intents
Connecting Activities

 Navigate from one activity to the other

 Parameters
– Context
– Destination class/activity

Intent intent=new Intent(getApplicationContext(),

MainActivity.class);
startActivity(intent);
 Android Intents
Transfer data

 It uses bundle to transfer data from one Activity to the

other

 Activity that sends data

Intent myintent=new Intent(getApplicationContext(),ItemSelected.class);

Bundle bundle=new Bundle();
bundle.putString("itemselected", selecteditem);
myintent.putExtras(bundle);
startActivity(myintent);
 Android Intents
Transfer data

 It uses bundle to transfer data from one Activity to

the other

 Activity that receives data

Bundle bundle=getIntent().getExtras();
String item=bundle.getString("itemselected");
 Android Intents
Launch another Application

 Use Intent to Launch Camera Application

// use standard intent to capture an image

Intent captureIntent = new Intent(
MediaStore.ACTION_IMAGE_CAPTURE);
startActivityForResult(captureIntent, CAMERA_CAPTURE);
Android Options Menu
 Android Options Menu
 Adding Actions more
actions to the
Applications

 Less Important Actions

 Saves Screen Space

and Improves UI
Design

 Options Menu can be

Re-used to several
activities
 Android Options Menu
On XML-Menu Folder
<menu
xmlns:android="http://schemas.android.com/apk/res/an
droid" >

<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:showAsAction="never"
android:title="@string/action_settings"/>

</menu>
 Android Options Menu
On XML-Menu Folder

 Key Options Menu[item] properties on XML

 Id
android:id="@+id/action_settings"
 orderInCategory
android:orderInCategory="1"
 Android Options Menu
On XML-Menu Folder

 Key Options Menu[item] properties on XML

 showAsAction
android:showAsAction="never"
 Tittle
android:title="@string/action_settings"/>
 Icon
 Android Options Menu
On Java

To implements Options Menu Two methods are

needed within a Java class

 OnCreateOptionsMenu
To display an optionsmenu

 OnOptionsItemSelected
Handle events when one item of the optionsmenu is
selected
 Android Options Menu
On Java

 OnCreateOptionsMenu
To display an optionsmenu

@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflate=getMenuInflater();
inflate.inflate(R.menu.main_activity_actions, menu);
return true;
} Android Options Menu
On Java
 Android Options Menu
On Java

 OnOptionsItemSelected
Handle events when one item of the optionsmenu is selected

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// TODO Auto-generated method stub
switch (item.getItemId()) {
case R.id.settings:
Toast.makeText(getApplicationContext(), “Settings clicked", Toast.LENGTH_LONG).show();
break;
default:
break;
}
return super.onOptionsItemSelected(item);
}
Android Options Menu
On Java
Android AppBar
Android ListView
 Android ListView
On XML

 ListView
<ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>

 List Designer or List data

 Android ListView
On Java

 Data Source
Can be an Array, External File or data from Database

 ArrayAdapter
ArrayAdapter<String> adapter;

 Reference to a ListView
ListView mylistview=(ListView) findViewById(R.id.listView1);
 Listener
onItemClickListener
 Android ListView
On Java

 ListView with the Search or

filter feature

 Implemented on list with

many items

 Filter data source as you

type
Android Tabs
 Android Tabs
On XML

 Drag and drop TabHost from Composite folder

 Key Tags
 Tabhost
 TabWidget
 FrameLayout
 LinearLayout
 Android Tabs

Tab1 Tab2 Tab3 Tab Widgets

TabHost
FrameLayout1 FrameLayouts

12
 Android Tabs
On Java

 Tab Setup or Tab Specification

final TabHost mytabhost = (TabHost) findViewById(R.id.tabhost);

mytabhost.setup();
TabSpec tab1 = mytabhost.newTabSpec("Specfortab1");
tab1.setIndicator("Posts",R.drawable.ic_menu_info_details));
tab1.setContent(R.id.tab1);
mytabhost.addTab(tab1);
Android ScrollView
Android ScrollView
 Android ScrollView
On XML
 ScrollView for one widget

 Surrounds the widget with the scrollview

<ScrollView
android:id="@+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<TextView
android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/intro_text"/>
</ScrollView>
 Android ScrollView
On XML

 ScrollView for more than one widget

 Surrounds the widget with the ScrollView and

LinearLayout

 Note IDE above Froyo ScrollView comes with

the pre-defined LinearLayout
 Android ScrollView
On XML
<ScrollView
android:id="@+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TextView
android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/intro_text"/>
</LinearLayout>
</ScrollView>
Android AlertDialog
Android AlertDialog
 Android AlertDialog
Icon

Title

Negative
Message Button

Neutral
Positive Button
Button
5
Android AlertDialog
Android InputDialog
Android SeekBar Widget
Android Date Picker
Android Time Picker