Monday, February 8, 2010

Creating custom dialog in Android

This blog shows you an example on how to create custom dialog. For more information on creating different kind of dialogs, please visit http://developer.android.com/guide/topics/ui/dialogs.html
1. Create layout for the dialog
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="10sp">
<EditText android:text=""
android:id="@+id/categoryEditText"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:singleLine="true">
</EditText>
</LinearLayout>



2. Override onCreateDialog in the Activity
@Override
protected Dialog onCreateDialog(int id) {
switch (id) {
case CATEGORY_DETAIL:
LayoutInflater li = LayoutInflater.from(this);
View categoryDetailView = li.inflate(R.layout.category_detail, null);

AlertDialog.Builder categoryDetailBuilder = new AlertDialog.Builder(this);
categoryDetailBuilder.setTitle("Edit Category");
categoryDetailBuilder.setView(categoryDetailView);
AlertDialog categoryDetail = categoryDetailBuilder.create();

categoryDetail.setButton("OK", new OnClickListener(){

@Override
public void onClick(DialogInterface dialog, int which) {
AlertDialog categoryDetail = (AlertDialog)dialog;
EditText et = (EditText)categoryDetail.findViewById(R.id.categoryEditText);
if (categories.get(selectedIndex)!=null){
//... some code
}
});

categoryDetail.setButton2("Cancel", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
return;
}});

return categoryDetail;
default:
break;
}
return null;
}


3. Override onPrepareDialog to dynamically set default value before the dialog is open
@Override
protected void onPrepareDialog(int id, Dialog dialog) {
switch (id) {
case CATEGORY_DETAIL:
AlertDialog categoryDetail = (AlertDialog)dialog;
EditText et = (EditText)categoryDetail.findViewById(R.id.categoryEditText);
et.setText(defaultValue);
break;
default:
break;
}
}


4. Call showDialog to display the dialog
static final private int CATEGORY_DETAIL = 1;
//... some code
showDialog(CATEGORY_DETAIL);


6 comments:

  1. exactly what I needed! thanks!

    ReplyDelete
  2. Thankyou. But it would have been really helpful if you could put a screenshot of the final thing.

    ReplyDelete
  3. You can use this example if you like to use animated custom dialog with gradient effect in the linearlayout http://android-codes-examples.blogspot.com/2011/04/animated-customized-popup-transparent.html

    ReplyDelete
  4. As an example of a custom dialog box, part of my Windows Phone 7 User Interface for Android OS version 1.6+ I did WP Seven dialog boxes. Just extend Dialog and override styles.
    To see a demo:

    http://forum.xda-developers.com/showthread.php?t=1134834 (Developer Forum)
    https://market.android.com/details?id=com.tombarrasso.android.wp7uidemo (Market Donate Version)

    ReplyDelete
  5. final Dialog dialog = new Dialog(context);
    dialog.setContentView(R.layout.about);
    dialog.setTitle("About | My App");

    // set the custom dialog components - text, image and button
    TextView credits = (TextView) dialog.findViewById(R.id.credits);
    credits.setText("Credits");
    TextView developedby = (TextView) dialog.findViewById(R.id.developedby);
    developedby.setText("Developed by:");
    TextView devnames = (TextView) dialog.findViewById(R.id.devnames);
    devnames.setText("My Name:");


    Can you do that?

    ReplyDelete