Fully Custom Dialog Box in Android

Question

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:elevation="4dp"

    android:background="@color/colorWhite">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/add_album_title"
        android:shadowColor="@color/colorWhite"
        android:text="Enter the Album Name"
        android:textSize="20sp"
        />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/new_album_name"
        android:textSize="25sp"
        android:hint="Album name"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="2">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/add_new_album_button"
        android:text="Add"
        android:textAllCaps="false"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:id="@+id/cancel_new_album_button"
        android:text="Cancel"
        android:textAllCaps="false"/>
    </LinearLayout>
</LinearLayout>

I have this code as layout. I want to set this as a dialog in my Activity. But when I run it just looks so plain. I am beginner in Android with not much styling knowledge. Can somebody please help me style the Dialog Box.

Here is my code for implementing it. I have just commented the buttons because right now my focus is on styling and making it more attractive.

public class AddAlbumDialog extends DialogFragment {
    Button addButton,cancelButton;
    EditText newAlbumName;
    TextView title;
    Context context;

    public AddAlbumDialog() {
        //Empty Constructor
    }



    @Override
    public void onStart() {
        super.onStart();

        Dialog dialog = getDialog();
        if (dialog != null) {
            dialog.getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
            dialog.getWindow().setGravity(Gravity.CENTER);
        }
    }


    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        final AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());

        // Get the layout inflater
        LayoutInflater inflater = getActivity().getLayoutInflater();
        builder.setCancelable(false);


        // Inflate and set the layout for the dialog
        // Pass null as the parent view because its going in the dialog layout
        builder.setView(inflater.inflate(R.layout.add_album_dialog_fragment,null));
                // Add action buttons
//        .setPositiveButton(R.string.add_album, null)
//            @Override
//            public void onClick(DialogInterface dialog, int which) {
//                Dialog d = (Dialog) dialog;
//
//                EditText newAddAlbum = (EditText) d.findViewById(R.id.new_album_name);
//                newAddAlbum.requestFocus();
//                if (newAddAlbum.getText().toString().trim().isEmpty()) {
//                    Toast.makeText(getActivity(), "Empty Name Cannot Add", Toast.LENGTH_SHORT).show();
//
//                } else {
//                    mListener.onDialogPositiveClick(AddAlbumDialog.this, newAddAlbum);
//                }
//            }
//        })
                //Add Negative Button
//        .setNegativeButton(R.string.cancel_dialog, new DialogInterface.OnClickListener() {
//            @Override
//            public void onClick(DialogInterface dialog, int which) {
//                Toast.makeText(getActivity(), "Cancel Called Name", Toast.LENGTH_SHORT).show();
//                mListener.onDialogNegativeClick(AddAlbumDialog.this);
//                dismiss();
//            }
//        });




        return builder.create();
    }









    /* The activity that creates an instance of this dialog fragment must
    * implement this interface in order to receive event callbacks.
    * Each method passes the DialogFragment in case the host needs to query it. */
    public interface AddAdlbumListener {
        public void onDialogPositiveClick(DialogFragment dialog,EditText newAlbumName);
        public void onDialogNegativeClick(DialogFragment dialog);
    }

    // Use this instance of the interface to deliver action events
    AddAdlbumListener mListener;

    // Override the Fragment.onAttach() method to instantiate the NoticeDialogListener
    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
        // Verify that the host activity implements the callback interface
        try {
            // Instantiate the NoticeDialogListener so we can send events to the host
            mListener = (AddAdlbumListener) activity;
        } catch (ClassCastException e) {
            // The activity doesn't implement the interface, throw exception
            throw new ClassCastException(activity.toString() + " must implement NoticeDialogListener");
        }
    }




}

And in the main activity I am using this code for showing it.

AddAlbumDialog addAlbumDialog=new AddAlbumDialog();


addAlbumDialog.show(getSupportFragmentManager(),"Custom Dialog");

I will be very thankful if anyone could help.

Follow http://www.mkyong.com/android/android-custom-dialog-example/ — D Agrawal, Apr 02 '16 at 05:26

score 2 · Accepted Answer · answered Apr 02 '16 at 05:40

If you want to make customize dialog with the good look then you need to set Style and Theme of your dialog.

A style is a collection of properties that specify the look and format for a View or window.

I am just posting you some example of style which you can set it to your dialog by below line:

Dialog dialog = new Dialog(YourActivity.this, R.style.MyTheme);

style.xml

You need to create new style in style.xml:

<style name="CustomDialogTheme" parent="@android:style/Theme.Dialog">
    <item name="android:bottomBright">@color/white</item>
    <item name="android:bottomDark">@color/white</item>
    <item name="android:bottomMedium">@color/white</item>
    <item name="android:centerBright">@color/white</item>
    <item name="android:centerDark">@color/white</item>
    <item name="android:centerMedium">@color/white</item>
    <item name="android:fullBright">@color/orange</item>
    <item name="android:fullDark">@color/orange</item>
    <item name="android:topBright">@color/blue</item>
    <item name="android:topDark">@color/blue</item>
</style>

<style name="MyTheme">
    <item name="android:alertDialogStyle">@style/CustomDialogTheme</item>
</style>

This is just an example. If you want to get more details please follow the below link: http://blog.supenta.com/2014/07/02/how-to-style-alertdialogs-like-a-pro/

Hope it will help you.

Thanks Kishu, really helpful and quick reply. – Anand Vardhan Apr 02 '16 at 05:58 — Anand Vardhan, Apr 02 '16 at 05:58

score 1 · Answer 2 · answered Apr 02 '16 at 05:28

   public void dialog()
    {
        final Dialog dialog = new Dialog(HomeActivity.this, R.style.cust_dialog);
        dialog.setTitle("Select Content Language");

        dialog.setContentView(R.layout.add_album_dialog_fragment);
      //  dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        dialog.setCanceledOnTouchOutside(false);
        dialog.setCancelable(false);

        Button  button=(Button)dialog.findViewById(R.id.textView_camera);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialogLanguage();
                ll_slide.setVisibility(View.GONE);

                dialog.dismiss();
            }
        });

        dialog.show();
    }

and set style in style.xml:

 <style name="cust_dialog" parent="@android:style/Theme.Dialog">
        <item name="android:windowTitleStyle">@style/dialog_title_style</item>

    </style>
  <style name="dialog_title_style" parent="android:Widget.TextView">
        <item name="android:background">@color/status_bar</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:textSize">20sp</item>
        <item name="android:padding">10dp</item>
        <item name="android:gravity">center_horizontal|center_vertical</item>
    </style>

Thanks Android Geek, for your quick and helpful reply. Thank You. — Anand Vardhan, Apr 02 '16 at 06:01
@AnandVardhan Great...if this helped you can upvote for the answer ....thanks in advance :) — Android Geek, Apr 02 '16 at 06:02

Fully Custom Dialog Box in Android

2 Answers2