Android

Introduction
Familiarize with the main types of GUI components
Concepts:
 Layouts
 Widgets
 Menus

Compiled By Mr.Abdisa L 1
Linear Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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>

http://developer.android.com/resources/tutorials/views/hello-linearlayout.html

Compiled By Mr.Abdisa L 2
Relative Layout
 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
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 Mr.Abdisa L 3
Table Layout
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
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 Mr.Abdisa L 4
TabLayout
 One activity per tab
 Create new Project
HelloTabs

Compiled By Mr.Abdisa L 5
Fill in the OnCreate()
method
public class ArtistsActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

TextView textview = new TextView(this);

Quick and dirty
textview.setText("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 Mr.Abdisa L 6
Create
./res/drawable/ic_tab_artists.x
ml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 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 Mr.Abdisa L 7
Main Layout
 <?xml version="1.0" encoding="utf-8"?>
<TabHost
xmlns:android="http://schemas.android.com/ap
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 Mr.Abdisa L 8
OnCreate() for HelloTabs
(main activity)
public void onCreate(Bundle savedInstanceState)
Main Activity is
super.onCreate(savedInstanceState);
setContentView(R.layout.main); a TabActivity –
Resources res = getResources(); // Resource object to get Drawables
TabHost tabHost = getTabHost(); // The activity TabHost
has a TabHost
TabHost.TabSpec 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, ArtistsActivity.class);
// Initialize a TabSpec for each tab and add it to the TabHost
spec = tabHost.newTabSpec("artists").setIndicator("Artists",
res.getDrawable(R.drawable.ic_tab_artists)) Builder
.setContent(intent);
tabHost.addTab(spec); mapping the
// Do the same for the other tabs
[………………………]
resources to
}
tabHost.setCurrentTab(2);
the tab

Select Tab 2

Compiled By Mr.Abdisa L 9
Run it!

Compiled By Mr.Abdisa 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 Mr.Abdisa 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) {
super.onCreate(savedInstanceState); and this content
setListAdapter(new ArrayAdapter<String>(this, R.layout.list_item, COUNTRIES));

ListView lv = getListView();
lv.setTextFilterEnabled(true); Enables filtering
by keyboard
lv.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
// When clicked, show a toast with the TextView text
Toast.makeText(getApplicationContext(), ((TextView) view).getText(),
Toast.LENGTH_SHORT).show();
}
});
}
}
Small Toast
showing the text
in the clicked item
for a short time
Compiled By Mr.Abdisa L 12
Run it!

Compiled By Mr.Abdisa L 13
Date Picker
 Will display a dialogbox
allowing to change the
date

Compiled By Mr.Abdisa L 14
 Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com
/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 Mr.Abdisa L 15
OnCreate( )
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// capture our View elements
mDateDisplay = (TextView) findViewById(R.id.dateDisplay);
mPickDate = (Button) findViewById(R.id.pickDate);
// add a click listener to the button
mPickDate.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
showDialog(DATE_DIALOG_ID);
}
});
// get the current date
final Calendar c = Calendar.getInstance();
mYear = c.get(Calendar.YEAR);
mMonth = c.get(Calendar.MONTH);
mDay = c.get(Calendar.DAY_OF_MONTH);
// display the current date (this method is below)
updateDisplay();
}

Compiled By Mr.Abdisa L 16
updateDisplay( )
// updates the date in the TextView
private void updateDisplay() {
mDateDisplay.setText(
new StringBuilder()
// Month is 0 based so add 1
.append(mMonth + 1).append("-")
.append(mDay).append("-")
.append(mYear).append(" "));
}

Compiled By Mr.Abdisa L 17
DatePickerDialog.OnDateSetListe
ner( )
// the callback received when the user "sets" the date in the dialog
private DatePickerDialog.OnDateSetListener mDateSetListener =
new DatePickerDialog.OnDateSetListener() {

public void onDateSet(DatePicker view, int year,

int monthOfYear, int dayOfMonth) {
mYear = year;
mMonth = monthOfYear;
mDay = dayOfMonth;
updateDisplay();
}
};

Compiled By Mr.Abdisa 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 Mr.Abdisa L 19
Run it!

Compiled By Mr.Abdisa L 20
 Custom Buttons
 Edit Text
 Check Boxes
 Radio Boxes
 Toggle Button
 Rating Bar

Compiled By Mr.Abdisa L 21
Custom Button
 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<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(R.id.button);
button.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// Perform action on clicks
Toast.makeText(HelloFormStuff.this, "Beep Bop",
Toast.LENGTH_SHORT).show();
}
});

Compiled By Mr.Abdisa L 22
Edit Text
 <EditText
android:id="@+id/edittext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>

 final EditText edittext = (EditText) findViewById(R.id.edittext);

edittext.setOnKeyListener(new OnKeyListener() {
public boolean onKey(View v, int keyCode, KeyEvent event) {
// If the event is a key-down event on the "enter" button
if ((event.getAction() == KeyEvent.ACTION_DOWN) &&
(KeyEvent.KEYCODE_ENTER)) {
// Perform action keyCode == on key press
Toast.makeText(HelloFormStuff.this, edittext.getText(),
Toast.LENGTH_SHORT).show();
return true;
}
return false;
}
});

Compiled By Mr.Abdisa 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(R.id.checkbox);

checkbox.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// Perform action on clicks, depending on whether it's now checked
if (((CheckBox) v).isChecked()) {
Toast.makeText(HelloFormStuff.this, "Selected",
Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(HelloFormStuff.this, "Not selected",
Toast.LENGTH_SHORT).show();
}
}
});

Compiled By Mr.Abdisa 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)
Toast.makeText(HelloFormStuff.this, rb.getText(), Toast.LENGTH_SHORT).show();
}
};
 final RadioButton radio_red = (RadioButton) findViewById(R.id.radio_red);
final RadioButton radio_blue = (RadioButton) findViewById(R.id.radio_blue);
radio_red.setOnClickListener(radio_listener);
radio_blue.setOnClickListener(radio_listener);

Compiled By Mr.Abdisa 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(R.id.togglebutton);
togglebutton.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// Perform action on clicks
if (togglebutton.isChecked()) {
Toast.makeText(HelloFormStuff.this, "Checked", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(HelloFormStuff.this, "Not checked", Toast.LENGTH_SHORT).show();
}
}
});
Compiled By Mr.Abdisa 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(R.id.ratingbar);

ratingbar.setOnRatingBarChangeListener(new
OnRatingBarChangeListener() {
public void onRatingChanged(RatingBar ratingBar, float rating, boolean
fromUser) {
Toast.makeText(HelloFormStuff.this, "New Rating: " + rating,
Toast.LENGTH_SHORT).show();
}
});

Compiled By Mr.Abdisa L 27
 WebView
• Making a window for viewing web pages

/res/layout/main.xml
 <?xml version="1.0" encoding="utf-8"?>
<WebView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>

Compiled By Mr.Abdisa L 28
OnCreate( )
 WebView mWebView;
 public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

mWebView = (WebView) findViewById(R.id.webview);

mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.loadUrl("http://www.google.com");
}

Compiled By Mr.Abdisa L 29
 AndroidManifest
 <uses-permission android:name="android.permission.INTERNET" />
 <activity android:name=".HelloWebView"
android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar">

Compiled By Mr.Abdisa L 30
Run it!

Compiled By Mr.Abdisa 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:
D6:0A:9A:E8:24:D1:D7:8C:F5:68:20:7D:67:40:3A:01

Here is an example xml layout to get you started:

<com.google.android.maps.MapView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:apiKey="0sfwSFw1BU4WGRreaBYtss4jGuPccZhhq7
WDOCg" />

Compiled By Mr.Abdisa L 32