Alert dialog box include custom dialog and Chat Dialog Fragment

on

 Welcome to "Android Super Nerds". Thanks for coming back to my site, I really appreciate that and if you guys are new to my Site please do check my previous articles as well.

Nowadays, any application we consider .i.e. web or mobile, notifying our user about warning, information, new notification message, error, or any status related to any crucial action message via an Alert Box or more alike a DialogBox is a best practice. 

Alert Dialog Box

An alert dialog box is a medium to display and prompt an important message to our user. Even the action button can be seen on it, which seeks the user to make his decision. 
A dialog box can be a simple approach for message sharing to our user but it too can vary depending on its already defined classes and method. 
Its class already have defined methods and attribute field given below🠗


1. Title
2. Icon
3. Message field
4. Action buttons
5. Custom style theme 
6. Input field
7. Dialog cancelable (optional)      



Most of the Apps have different requirements for dialog box appearance and action button handler. So the custom feature is only the solution. Custom Dialog Box can be implemented on the existing Activity, fragment, or some generic calls like🠗

Inside a method of the class

Yes & No button dialog - Let's start with something simple, like yes & no option alert dialog. And for doing that we need to create an instance of DialogInterface.OnClickListener class. This instance handles the click event for  both positive and negative button. Something like this🠗


public void displayYesNoDialog(){
DialogInterface.OnClickListener dialogClickListener = new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
switch (which){
case DialogInterface.BUTTON_POSITIVE:
// do things
break;
case DialogInterface.BUTTON_NEGATIVE:
// do things
break;
}
}
};
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("Alert");
builder.setIcon(R.drawable.ic_warning);
builder.setMessage("Does AndroidSuperNerds helping you?")
.setPositiveButton("Yes", dialogClickListener)
.setNegativeButton("No", dialogClickListener).show();
}
view raw Yes No Option Dialog hosted with ❤ by GitHub



Ok & Cancel button dialog - Same approach can be used for ok & cancel option alert dialog but not required any instance of DailogInterface. Code will be something like this🠗


public void displayOkCancelDialog(){
new AlertDialog.Builder(DialogActivity.this)
.setTitle("Confirmation")
.setIcon(R.drawable.ic_confirmation)
.setMessage("Will view AndroidSuperNerds again?")
.setNegativeButton(android.R.string.cancel, null) // dismisses by default
.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
// do things
}
})
.create()
.show();
}
view raw Ok Cancel Dialog hosted with ❤ by GitHub



Ok button dialog - Same as previous code approach but not required a negative button. And Code will be something like this🠗


public void displayOkDialog(){
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setMessage("Please visit AndroidSuperNerds again?")
.setCancelable(false)
.setTitle("Success")
.setIcon(R.drawable.ic_warning)
.setPositiveButton("OK", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
//do things
}
});
AlertDialog alert = builder.create();
alert.show();
}
view raw Ok Button Dialog hosted with ❤ by GitHub



Custom Layout Dialog - For inflating the layout on the dialog view, first it is required to create a layout that needed to be displayed on the dialog view once it is prompted. And for doing that we need to use LayoutInflater instance, which also require the view id identification for initializing the view and its click event. Code can be seen this🠗


Layout Design
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="My Secret"
android:textAppearance="@style/TextAppearance.AppCompat.Headline"
android:gravity="center_horizontal" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="I Am Batman and we are in GOTHAM."
android:gravity="center"
android:textAppearance="@style/TextAppearance.AppCompat.Medium" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:orientation="horizontal">
<Button
android:id="@+id/buttonOk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="5dp"
android:text="Ok" />
<Button
android:id="@+id/cancelBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:text="Cancel" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
view raw Custom layout for dialog hosted with ❤ by GitHub

Code
public void displayCustomDialog(){
AlertDialog.Builder builder = new AlertDialog.Builder(DialogActivity.this);
ViewGroup viewGroup = findViewById(android.R.id.content);
View dialogView = LayoutInflater.from(this).inflate(R.layout.custom_dialog, viewGroup, false);
builder.setView(dialogView);
final AlertDialog alertDialog = builder.create();
alertDialog.setTitle("Welcome");
alertDialog.setIcon(R.drawable.ic_confirmation);
Button okBtn = dialogView.findViewById(R.id.buttonOk);
Button cancelBtn = dialogView.findViewById(R.id.cancelBtn);
okBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// do things
}
});
cancelBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// do things
alertDialog.dismiss();
}
});
alertDialog.show();
}
view raw Custom Dialog hosted with ❤ by GitHub



Custom dialog box implementation via Dialog Fragment

For handling the most complex dialog design and event handling, it is always a better choice to use the Dialog Fragment. And for doing so first create a class and then extend it with Dialog Fragment which is turn gives you the access to add custom layout and other events. 

The code for displaying this dialog, differs from other code which we show earlier.🠗


public void displayCustomFragmentDialog(){
CustomDialogFragment newFragment = new CustomDialogFragment();
newFragment.show(getSupportFragmentManager(), "dialog");
}
view raw Show Dialog Fragment hosted with ❤ by GitHub

Entire Dialog Fragment Code can be like this🠗
package com.android.androidsupernerds.dialogblog.fragment;
import android.os.Bundle;
import androidx.fragment.app.DialogFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.android.androidsupernerds.R;
public class CustomDialogFragment extends DialogFragment {
private static final String ARG_PARAM1 = "param1";
private String mParam1;
public CustomDialogFragment() {}
public static CustomDialogFragment newInstance(String param1) {
CustomDialogFragment fragment = new CustomDialogFragment();
Bundle args = new Bundle();
args.putString(ARG_PARAM1, param1);
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mParam1 = getArguments().getString(ARG_PARAM1);
}
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_dialog, container, false);
}
}
view raw Entire Dialog Fragment hosted with ❤ by GitHub





If you guys are still on my page, then thanks for staying on it and I really appreciate that. 

And 

Happy Coding...😃









Comments

Post a Comment