Simple Dialog for Android

Dialog`s for Android: Chapter two – Simple Dialog
Here we have an example of Dialog in Android, much similar to previous example for Alert Dialog explained in my previous post, but more customizable. In this tutorial we are going to create one very simple dialog box with only title, and message for showing the user, and one dialog more complex, with own layout, title and buttons for managing what we need.

NOTE: In this example, for binding the Views from XML resources we use ButterKnife library by Jake Wharton.

compile 'com.jakewharton:butterknife:8.8.1'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'

1 2	compile 'com.jakewharton:butterknife:8.8.1' annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'

just put this code in build.gradle file in your app folder and sync it.

NOTE: This example is build like any other android application, which mean that every thing goes in a right place, like no hard-coded strings, they are put in string.xml resources, color.xml, layout resources and getting them from there.

This example project have only one HomeActivity.java, activity_home.xml for the activity layout, dialog_simple.xml layout for the first dialog, and dialog_custom.xml layout for the second dialog.

Lets describe how thing work out with the Simple Dialog:

public class HomeActivity extends AppCompatActivity {

    @OnClick(R.id.simpleDialog)
    public void onClickSimpleDialog() {
        simpleDialog();
    }

    @OnClick(R.id.customDialog)
    public void onClickCustomDialog() {
        customDialog(getString(R.string.title_custom), getString(R.string.simple_dialog_with_layout));
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        ButterKnife.bind(this);
    }

    private void simpleDialog() {
        final Dialog dialog = new Dialog(this);
        dialog.setContentView(R.layout.dialog_simple);
        dialog.show();
    }

    private void customDialog(String dialogTitle, String dialogMessage) {
        final Dialog dialog = new Dialog(HomeActivity.this);
        dialog.setContentView(R.layout.dialog_custom);

        TextView title = dialog.findViewById(R.id.title);
        TextView message = dialog.findViewById(R.id.message);
        TextView ok = dialog.findViewById(R.id.ok);
        TextView cancel = dialog.findViewById(R.id.cancel);

        title.setText(dialogTitle);
        message.setText(dialogMessage);

        ok.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                dialog.dismiss();
            }
        });
        cancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                dialog.dismiss();
            }
        });

        dialog.show();
    }
}

public class HomeActivity extends AppCompatActivity {

@OnClick(R.id.simpleDialog)

public void onClickSimpleDialog() {

simpleDialog();

}

@OnClick(R.id.customDialog)

public void onClickCustomDialog() {

customDialog(getString(R.string.title_custom), getString(R.string.simple_dialog_with_layout));

}

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_home);

ButterKnife.bind(this);

}

private void simpleDialog() {

final Dialog dialog = new Dialog(this);

dialog.setContentView(R.layout.dialog_simple);

dialog.show();

}

private void customDialog(String dialogTitle, String dialogMessage) {

final Dialog dialog = new Dialog(HomeActivity.this);

dialog.setContentView(R.layout.dialog_custom);

TextView title = dialog.findViewById(R.id.title);

TextView message = dialog.findViewById(R.id.message);

TextView ok = dialog.findViewById(R.id.ok);

TextView cancel = dialog.findViewById(R.id.cancel);

title.setText(dialogTitle);

message.setText(dialogMessage);

ok.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

dialog.dismiss();

}

});

cancel.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

dialog.dismiss();

}

});

dialog.show();

}

First the annotations.
They are from the ButterKnife Library as mentioned before, and can be quite helpful.

    @OnClick(R.id.simpleDialog)
    public void onClickSimpleDialog() {
        simpleDialog();
    }

@OnClick(R.id.simpleDialog)

public void onClickSimpleDialog() {

simpleDialog();

}

The example above is functional button, declared as a button, extracted or linked with the correct layout and given its functionality. If you like to learn more about using the ButterKnife Library, i strongly suggest visiting its site:
http://jakewharton.github.io/butterknife/

Now, simpleDialog()

    private void simpleDialog() {
        final Dialog dialog = new Dialog(this);
        dialog.setContentView(R.layout.dialog_simple);
        dialog.show();
    }

private void simpleDialog() {

final Dialog dialog = new Dialog(this);

dialog.setContentView(R.layout.dialog_simple);

dialog.show();

}

In this example we have method for calling and creating a simple dialog box for showing a message to the user. We create a new Dialog object which need a context as parameter, and in our case this is the correct form because we get our context from the Home Activity. If you are working in Views or Rich Views as some are calling them, you will need to pass getContext() method as parameter. Next we need to tell our dialog object where to look for our layout with the setContentView() method which takes layout resource ID in int type. We pass our resource layout with R.layout.some_layout_we_have_created in .xml format, in layout folder. At this point we have fully developed dialog, but, it is not shown on the screen without .show() method. With this final command, we have created and shown the dialog to the user

And here is the layout example code for it, located in dialog_simple.xml in layout resource folder in our android application project.

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="100dp"&gt;

    &lt;TextView         android:id="@+id/title"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:background="@color/colorDarkGray"         android:gravity="center"         android:paddingBottom="10dp"         android:paddingTop="10dp"         android:text="@string/title_simple"         android:textColor="@color/colorWhite"         android:textSize="16dp" /&gt;

    &lt;TextView         android:id="@+id/message"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_below="@id/title"         android:layout_centerInParent="true"         android:background="@color/colorWhite"         android:padding="10dp"         android:text="@string/message_simple_dialog"         android:textColor="@color/colorAccent" /&gt;

&lt;/RelativeLayout&gt;

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

</RelativeLayout>

Now lets explain how our Custom Dialog (which is derivative of our Simple Dialog) works:

As mentioned before, we have a button for showing our custom dialog, witch calls our customDialog() method.

    private void customDialog(String dialogTitle, String dialogMessage) {
        final Dialog dialog = new Dialog(HomeActivity.this);
        dialog.setContentView(R.layout.dialog_custom);

        TextView title = dialog.findViewById(R.id.title);
        TextView message = dialog.findViewById(R.id.message);
        TextView ok = dialog.findViewById(R.id.ok);
        TextView cancel = dialog.findViewById(R.id.cancel);

        title.setText(dialogTitle);
        message.setText(dialogMessage);

        ok.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                dialog.dismiss();
            }
        });
        cancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                dialog.dismiss();
            }
        });

        dialog.show();
    }&lt;span 				data-mce-type="bookmark" 				id="mce_SELREST_start" 				data-mce-style="overflow:hidden;line-height:0" 				style="overflow:hidden;line-height:0" 			&gt;&lt;/span&gt;

private void customDialog(String dialogTitle, String dialogMessage) {

final Dialog dialog = new Dialog(HomeActivity.this);

dialog.setContentView(R.layout.dialog_custom);

TextView title = dialog.findViewById(R.id.title);

TextView message = dialog.findViewById(R.id.message);

TextView ok = dialog.findViewById(R.id.ok);

TextView cancel = dialog.findViewById(R.id.cancel);

title.setText(dialogTitle);

message.setText(dialogMessage);

ok.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

dialog.dismiss();

}

});

cancel.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

dialog.dismiss();

}

});

dialog.show();

}<span data-mce-type="bookmark" id="mce_SELREST_start" data-mce-style="overflow:hidden;line-height:0" style="overflow:hidden;line-height:0" ></span>

We must, again, create new Dialog object with same parameters as before, but with a slight difference with the first keyword final which we must declare our object as final so it can be accessed in our inner, on click listener, classes for the buttons, as shown in our example. Setting the content View with our custom layout is declared in our dialog_custom.xml layout resource file. Then TextView-s are declared for the buttons, OK and cancel, message for the user, and the dialog title. All of these fields are declared, alsow, in the dialog_custom.xml layout. After the declaration and initialization by dialog.findViewById(R.id.what_ever_we_like_to_do), because all of the views are TextView-s, we setText() to them. Because our method customDialog() have two parameter, we must give it some strings for the title and message in it, which is done in our example by calling some string resources, but you can get the parameters from wherever you like, but i strongly recommend not to hard code them.
At the end, we set onClickListeners for our previously declared buttons so the user can interact with the dialog. They both dismiss the dialog box in this case, but it can do whatever you like, like storing some strings in Shared Preferences, or calling some web service after some button is clicked, and so on, an so on.
Here is the layout code for the Custom Dialog explained before:

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="200dp"&gt;

    &lt;TextView         android:id="@+id/title"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:background="@color/colorDarkGray"         android:gravity="center"         android:paddingBottom="10dp"         android:paddingTop="10dp"         android:textColor="@color/colorWhite"         android:textSize="16dp" /&gt;

    &lt;LinearLayout         android:id="@+id/bottomLayout"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_alignParentBottom="true"         android:background="@color/colorDarkGray"         android:orientation="horizontal"         android:padding="10dp"         android:weightSum="2"&gt;

        &lt;TextView             android:id="@+id/cancel"             android:layout_width="0dp"             android:layout_height="wrap_content"             android:layout_weight="1"             android:text="@string/cancel"             android:textAllCaps="true"             android:textColor="@color/colorWhite"             android:textSize="16dp" /&gt;

        &lt;TextView             android:id="@+id/ok"             android:layout_width="0dp"             android:layout_height="wrap_content"             android:layout_weight="1"             android:gravity="end"             android:text="@string/ok"             android:textColor="@color/colorWhite"             android:textSize="16dp" /&gt;

    &lt;/LinearLayout&gt;

    &lt;TextView         android:id="@+id/message"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_above="@id/bottomLayout"         android:layout_below="@id/title"         android:layout_centerInParent="true"         android:background="@color/colorWhite"         android:padding="10dp"         android:text="@string/message_custom_dialog"         android:textAlignment="center"         android:textColor="@color/colorAccent" /&gt;

&lt;/RelativeLayout&gt;

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

</LinearLayout>

</RelativeLayout>

and the layout for the HomeActivity:

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;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"     tools:context="com.xtrid.simpledialogexample.HomeActivity"&gt;

    &lt;Button         android:id="@+id/simpleDialog"         android:layout_width="250dp"         android:layout_height="70dp"         android:layout_centerInParent="true"         android:layout_marginTop="15dp"         android:background="@android:drawable/dialog_holo_light_frame"         android:elevation="0dp"         android:padding="15dp"         android:text="@string/simple_dialog" /&gt;

    &lt;Button         android:id="@+id/customDialog"         android:layout_width="250dp"         android:layout_height="70dp"         android:layout_below="@id/simpleDialog"         android:layout_centerInParent="true"         android:background="@android:drawable/dialog_holo_light_frame"         android:padding="15dp"         android:text="@string/simple_dialog_with_layout" /&gt;

    &lt;ImageView         android:id="@+id/logo"         android:layout_width="250dp"         android:layout_height="200dp"         android:layout_above="@+id/simpleDialog"         android:layout_alignStart="@+id/simpleDialog"         android:layout_marginTop="15dp"         android:background="@drawable/dialog" /&gt;

    &lt;TextView         android:id="@+id/createdBy"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignParentBottom="true"         android:layout_centerHorizontal="true"         android:layout_marginBottom="10dp"         android:text="@string/created_by" /&gt;

&lt;/RelativeLayout&gt;