Custom Alert Dialogs — Android

This is my first post here on Medium, so hopefully I don’t do too terribly (*fingers crossed*).

Ever wanted to do more with your alert dialogs? Or have them look a bit cooler? Then we are(were) in the same boat.

Like most mobile developers, I fell in love with Android’s ability to customize things(pretty much everything). Alert dialogs are no exception, today, I will discuss how I achieve this.

Setup

To start things off, I like to set my view mode to Project. It allows me to navigate to the relevant folders quite easily.

Begin Customization

With that out of the way, let’s add some customized colors. Head over to res/values/colors.xml and add a few new entries. Here are my colors:

Next, we add some custom fonts, because lets face it…if I am going to tweak UI, do I really want to use the same old fonts? Pssh!

We do that by heading over to src/main, right click, and creating a directory called assets. Within that assets directory, create another directory called fonts. Afterwards, drag and drop your font files(.otf or .ttf files) into the fonts directory

My font of choice is called Hero and can be downloaded for FREE, right here.
P.S. This is probably as good a time as any to mention that this is also how I use custom fonts in my apps.

Finally, Some Code

We will start with our Main Activity. Go to its layout file (should already be opened, but in case it isn’t, you can find it at res/layout/activity_main.xml).

Let’s add a button and center it. I am using a RelativeLayout as opposed to the possibly auto-generated ConstraintLayout. You can read more about layouts here.

That is all.

Now, we create a class called Constants. This will house all of our variables that we don’t intend to change.

public class Constants {

    public static final String HEROLIGHT = "fonts/HeroLight.otf";
    public static final String HERO = "fonts/Hero.otf";
}

In order to use the fonts we’ve imported, I will create a custom TextView class called…CustomTextView.(+10 brownie points for originality right? RIGHT?)

public class CustomTextView extends android.support.v7.widget.AppCompatTextView {
    public CustomTextView(Context context) {
        super(context);
        setFont();
    }


    public CustomTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setFont();
    }
    public CustomTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setFont();
    }

    private void setFont() {
        Typeface font = Typeface.createFromAsset(getContext().getAssets(), Constants.HEROLIGHT);
        setTypeface(font, Typeface.NORMAL);
    }
}

Next we create a class called CustomDialog ($50 to anyone who can guess what this will be used for)
.
.
.
Too late!

This is where the magic happens. First, we declare a LayoutInflater variable(which as the type suggests, will inflate a layout that we will be creating in just a sec).

public class CustomDialog {

    LayoutInflater inflater;
}

Time to create that layout I mentioned, by right clicking on res/layout to create a new layout resource file; call it dialog_title.

It’s simply a RelativeLayout (full disclosure, I really like using RelativeLayouts) with a single child view; the CustomTextView we created earlier.

Now, back to our CustomDialog class. Add a function called setupDialog, whose constructor requires a Context. Inside of this function, we initialize the LayoutInflater and pass the context value to it.

LayoutInflater inflater;

public void setupDialog(final Context context){
    inflater= LayoutInflater.from(context);
   
}

We then create a TextView (specifically the CustomTextView), which will be used to display text with our custom font, within the alert dialog.

CustomTextView textView = new CustomTextView(context);
textView.setText("This is a custom dialog");
textView.setGravity(Gravity.CENTER_HORIZONTAL);
textView.setTextSize(22);
textView.setTextColor(context.getResources().getColor(R.color.primary_orange));

You can set the text, textsize and textcolor to whatever your heart desires.
Side Note: The textcolor is easily set using one of those neat colors we created earlier.
Setting the gravity will position the textview in the center of the alert dialog.

Let’s create the alert dialog and assign our custom elements to it.

final AlertDialog alertDialogBuilder = new  AlertDialog.Builder(context)
        .setCustomTitle(inflater.inflate(R.layout.dialog_title, null))
        .setView(textView)
        .setPositiveButton(R.string.close, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i)
 {
}}).create();
alertDialogBuilder.show();

The setCustomTitle allows us to put the dialog_title layout at the top of the AlertDialog.

• For more cool available options, you can always check out the docs (shudders).

Head back over to MainActivity; we have some variables to declare (the nice, cute button in its layout file, and now this CustomDialog class).

public class MainActivity extends AppCompatActivity {

    Button button;
    CustomDialog customDialog;

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

Inside of onCreate, we initialize the button and add a listener to it. When clicked, the custom dialog will be initialized, and we pass MainActivity’s context to it.

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

    button = (Button) findViewById(R.id.button);


    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            customDialog = new CustomDialog();
            customDialog.setupDialog(MainActivity.this);
        }
    });
}

Voila! You should have a shiny new customized dialog staring at you.

For a few more customization options (including a header with an imageview and buttons with gradient backgrounds, which respond to touch) check out the Github repo.