Alert Dialog for Android

Dialog`s for Android: Chapter one – Alert Dialog

      In this topic we are going to discuss a little bit about the Alert Dialog used in Android applications, and in this post we are going to describe the simple Alert Dialog and further more the more complex Alert Dialog.
First, the usage of the Alert Dialog. Alert Dialogs are simple and lightweight tools for displaying some “alert” or simple message, like “are you sure you want to exit this application, or deleting something or showing successful operation by the user with interaction. It can have custom positive and negative buttons for interaction, like “OK” and “Cancel”, “Wait”, “Done” or something like that, by your choice for what you want the alert dialog to do.

Project link

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'

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, and getting them from there.

      For this example we need HomeActivity.java, activity_home.xml for the layout, string.xml where we put our strings for usage, style.xml for the second custom alert dialog.


public class HomeActivity extends AppCompatActivity {

    @OnClick(R.id.alertDialog)
    public void onClickAlertDialog() {
        simpleAlertDialog();
    }

    // this button is for the second example, no need to focus now
    @OnClick(R.id.alertDialogBuilder)
    public void onAlertDialogBuilder() {
        customAlertDialog();
    }

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

    private void simpleAlertDialog() {
        AlertDialog alertDialog = new AlertDialog.Builder(this).create();
        alertDialog.setTitle(getString(R.string.alert_dialog));
        alertDialog.setMessage(getString(R.string.welcome_simple_dialog));
        alertDialog.setIcon(R.drawable.alert_dialog);
        alertDialog.setButton(AlertDialog.BUTTON_POSITIVE, getString(R.string.ok), new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int which) {
                //put code here when "ok" button is clicked
            }
        });
        alertDialog.show();
    }

    //this is the second example of the same alert dialog
    private void customAlertDialog() {
        AlertDialog.Builder alertDialog = new AlertDialog.Builder(new ContextThemeWrapper(HomeActivity.this, R.style.AlertDialogCustom));
        alertDialog.setTitle(R.string.alert_dialog);
        alertDialog.setMessage(R.string.welcome_simple_dialog_builder);
        alertDialog.setIcon(R.drawable.alert_dialog);
        alertDialog.create();

        alertDialog.setPositiveButton(R.string.ok, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                //put code here when "ok" button is clicked
            }
        });

        alertDialog.setNegativeButton(R.string.cancel, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                //put code here when "cancel" button is clicked
            }
        });
        alertDialog.show();
    }
}

Lets start with that @OnClick annotation. This is from the ButterKnife library telling the public method below it to bind/bond that R.id.alertDialog resource defined in our layout to correspond with the button which is clicked, and in the {} parenthesis the code is executed when the button is clicked, and thats it, no OnClickListeners to tangle your code.

In onCreate() we must bind the views declared in the layout and in our activity with the ButterKnife.bind(this) method, so the views are initialized here and we can use them.

The method for the Alert Dialog, simpleAlertDialog(), is declared with private access modifier so member is only accessible within the same class as it is declared, because we dont need this specific alert dialog to be used in different class. Void telling us that the method don`t return anything.

In the body of the method we create new AlertDialog with the help of .Builder which has constructor arguments Context as parameters, and its created right away with .create() method.

.setTitle(“some string”) is for setting the predefined title of the Alert Dialog. .setMessage(“some text”) is for displaying some message in the Alert Dialog body. .setIcon(R.drawable.some_icon) is for setting the toolbar left side icon, for the dialog. And at this time we need to create() the dialog so it is not Builder object any more, but is it fully grown Alert Dialog object. Now, after all is set, we need some button. .setButton(what kind of button, “text for the button”, onClickListener for the button()) and in its body what that button click do. In the end of our Alert Dialog, we must show the dialog to the user with .show(), otherwise it will be invisible.

device-2017-10-25-120336

The second method and our example customAlertDialog() is the same thing as the previous example with a little bit of different approach and tweaks, like background.

Like the first example, here we use AlertDialog.Builder to build the dialog object., but with a little difference when we declare the wanted object. Here we are not declaring AlertDialog type object, but AlertDailog.Builder object so we ca set later on our positive and negative buttons. And because is custom dialog in the AlertDialog.Builder constructor we add some theme wrapper and our custom layout

AlertDialog.Builder alertDialog = new AlertDialog.Builder(new ContextThemeWrapper(HomeActivity.this, R.style.AlertDialogCustom));

and the layout itself shown below for the alert dialog, added in style.xml in resources which parameters are self explanatory:

<style name="AlertDialogCustom" parent="@android:style/Theme.Dialog">
        <item name="android:textColor">@color/colorWhite</item>
        <item name="android:textStyle">bold</item>
        <item name="android:headerDividersEnabled">true</item>
        <item name="android:typeface">normal</item>
        <item name="android:background">@color/colorPrimaryDark</item>
        <item name="android:buttonStyle">@color/colorWhite</item>
    </style>

.setTitle(), .setMessage(), and setIcon(), are the same as it was explained before. The difference here are the buttons, which are positive and negative. Here we can set positive and negative button and it own OnClickListeners wich can do whatever you like when you click them.

Here are the string.xml resources too:

<resources>
    <!-- Home Activity -->
    <string name="app_name">Alert Dialog Example</string>
    <string name="alert_dialog">Alert Dialog</string>
    <string name="alert_dialog_builder">Alert Dialog with Builder and custom background</string>

    <!-- Dialog -->
    <string name="cancel">Cancel</string>
    <string name="ok">OK</string>
    <string name="welcome_simple_dialog">Welcome, \nThis is simple dialog, using Alert Dialog feature</string>
    <string name="welcome_simple_dialog_builder">Welcome, \nThis is simple dialog builder, using Alert Dialog feature and custom background</string>
</resources>

device-2017-10-25-132633

One thought on “Alert Dialog for Android

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s