DialogFragment in Android

Dialogs are a way to show more concise information or accessibility options without creating a new activity for users. This is quite useful when we have to show more options and stuff to the user and for that, we don’t want to create a whole new screen, we want the user to stay on the same screen and we want to show him a dialog which is floating on the previous screen. After that, We want to behave on the option selected from the dialog. Almost, in every good application, you will see the perfect usage of Dialog Box. From a user experience point of view also DialogFragment is a very good utility class of android development. In this article, we are going to know about the Introduction, Important methods, and implementation of DialogFragment in a real-world application.

What is DialogFragment?

DialogFragment is a utility class of android development that is used to show a Dialog window, Floating on top of an activity window in an android application. This feature is added on API Level 11 and Deprecated on API Level 28. It has its own lifecycle which makes this class very useful for dialog box creation. Here is a sample video to understand what we are going to build in this article and what actually a Dialog Fragment is-

Methods of DialogFragment

Below methods are given to control the flow of DialogFragment, with the proper usage of these methods dialog boxes can be controlled efficiently.

• onAttach()
• onCreate()
• onCreateDialog()
• onCreateView()
• onViewCreated()
• onDestroy()

Practical Implementation of DialogFragment

We will be implementing DialogFragment in a real-world android application. We will create a new project, if you are already working on any old project and wants to implement dialog fragment in that project you can do so also.

Step 1: Starting a new android studio project

• First of all start android studio
• On the main screen of android studio, you will see an option called Create a new project.
• Give a name of the project and fill all the other fields and click on next
• Also, select the empty activity and click on the finish

Step 2: Completing the pre-tasks for the application

Before we start developing our application we should perform some changes first. Now we have to do some changes to App Level Gradle file, For that go to Gradle Scripts > Build.gradle(Module:app) and import the following dependencies and click on Sync now.

implementation 'com.android.support:design:28.0.0'

Step 3: Working with activity_main.xml file-

The next step we have to follow is the user interface design for acitivity_main.xml, for that go-to app->res->Layout->activity_main.xml and then paste the below XML code.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btnFragment"
            android:layout_width="120dp"
            android:layout_height="70dp"
            android:text="Open Fragment"
            android:layout_weight="1"
            android:layout_margin="20dp"/>

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Designing the UI For DialogFragment

The next step is to complete the design of our DialogFragment, for that go to res > layout > right-click > new > layout resource file and name it as dialog_fragment.xml. Use the below code in it-

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="440dp"
        android:background="#1D90EC"
        app:circularflow_radiusInDP="10dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="This is Dialog Fragment"
            android:textSize="40dp"
            android:gravity="center"
            android:textStyle="bold"/>

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 5: Working with MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file.

Java

package com.example.dialogfragment;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private Button btnFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnFragment=findViewById(R.id.btnFragment);
        btnFragment.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                DialogFragment dialogFragment=new DialogFragment();
                dialogFragment.show(getSupportFragmentManager(),"My  Fragment");
            }
        });
    }
}

Step 6: Working with DialogFragment.java file

Extend this class with the DialogFragment method. Make an OnCreateView and Inside that use, inflater to inflate the UI of Dialog Box which is already created. Here is the all code for DialogFragment.java, you can paste it just after your package name.

Java

package com.example.dialogfragment;

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

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

public class DialogFragment extends androidx.fragment.app.DialogFragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);
       return inflater.inflate(R.layout.dailog_fragment,container,false);
    }
}

Output:

Here is the output of the application: