Android Studio : Use image as AlertDialog title with custom layout example

So far we have learned how to create AlertDialog at the previous tutorial and it would be nice if we can customize the dialog boxes with different look-and-feel. To customize an AlertDialog box in Android Studio is a fairly simple process. We will use the designer to create a custom layout and attach the layout into the AlertDialog.

Instead of using the standard logos, images and fonts provided by Android Studio. In this tutorial, we will learn how to add an image with transparent background with header title using a different font into our project's drawable folder and use the image as our customized dialog box.

Something like this:

First thing first is to create the image with transparent background. How you want to create yours? It is up to you. Let's use this PNG file for the rest of the tutorial.

NOTE: You won't be able to see the text until you have a dark background such as black or gray

You can download the PNG file here:

https://d1ohg4ss876yi2.cloudfront.net/android-studio-use-image-as-title-into-alertdialog-with-custom-layout-example/appdialogheader.png

Drop the PNG file into your project drawable folder such as shown below. Right click on the drawable folder and navigate to Reveal in Finder.

copy or move the PNG file app_dialog_header.png into the drawable folder

Go back to Android Studio and you will see that now the PNG file is available under the drawable folder. Create a new layout file - customized_dialog.xml and fill the file up with these codes:

NOTE: We will use black background to contrast the PNG white text.

---

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:orientation="vertical"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content">

 <ImageView
 android:layout_width="match_parent"
 android:layout_height="64dp"
 android:background="@android:color/black"
 android:contentDescription="@string/header_title"
 android:scaleType="center"
 android:src="@drawable/app_dialog_header" />

 <EditText
 android:id="@+id/username"
 android:inputType="textEmailAddress"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="16dp"
 android:layout_marginLeft="4dp"
 android:layout_marginRight="4dp"
 android:layout_marginBottom="4dp"
 android:hint="@string/username" />

 </LinearLayout>

---

in res/values/strings.xml file, change the content to:

---

 <resources>
 <string name="app_name">Hello! This is a customized dialog</string>
 <string name="username">Enter your username here!</string>
 <string name="header_title">Custom AlertDialog description!</string>
 </resources>

---

and in res/layout/activity_main_dialog.xml, change the file content to:

---

 <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.example.sweetlogic.customdialog.MainActivityDialog"
 tools:layout_editor_absoluteX="0dp"
 tools:layout_editor_absoluteY="81dp">

 <Button
 android:id="@+id/buttonShowCustomDialog"
 android:layout_width="300dp"
 android:layout_height="50dp"
 android:text="Show Custom Dialog"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 tools:layout_editor_absoluteX="42dp"
 tools:layout_editor_absoluteY="230dp" />

 </android.support.constraint.ConstraintLayout>

---

Finally, fill the MainActivityDialog.java with these codes:

---

 package com.example.sweetlogic.customdialog;

 import android.support.v7.app.AppCompatActivity;
 import android.support.v7.app.AlertDialog;
 import android.os.Bundle;
 import android.content.Context;
 import android.widget.Button;
 import android.view.View;
 import android.view.LayoutInflater;

 public class MainActivityDialog extends AppCompatActivity {

 final Context context = this;
 private Button button;

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

 addListenerOnButton();
 }

 public void addListenerOnButton() {
 Button button = (Button) findViewById(R.id.buttonShowCustomDialog);

 button.setOnClickListener(new View.OnClickListener() {

 @Override
 public void onClick(View arg0) {

 // load the customized_dialog.xml layout and inflate to view
 LayoutInflater layoutinflater = LayoutInflater.from(context);
 View customizedUserView = layoutinflater.inflate(R.layout.customized_dialog, null);

 AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(context);

 alertDialogBuilder.setView(customizedUserView);

 // don't do this !
 // we have a customized header title
 //alertDialogBuilder.setTitle("This app");

 // all set and time to build and show up!
 AlertDialog alertDialog = alertDialogBuilder.create();
 alertDialog.show();



 }
 });



 }


 }

---

Hit the Run button and you should see the customized AlertDialog in action.

Happy coding!

NOTE: Read the advice - "The Dialog class is the base class for dialogs, but you should avoid instantiating Dialog directly. Use AlertDialog, DatePickerDialog or TimePickerDialog" - from https://developer.android.com/guide/topics/ui/dialogs.html

References:

https://developer.android.com/guide/topics/ui/dialogs.html