mobile lab 2

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

1

3. Click Next

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

2

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_below="@+id/textViewDisplay"


4

android:layout_toRightOf="@+id/textViewDisplay"

android:text="Display" />

<EditText

android:id="@+id/editTextName"



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)

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

5

Id: btnDisplay

Id: editTextName

Id: textViewDisplay

package com.example.helloactivity;

import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.EditText;import 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.

6

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

7

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

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

8

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_alignParentLeft="true"

android:layout_alignParentRight="true"

android:layout_alignParentTop="true"


android:text="Save" />

<RadioGroup

android:id="@+id/rdbGp1"



android:layout_alignLeft="@+id/btnSave"

android:layout_below="@+id/btnSave"

android:layout_marginLeft="18dp"

android:layout_marginTop="18dp" >

<RadioButton

android:id="@+id/rdb1"



android:checked="true"

android:text="Male" />

9

<RadioButton

android:id="@+id/rdb2"



android:text="Female" />

</RadioGroup>

<CheckBox

android:id="@+id/chkAutoSave"



android:layout_alignLeft="@+id/rdbGp1"

android:layout_below="@+id/rdbGp1"


android:text="Auto save" />

<ToggleButton

android:id="@+id/toggle1"



android:layout_alignRight="@+id/chkAutoSave"

android:layout_below="@+id/chkAutoSave"


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 android.app.Activity;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.CheckBox;import android.widget.RadioButton;import 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");

elseDisplayToast("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");

elseDisplayToast("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

Documents

mobile lab 2