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

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. 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.

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:
<?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="#FFFE00"
android:orientation="vertical" >

<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
<?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: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>

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

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

android.app.Fragment;
android.os.Bundle;
android.view.LayoutInflater;
android.view.View;
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
import
import
import
import

android.app.Fragment;
android.os.Bundle;
android.view.LayoutInflater;
android.view.View;
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.

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

3. Click Next

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

10

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

11

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
import
import
import
import

android.app.AlertDialog;
android.app.Dialog;
android.app.DialogFragment;
android.content.DialogInterface;
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())

12

.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.

13