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 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 android:layout_width="match_parent" android:layout_height="match_parent" <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:
