Android Custom Dialog Example – Making Custom AlertDialog

In this post, we will learn to create a custom AlertDialog without using any library. This will help us to the theme and customize our app and make it more user-friendly.

Below is the design that we are going to create.

We are going to create a layout file called dialog_daily_check.xml. This will be the layout of our dialog.

Then, we will create drawables for our dialog background which will be applied on the layouts.

First one is dialog_main_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#FFCC80" />
    <corners
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="20dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp" />
</shape>

Second one is dialog_accent.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#E65100" />
    <corners
        android:topLeftRadius="12dp"
        android:topRightRadius="12dp" />
</shape>

After that, we will edit the layout of our dialog.

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/main_dialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:background="@drawable/dialog_main_bg"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/dialog_accent"
            android:gravity="center"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingTop="48dp"
                android:paddingBottom="16dp">

                <com.makeramen.roundedimageview.RoundedImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_margin="8dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/fill_1"
                    app:riv_corner_radius="25dp" />

                <com.makeramen.roundedimageview.RoundedImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_margin="8dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/fill_1"
                    app:riv_corner_radius="25dp" />

                <com.makeramen.roundedimageview.RoundedImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_margin="8dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/fill_1"
                    app:riv_corner_radius="25dp" />

                <com.makeramen.roundedimageview.RoundedImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_margin="8dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/fill_1"
                    app:riv_corner_radius="25dp" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingBottom="32dp">

                <com.makeramen.roundedimageview.RoundedImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_margin="8dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/fill_1"
                    app:riv_corner_radius="25dp" />

                <com.makeramen.roundedimageview.RoundedImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_margin="8dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/fill_1"
                    app:riv_corner_radius="25dp" />

                <com.makeramen.roundedimageview.RoundedImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_margin="8dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/fill_1"
                    app:riv_corner_radius="25dp" />

            </LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingBottom="8dp">

            <androidx.cardview.widget.CardView
                android:id="@+id/check_in_btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                android:clickable="true"
                android:focusable="true"
                android:foreground="?attr/selectableItemBackground"
                app:cardBackgroundColor="@color/colorAccent"
                app:cardCornerRadius="20dp"
                app:cardElevation="2dp">

                <TextView
                    android:id="@+id/check_in"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="16dp"
                    android:layout_marginTop="8dp"
                    android:layout_marginRight="16dp"
                    android:layout_marginBottom="8dp"
                    android:fontFamily="@font/poppins_black"
                    android:text="check in"
                    android:textAlignment="center"
                    android:textAllCaps="true"
                    android:textColor="@android:color/white"
                    android:textSize="16sp" />
            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:id="@+id/coinx2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                android:clickable="true"
                android:focusable="true"
                android:foreground="?attr/selectableItemBackground"
                app:cardBackgroundColor="@color/colorAccent"
                app:cardCornerRadius="20dp"
                app:cardElevation="2dp">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:layout_marginLeft="16dp"
                        app:srcCompat="@drawable/ic_videocam_black_24dp"
                        android:tint="@android:color/white" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="8dp"
                        android:layout_marginTop="8dp"
                        android:layout_marginRight="16dp"
                        android:layout_marginBottom="8dp"
                        android:fontFamily="@font/poppins_black"
                        android:text="coins x2"
                        android:textAlignment="center"
                        android:textAllCaps="true"
                        android:textColor="@android:color/white"
                        android:textSize="16sp" />

                </LinearLayout>

            </androidx.cardview.widget.CardView>

        </LinearLayout>

    </LinearLayout>

    <FrameLayout
        android:id="@+id/main_top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal">

            <ImageView
                android:layout_width="300dp"
                android:layout_height="50dp"
                android:layout_marginTop="4dp"
                app:srcCompat="@drawable/ribbon"
                android:tint="#64000000" />

            <ImageView
                android:layout_width="300dp"
                android:layout_height="50dp"
                app:srcCompat="@drawable/ribbon" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:fontFamily="@font/poppins_black"
                android:text="Daily Check"
                android:textAlignment="center"
                android:textColor="@android:color/white"
                android:textSize="20sp" />
        </FrameLayout>

        <androidx.cardview.widget.CardView
            android:id="@+id/cancel_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginTop="16dp"
            android:clickable="true"
            android:focusable="true"
            android:foreground="?attr/selectableItemBackground"
            app:cardBackgroundColor="@android:color/transparent"
            app:cardCornerRadius="20dp">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                app:srcCompat="@drawable/cancel_btn" />
        </androidx.cardview.widget.CardView>

    </FrameLayout>
</FrameLayout>

Note: we are using cardview to create rounded buttons and a library to create rounded images which is completely optional.

Now let’s create our java file. Create a java file called DailyCheckDialog.java

package com.connectmymatch.mash.ui.dialogs;

import android.app.Dialog;
import android.content.Intent;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.DialogFragment;
import androidx.appcompat.app.AlertDialog;
import androidx.cardview.widget.CardView;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.LinearLayout;

import com.connectmymatch.mash.R;


public class DailyCheckDialog extends DialogFragment {

    CardView cancelBtn, checkInBtn, coinsBtn;
    View view;
    Dialog d;
    AlertDialog.Builder builder;
    LinearLayout dialogMain;
    FrameLayout mainTop;


    @NonNull
    @Override
    public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
        builder = new AlertDialog.Builder(getActivity());
        view = LayoutInflater.from(getContext()).inflate(R.layout.dialog_daily_check, null);
        cancelBtn = view.findViewById(R.id.cancel_btn);
        checkInBtn = view.findViewById(R.id.check_in_btn);
        coinsBtn = view.findViewById(R.id.coinx2);
        dialogMain = view.findViewById(R.id.main_dialog);
        mainTop = view.findViewById(R.id.main_top);
        mainTop.setVisibility(View.VISIBLE);
        dialogMain.setVisibility(View.VISIBLE);

        builder.setView(view);
        d = builder.create();
        d.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

        coinsBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });
        cancelBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dismiss();
            }
        });
        checkInBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent i = new Intent(getContext(), DialogCheckinActivity.class);
                startActivity(i);
                d.dismiss();
            }
        });


        return d;
    }
}

Now, to launch the dialog, we call these lines:

FragmentManager fm = getSupportFragmentManager();
DailyCheckDialog alertDialog = new DailyCheckDialog();
alertDialog.show(fm, "fragment_alert");

Our custom dialog will be displayed.

Let us know in comments if you are having any question regarding this Android Custom Dialog Example.

And if you found this post helpful, then please help us by sharing this post with your friends learning Android Application Development. Thank You

Jazib
Hey guys, I have created this platform to share my knowledge with others and to keep you guys updated about the latest technologies.
Leave a Reply