Lab 4 FP533 Student

7/18/2019 Lab 4 FP533 Student

http://slidepdf.com/reader/full/lab-4-fp533-student 1/13

1

Lab 4 – Activities and Fragment

Activity 4A: Simple Fragment

1. Select File > New > Android Application Project

2.

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



2

3.

Click Next

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



3

5.

Leave all the settings as default. Click Next.

6.

For the next window, set the value as below



4

7. Then create xml file. In the res/layout folder, right-click on it and select New >

Android XML File

8. Name the new Android XML file as fragment1.xml and click Finish.



5

9. Open fragment1.xml file (located in the res/layout folder). Modify the code as below

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent" android:background="#00FF00" android:orientation="vertical" >

<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="This is fragment #1" android:textColor="#000000" android:textSize="25sp" />

</LinearLayout>

10.

The interface will look as follow.

11. Also in the res/layout folder, add another new file and name it fragment2.xml. Modify it as

follows:


android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#FFFE00"

android:orientation="vertical" >



6

<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="This is fragment #2" android:textColor="#000000"

android:textSize="25sp" />

</LinearLayout>

12. The interface will look as follow.

13.

Open the activity_fragments.xml file and modify the code as below


android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" >

<fragment android:id="@+id/fragment1"

android:name="com.example.fragment.Fragment1" android:layout_width="0px" android:layout_height="match_parent" android:layout_weight="1" />

<fragment android:id="@+id/fragment2" android:name="com.example.fragment.Fragment2" android:layout_width="0px" android:layout_height="match_parent" android:layout_weight="1" />

</LinearLayout>



7

14.

The interface will look as follow

15. Under the com.example.fragment package name, add two Java class files and name

them Fragment1.java and Fragment2.java



8

16.

Open the Fragment2.java file and modify the code as below

package com.example.fragment;

import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;

import android.view.View;import android.view.ViewGroup;

public class Fragment1 extends Fragment {@Override public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {// ---Inflate the layout for this fragment--- return inflater.inflate(R.layout.fragment1, container, false);

}}

17.

Open the Fragment2.java file and modify the code as below package com.example.fragment;

import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;

public class Fragment2 extends Fragment {@Override public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

// ---Inflate the layout for this fragment--- return inflater.inflate(R.layout.fragment2, container, false);}

}

18. Run using Emulator or your handphone.

19. The output is as follow.



9

Activity 4B: Dialog Fragment

1. Select File > New > Android Application Project

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



10

3.

Click Next

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



11

5.

Leave all the settings as default. Click Next.

6.

For the next window, set the value as below and click Finish

7. Under the com.example.dialogfragment package name, add Java class files name as

Fragment1.java



12

8. Open the DialogFragmentActivity .java file and modify the code as below

package com.example.dialogfragment;

import android.app.Activity;import android.os.Bundle;

import android.widget.Toast;

public class DialogFragmentActivity extends Activity {/** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.activity_dialog_fragment);Fragment1 dialogFragment = Fragment1

.newInstance("Are you sure you want to do this?");dialogFragment.show(getFragmentManager(), "dialog");

}

public void doPositiveClick() {// ---perform steps when user clicks on OK--- DisplayToast("User clicks on OK");

}

public void doNegativeClick() {// ---perform steps when user clicks on Cancel--- DisplayToast("User clicks on Cancel");

}

private void DisplayToast(String msg){

Toast.makeText(getBaseContext(), msg,

Toast.LENGTH_SHORT ).show();}

}

9.

Open the Fragment1.java file and modify the code as below

package com.example.dialogfragment;

import android.app.AlertDialog;import android.app.Dialog;import android.app.DialogFragment;import android.content.DialogInterface;import android.os.Bundle;

public class Fragment1 extends DialogFragment {static Fragment1 newInstance(String title) {

Fragment1 fragment = new Fragment1();Bundle args = new Bundle();args.putString("title", title);fragment.setArguments(args);return fragment;

}

@Override public Dialog onCreateDialog(Bundle savedInstanceState) {

String title = getArguments().getString("title");

return new AlertDialog.Builder(getActivity())



13

.setIcon(R.drawable.ic_launcher )

.setTitle(title)

.setPositiveButton("OK", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int whichButton) {

((DialogFragmentActivity) getActivity()).doPositiveClick();

}

}).setNegativeButton("Cancel",

new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog,

int whichButton) {((DialogFragmentActivity) getActivity())

.doNegativeClick();}

}).create();}

}

10.

Run using Emulator or your handphone.

11.

The output is as follow.

Documents

Lab 4 FP533 Student