Android DialogFragment Tutorial

In this tutorial, you will learn how to implement a DialogFragment in your Android application. A DialogFragment is a fragment that displays a dialog window, floating on top of its activity’s window. This fragment contains a Dialog object, which it displays as appropriate based on the fragment’s state. Alternatively, you can create an entirely custom dialog, such as an AlertDialog, with its own content. We will create buttons that will show a DialogFragment and a custom Alert DialogFragment.

Create a new project in Eclipse File > New > Android Application Project. Fill in the details and name your project DialogFragmentTutorial.

Application Name : DialogFragmentTutorial

Project Name : DialogFragmentTutorial

Package Name : com.androidbegin.dialogfragmenttutorial

Open your MainActivity.java and paste the following code.

MainActivity.java

package com.androidbegin.dialogfragmenttutorial;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends FragmentActivity {

	Button dfragbutton;
	Button alertdfragbutton;
	FragmentManager fm = getSupportFragmentManager();

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// Get the view from activity_main.xml
		setContentView(R.layout.activity_main);

		// Locate the button in activity_main.xml
		dfragbutton = (Button) findViewById(R.id.dfragbutton);
		alertdfragbutton = (Button) findViewById(R.id.alertdfragbutton);

		// Capture button clicks
		dfragbutton.setOnClickListener(new OnClickListener() {
			public void onClick(View arg0) {
				DFragment dFragment = new DFragment();
				// Show DialogFragment
				dFragment.show(fm, "Dialog Fragment");
			}
		});

		// Capture button clicks
		alertdfragbutton.setOnClickListener(new OnClickListener() {
			public void onClick(View arg0) {
				AlertDFragment alertdFragment = new AlertDFragment();
				// Show Alert DialogFragment
				alertdFragment.show(fm, "Alert Dialog Fragment");
			}
		});
	}
}

In this activity, we have created two buttons that will show different dialog fragments. The first button will show a simple DialogFragment and another with a custom Alert DialogFragment.

Next, create an XML graphical layout for the MainActivity. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file activity_main.xml and paste the following code.

activity_main.xml

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

    <Button
        android:id="@+id/dfragbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="@string/dialogfragment" />

    <Button
        android:id="@+id/alertdfragbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/dfragbutton"
        android:layout_centerInParent="true"
        android:text="@string/alertdialogfragment" />

</RelativeLayout>

Next, create a fragment. Go to File > New > Class and name it DFragment.java. Select your package named com.androidbegin.dialogfragmenttutorial and click Finish.

Open your DFragment.java and paste the following code.

DFragment.java

package com.androidbegin.dialogfragmenttutorial;

import android.os.Bundle;
import android.support.v4.app.DialogFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class DFragment extends DialogFragment {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View rootView = inflater.inflate(R.layout.dialogfragment, container,
				false);
		getDialog().setTitle("DialogFragment Tutorial");		
		// Do something else
		return rootView;
	}
}

Next, create an XML graphical layout for the DialogFragment. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file dialogfragment.xml and paste the following code.

dialogfragment.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="10dp"
        android:text="@string/welcome" />

</RelativeLayout>

Next, create another fragment. Go to File > New > Class and name it AlertDFragment.java. Select your package named com.androidbegin.dialogfragmenttutorial and click Finish.

Open your AlertDFragment.java and paste the following code.

AlertDFragment.java

package com.androidbegin.dialogfragmenttutorial;

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

public class AlertDFragment extends DialogFragment {
	@Override
	public Dialog onCreateDialog(Bundle savedInstanceState) {
		return new AlertDialog.Builder(getActivity())
				// Set Dialog Icon
				.setIcon(R.drawable.androidhappy)
				// Set Dialog Title
				.setTitle("Alert DialogFragment")
				// Set Dialog Message
				.setMessage("Alert DialogFragment Tutorial")

				// Positive button
				.setPositiveButton("OK", new DialogInterface.OnClickListener() {
					public void onClick(DialogInterface dialog, int which) {
						// Do something else
					}
				})

				// Negative Button
				.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
					public void onClick(DialogInterface dialog,	int which) {
						// Do something else
					}
				}).create();
	}
}

In this fragment, we have created custom alert DialogFragment that consist of two buttons, a positive and negative. We have prepared a sample alert dialog icon for this tutorial. Insert your downloaded sample alert dialog icon into your res > drawable-hdpi.

Sample Alert Dialog Icon

[wpfilebase tag=file id=27 tpl=download-button /]

Next, change the application name and texts. Open your strings.xml in your res > values folder and paste the following code.

strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">DialogFragment Tutorial</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    <string name="welcome">This is a DialogFragment.</string>
    <string name="dialogfragment">Open DialogFragment</string>
    <string name="alertdialogfragment">Open Alert DialogFragment</string>

</resources>

No changes needed for the AndroidManifest.xml.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androidbegin.dialogfragmenttutorial"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Output:

Source Code

[purchase_link id=”8010″ text=”Purchase to Download Source Code” style=”button” color=”green”]