Lab 2 Android Navigation and

Interface Design
Activity 2A:
1. Select File > New > Android Application Project

2. Next a dialog box Application Name is appearing. Set the value as below

3. Click Next

4. At this point, you are able to set your application icon.

5. Leave all the settings as default. Click Next.

6. For the next window, set the value as below

3

7. Open activity_hello.xml file (located in the res/layout folder). Modify the code as below
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.helloactivity.HelloActivity" >
<TextView
android:id="@+id/textViewDisplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="23dp"
android:layout_marginTop="30dp"
android:text="Name: " />
<Button
android:id="@+id/buttonDisplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textViewDisplay"
android:layout_marginTop="44dp"

android:layout_toRightOf="@+id/textViewDisplay"
android:text="Display" />
<EditText
android:id="@+id/editTextName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="@+id/textViewDisplay"
android:ems="10" />
</RelativeLayout>

8. The output should be as follow (Click the Graphical Layout tab to view the output)

Id: textViewDisplay
Id: editTextName

Id: btnDisplay
9. Open the HelloActivity.java file and modify the code as below

package com.example.helloactivity;
import
import
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.View;
android.view.View.OnClickListener;
android.widget.Button;
android.widget.EditText;
android.widget.TextView;

public class HelloActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_hello);
Button displayButton = (Button)
findViewById(R.id.buttonDisplay);
displayButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
EditText editName = (EditText)
findViewById(R.id.editTextName);
TextView textDisplay = (TextView)
findViewById(R.id.textViewDisplay);
String nameToDisplay =
editName.getText().toString();
textDisplay.setText("Hello " +
nameToDisplay);
}
});
}
}

10. Run HelloActivity using Emulator or your handphone.

11. The output is as follow.

Activity 2B:
Use Button, EditText, CheckBox, ToggleButton, RadioButton, and RadioGroup Views.
1. Select File > New > Android Application Project
2. Next a dialog box Application Name is appearing. Set the value as below

3. Click Next

4. At this point, you are able to set your application icon.

5. Leave all the settings as default. Click Next.

6. For the next window, set the value as below

7. Open main.xml file (located in the res/layout folder). Modify the code as below
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.basicview.BasicView" >
<Button
android:id="@+id/btnSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginTop="15dp"
android:text="Save" />
<RadioGroup
android:id="@+id/rdbGp1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/btnSave"
android:layout_below="@+id/btnSave"
android:layout_marginLeft="18dp"
android:layout_marginTop="18dp" >
<RadioButton
android:id="@+id/rdb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Male" />

<RadioButton
android:id="@+id/rdb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Female" />
</RadioGroup>
<CheckBox
android:id="@+id/chkAutoSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/rdbGp1"
android:layout_below="@+id/rdbGp1"
android:layout_marginTop="36dp"
android:text="Auto save" />
<ToggleButton
android:id="@+id/toggle1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/chkAutoSave"
android:layout_below="@+id/chkAutoSave"
android:layout_marginTop="17dp"
android:text="ToggleButton" />
</RelativeLayout>

8. The output should be as follow (Click the Graphical Layout tab to view the output)

9. Open BasicView.java file and modify the code as below

package com.example.basicview;
import
import
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.View;
android.widget.Button;
android.widget.CheckBox;
android.widget.RadioButton;
android.widget.RadioGroup;

10

import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.Toast;
import android.widget.ToggleButton;
public class BasicView extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// ---Button view--Button btnSave = (Button) findViewById(R.id.btnSave);
btnSave.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
DisplayToast("You have clicked the Save
button");
}
});
// ---RadioButton--RadioGroup radioGroup = (RadioGroup)
findViewById(R.id.rdbGp1);
radioGroup.setOnCheckedChangeListener(new
OnCheckedChangeListener() {
public void onCheckedChanged(RadioGroup group, int
checkedId) {
RadioButton rb1 = (RadioButton)
findViewById(R.id.rdb1);
if (rb1.isChecked()) {
DisplayToast("Male checked!");
} else {
DisplayToast("Female checked!");
}
}
});
// ---CheckBox--CheckBox checkBox = (CheckBox)
findViewById(R.id.chkAutoSave);
checkBox.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
if (((CheckBox) v).isChecked())
DisplayToast("CheckBox is checked");
else
DisplayToast("CheckBox is unchecked");
}
});
// ---ToggleButton--ToggleButton toggleButton = (ToggleButton)
findViewById(R.id.toggle1);
toggleButton.setOnClickListener(new
View.OnClickListener() {
public void onClick(View v) {
if (((ToggleButton) v).isChecked())
DisplayToast("Toggle button is On");
else
DisplayToast("Toggle button is Off");

11

}
});
}// end onCreate
private void DisplayToast(String msg) {
Toast.makeText(getBaseContext(), msg,
Toast.LENGTH_SHORT).show();
}
}

10. Run BasicView using Emulator or your handphone.

11. The output is as follow.

12