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:
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:
See also : Android Studio : AlertDialog and EditText to get user string input example
By Adam Ng
IF you gain some knowledge or the information here solved your programming problem. Please consider donating to the less fortunate or some charities that you like. Apart from donation, planting trees, volunteering or reducing your carbon footprint will be great too.
Advertisement
Tutorials
+9.1k Golang : Terminate-stay-resident or daemonize your program?
+22.9k Golang : Print out struct values in string format
+15.4k Golang : Get current time from the Internet time server(ntp) example
+6.8k Web : How to see your website from different countries?
+12.3k Golang : Exit, terminating or aborting a program
+29.6k Golang : How to get HTTP request header information?
+8.8k Golang : How to capture return values from goroutines?
+13.2k Golang : How to get year, month and day?
+11.1k Use systeminfo to find out installed Windows Hotfix(s) or updates
+8.5k Golang : On lambda, anonymous, inline functions and function literals
+10.8k Golang : Generate random elements without repetition or duplicate
+5.7k Golang : List all packages and search for certain package