Custom Dialog Android
This tutorial shows how to create a dialog with custom view in Android. As you know, you can create dialogs and set its title, button actions and message with Android‘s Dialog library. In this tutorial, we’ll create a custom view and set it as view of our dialog.
Add a button to your page to trigger the opening action for dialog.
Custom Dialog Android
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?xml version="1.0" encoding="utf-8"?> <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.coffeebreakcodes.customdialog.MainActivity"> <Button android:id="@+id/buttonAction" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Open Dialog" android:layout_centerInParent="true"/> </RelativeLayout> |
Create Open Dialog
Now, define it and its click listener in your Activity or Fragment or wherever you need to open the dialog.
Create a function named openDialog(). We will handle the dialog operations in it.
|
1 2 3 4 5 6 7 |
Button button = (Button) findViewById(R.id.buttonAction); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { openDialog(); } }); |
Create a custom layout that belongs to your dialog. For instance, add a TextView, an ImageView and a Button.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp" android:orientation="vertical"> <TextView android:id="@+id/textViewDialog" android:layout_width="match_parent" android:layout_height="wrap_content"/> <ImageView android:id="@+id/imageViewDialog" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="16dp" /> <Button android:id="@+id/buttonDialog" android:text="Dismiss" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> |
Go to openDialog() function and start to create the custom dialog.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
private void openDialog() { //dialog with custom view final Dialog dialog = new Dialog(this); dialog.setContentView(R.layout.layout_custom); //custom dialog components TextView text = (TextView) dialog.findViewById(R.id.textViewDialog); text.setText("Custom dialog example!"); ImageView image = (ImageView) dialog.findViewById(R.id.imageViewDialog); image.setImageResource(R.drawable.ic_launcher_background); Button dialogButton = (Button) dialog.findViewById(R.id.buttonDialog); //dismiss dialog dialogButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dialog.dismiss(); } }); dialog.show(); } |
That’s it. Now the dialog appears when you click the button labeled “Open Dialog” and disappears when you click on “Dismiss” button.
Custom Dialog Android
It is possible to edit all views and add new views to your dialog.
©Coffee Break Codes – Custom Dialog Android