custom alert dialog in android
custom alert dialog in android

Hi Guys, Welcome to Proto Coders Point. In this Android tutorial, we will learn how to create a custom dialog box with a floating image app logo.

Sometimes a simple & default android dialop popup is not suitable with our app UI, In that case we need to create a custom alert dialog layout design to show as a popup to a user.

Example: Check the below image, this is what we will achieve at the end.
A android custom popup dialop example with a floating imageview sightly out of dialog as shown in below screenshot.

custom alert dialog in android design

Video Tutorial

Below are steps to achieve above android alert dialog.

custom alert dialog in android with...
custom alert dialog in android with floating image logo
Step 1: create a background for custom dialog layout

Create a XML file: dialog_bg.xml in drawable folder and copy paste the below code in it.

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"

    android:insetLeft="5dp"
    android:insetTop="5dp"
    android:insetBottom="5dp"
    android:insetRight="5dp"
    >

    <shape android:shape="rectangle">
        <corners android:radius="20dp"/>
        <solid android:color="@color/white"/>
        <stroke android:width="5dp" android:color="#FFF"/>
    </shape>

</inset>

The above code is just to give a corner radius, solid color, and stroke to custom_dialog.xml background.


Step 2: Create a vector image(cancel image) and copy a logo image in drawable

Create vector assets image
Right click on drawable -> New -> Vector Assets & choose a cancel button.

We need a logo image file to show in dialog popup as a floating app logo, So just copy your app logo in drawable file.

logo.png

Step 3: Creating a custom_dialog.xml layout file under layout folder

Now a main custom alert dialog layout design custom_dialog.xml, Under layout folder create a XML file custom_dialog.xml and copy below layout code and paste in it.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:background="@drawable/dialog_bg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:orientation="vertical"
        android:layout_marginRight="20dp"
        android:layout_marginTop="30dp">

        <ImageView
            android:id="@+id/cancel_button"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/ic_cancel"
            android:layout_centerHorizontal="true"
            android:layout_marginRight="10dp"
            android:layout_marginTop="5dp"
            android:layout_gravity="right"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="WELCOME TO PROTO CODERS POINT"
                android:textColor="#000"
                android:textStyle="bold|italic"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Please do like and Subscribe Us"
                android:textColor="#000"
                android:textStyle="bold|italic"
                />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="OK"
                android:gravity="center"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"/>


        </LinearLayout>

    </LinearLayout>

    <ImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerHorizontal="true"
        android:background="@drawable/logo"
        />

</RelativeLayout>

This code defines different views inside a custom dialog layout, it has 2 imageview, one for App logo and another for cancel vector image and 2 TextView and a β€˜OK’ button.


Step 4: activity_main.xml add a button

In activity_main.xml file will add a button, when a user clicks on that button will show android dialog.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".MainActivity"
    android:gravity="center">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show Dialog"
        android:id="@+id/showdialog"
        />

</LinearLayout>

Step 5: MainActivity.xml on click show alert dialog in android

On Button click create a custom dialog in android and show it to the user.

MainActivity.java

package example.on.dialog_popup;


import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.media.Image;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;


public class MainActivity extends AppCompatActivity {

    Button showdialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //find the view
        showdialog = (Button)findViewById(R.id.showdialog);

       // when clicked 
        showdialog.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                 ImageView cancel;
                 //will create a view of our custom dialog layout
                 View alertCustomdialog = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_dialog,null);
                //initialize alert builder.
                AlertDialog.Builder alert = new AlertDialog.Builder(MainActivity.this);
                
                //set our custom alert dialog to tha alertdialog builder
                alert.setView(alertCustomdialog);
                cancel = (ImageView)alertCustomdialog.findViewById(R.id.cancel_button);

                final AlertDialog dialog = alert.create();

                //this line removed app bar from dialog and make it transperent and you see the image is like floating outside dialog box.
                dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

                //finally show the dialog box in android all
                dialog.show();

                cancel.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        dialog.dismiss();
                    }
                });


            }
        });

    }
}


Recommended Android and Flutter Posts

Android Alert dialog Box with list of options in it.

Alert dialog box in flutter