Anand Vardhan Anand Vardhan - 2 months ago 7
Android Question

Fully Custom Dialog Box in Android

<?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.

Answer

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.

Comments