Android
Introduction
Familiarize with the main types of GUI components
Concepts:
Layouts
Widgets
Menus
Compiled By [Link] L 1
Linear Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[Link]
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:text="red"
android:gravity="center_horizontal"
[…………………….]
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:text="row one"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:text="row two"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
[…………………………………..]
</LinearLayout>
</LinearLayout>
[Link]
Compiled By [Link] L 2
Relative Layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="[Link]
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Type here:"/>
<EditText
android:id="@+id/entry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:drawable/editbox_background"
android:layout_below="@id/label"/>
<Button
android:id="@+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/entry"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dip"
android:text="OK" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/ok"
android:layout_alignTop="@id/ok"
android:text="Cancel" />
</RelativeLayout>
Compiled By [Link] L 3
Table Layout
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="[Link]
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:layout_column="1"
android:text="Open..."
android:padding="3dip" />
<TextView
android:text="Ctrl-O"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:text="Save..."
android:padding="3dip" />
<TextView
android:text="Ctrl-S"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:text="Save As..."
android:padding="3dip" />
<TextView
android:text="Ctrl-Shift-S"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090" />
[………………………]
</TableLayout>
Compiled By [Link] L 4
TabLayout
One activity per tab
Create new Project
HelloTabs
Compiled By [Link] L 5
Fill in the OnCreate()
method
public class ArtistsActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
TextView textview = new TextView(this);
Quick and dirty
[Link]("This is the Artists tab");
setContentView(textview); “by hand”
} like in
} HelloWorld
Copy and Paste ArtistsActivity into two more activities:
AlbumsActivity and
SongsActivity
Compiled By [Link] L 6
Create
./res/drawable/ic_tab_artists.x
ml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="[Link]
<!-- When selected, use grey -->
<item android:drawable="@drawable/ic_tab_artists_grey"
android:state_selected="true" />
<!-- When not selected, use white-->
<item android:drawable="@drawable/ic_tab_artists_white" />
</selector>
StateListDrawable object
that displays different
images for different
states of a View
Compiled By [Link] L 7
Main Layout
<?xml version="1.0" encoding="utf-8"?>
<TabHost
xmlns:android="[Link]
k/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>
Compiled By [Link] L 8
OnCreate() for HelloTabs
(main activity)
public void onCreate(Bundle savedInstanceState)
Main Activity is
[Link](savedInstanceState);
setContentView([Link]); a TabActivity –
Resources res = getResources(); // Resource object to get Drawables
TabHost tabHost = getTabHost(); // The activity TabHost
has a TabHost
[Link] spec; // Resusable TabSpec for each tab
Intent intent; // Reusable Intent for each tab
// Create an Intent to launch an Activity for the tab (to be reused)
intent = new Intent().setClass(this, [Link]);
// Initialize a TabSpec for each tab and add it to the TabHost
spec = [Link]("artists").setIndicator("Artists",
[Link]([Link].ic_tab_artists)) Builder
.setContent(intent);
[Link](spec); mapping the
// Do the same for the other tabs
[………………………]
resources to
}
[Link](2);
the tab
Select Tab 2
Compiled By [Link] L 9
Run it!
Compiled By [Link] L 10
List View
List of scrollable items
Application will inherit from
ListActivity rather than
Activity
Create
./res/layout/list_item.xml
Layout for each item
Compiled By [Link] L 11
Override the OnCreate
method
public class HelloListView extends ListActivity { Setup the list for
/** Called when the activity is first created. */
this application,
@Override with this layout
public void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState); and this content
setListAdapter(new ArrayAdapter<String>(this, [Link].list_item, COUNTRIES));
ListView lv = getListView();
[Link](true); Enables filtering
by keyboard
[Link](new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
// When clicked, show a toast with the TextView text
[Link](getApplicationContext(), ((TextView) view).getText(),
Toast.LENGTH_SHORT).show();
}
});
}
}
Small Toast
showing the text
in the clicked item
for a short time
Compiled By [Link] L 12
Run it!
Compiled By [Link] L 13
Date Picker
Will display a dialogbox
allowing to change the
date
Compiled By [Link] L 14
Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="[Link]
/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:id="@+id/dateDisplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""/>
<Button android:id="@+id/pickDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Change the date"/>
</LinearLayout>
Compiled By [Link] L 15
OnCreate( )
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link]);
// capture our View elements
mDateDisplay = (TextView) findViewById([Link]);
mPickDate = (Button) findViewById([Link]);
// add a click listener to the button
[Link](new [Link]() {
public void onClick(View v) {
showDialog(DATE_DIALOG_ID);
}
});
// get the current date
final Calendar c = [Link]();
mYear = [Link]([Link]);
mMonth = [Link]([Link]);
mDay = [Link](Calendar.DAY_OF_MONTH);
// display the current date (this method is below)
updateDisplay();
}
Compiled By [Link] L 16
updateDisplay( )
// updates the date in the TextView
private void updateDisplay() {
[Link](
new StringBuilder()
// Month is 0 based so add 1
.append(mMonth + 1).append("-")
.append(mDay).append("-")
.append(mYear).append(" "));
}
Compiled By [Link] L 17
[Link]
ner( )
// the callback received when the user "sets" the date in the dialog
private [Link] mDateSetListener =
new [Link]() {
public void onDateSet(DatePicker view, int year,
int monthOfYear, int dayOfMonth) {
mYear = year;
mMonth = monthOfYear;
mDay = dayOfMonth;
updateDisplay();
}
};
Compiled By [Link] L 18
onCreateDialog( )
@Override
protected Dialog onCreateDialog(int id) {
switch (id) {
case DATE_DIALOG_ID:
return new DatePickerDialog(this,
mDateSetListener,
mYear, mMonth, mDay);
}
return null;
}
Compiled By [Link] L 19
Run it!
Compiled By [Link] L 20
Custom Buttons
Edit Text
Check Boxes
Radio Boxes
Toggle Button
Rating Bar
Compiled By [Link] L 21
Custom Button
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="[Link]
<item android:drawable="@drawable/android_pressed"
android:state_pressed="true" />
<item android:drawable="@drawable/android_focused"
android:state_focused="true" />
<item android:drawable="@drawable/android_normal" />
</selector>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="@drawable/android_button" />
final Button button = (Button) findViewById([Link]);
[Link](new OnClickListener() {
public void onClick(View v) {
// Perform action on clicks
[Link]([Link], "Beep Bop",
Toast.LENGTH_SHORT).show();
}
});
Compiled By [Link] L 22
Edit Text
<EditText
android:id="@+id/edittext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
final EditText edittext = (EditText) findViewById([Link]);
[Link](new OnKeyListener() {
public boolean onKey(View v, int keyCode, KeyEvent event) {
// If the event is a key-down event on the "enter" button
if (([Link]() == KeyEvent.ACTION_DOWN) &&
(KeyEvent.KEYCODE_ENTER)) {
// Perform action keyCode == on key press
[Link]([Link], [Link](),
Toast.LENGTH_SHORT).show();
return true;
}
return false;
}
});
Compiled By [Link] L 23
Check Box
<CheckBox android:id="@+id/checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="check it out" />
final CheckBox checkbox = (CheckBox) findViewById([Link]);
[Link](new OnClickListener() {
public void onClick(View v) {
// Perform action on clicks, depending on whether it's now checked
if (((CheckBox) v).isChecked()) {
[Link]([Link], "Selected",
Toast.LENGTH_SHORT).show();
} else {
[Link]([Link], "Not selected",
Toast.LENGTH_SHORT).show();
}
}
});
Compiled By [Link] L 24
Radio Button
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton android:id="@+id/radio_red"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Red" />
<RadioButton android:id="@+id/radio_blue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Blue" />
</RadioGroup>
private OnClickListener radio_listener = new OnClickListener() {
public void onClick(View v) {
// Perform action on clicks
RadioButton rb = (RadioButton)
[Link]([Link], [Link](), Toast.LENGTH_SHORT).show();
}
};
final RadioButton radio_red = (RadioButton) findViewById([Link].radio_red);
final RadioButton radio_blue = (RadioButton) findViewById([Link].radio_blue);
radio_red.setOnClickListener(radio_listener);
radio_blue.setOnClickListener(radio_listener);
Compiled By [Link] L 25
Toggle Button
<ToggleButton android:id="@+id/togglebutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="Vibrate on"
android:textOff="Vibrate off"/>
final ToggleButton togglebutton = (ToggleButton) findViewById([Link]);
[Link](new OnClickListener() {
public void onClick(View v) {
// Perform action on clicks
if ([Link]()) {
[Link]([Link], "Checked", Toast.LENGTH_SHORT).show();
} else {
[Link]([Link], "Not checked", Toast.LENGTH_SHORT).show();
}
}
});
Compiled By [Link] L 26
Rating Bar
<RatingBar android:id="@+id/ratingbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:stepSize="1.0"/>
final RatingBar ratingbar = (RatingBar) findViewById([Link]);
[Link](new
OnRatingBarChangeListener() {
public void onRatingChanged(RatingBar ratingBar, float rating, boolean
fromUser) {
[Link]([Link], "New Rating: " + rating,
Toast.LENGTH_SHORT).show();
}
});
Compiled By [Link] L 27
WebView
• Making a window for viewing web pages
/res/layout/[Link]
<?xml version="1.0" encoding="utf-8"?>
<WebView
xmlns:android="[Link]
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
Compiled By [Link] L 28
OnCreate( )
WebView mWebView;
public void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link]);
mWebView = (WebView) findViewById([Link]);
[Link]().setJavaScriptEnabled(true);
[Link]("[Link]
}
Compiled By [Link] L 29
AndroidManifest
<uses-permission android:name="[Link]" />
<activity android:name=".HelloWebView"
android:label="@string/app_name"
android:theme="@android:style/[Link]">
Compiled By [Link] L 30
Run it!
Compiled By [Link] L 31
For the MapView
Generate an API Key
Thank you for signing up for an Android Maps API key!
Your key is:
0sfwSFw1BU4WGRreaBYtss4jGuPccZhhq7WDOCg
This key is good for all apps signed with your certificate whose
fingerprint is:
[Link]
Here is an example xml layout to get you started:
<[Link]
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:apiKey="0sfwSFw1BU4WGRreaBYtss4jGuPccZhhq7
WDOCg" />
Compiled By [Link] L 32