Android custom dialog example

In this tutorial, we show you how to create a custom dialog in Android. See following steps :

1. Create a custom dialog layout (XML file).
2. Attach the layout to Dialog.
3. Display the Dialog.
4. Done.

1 Android Layout Files

Two XML files, one for main screen, one for custom dialog.
File : res/layout/main.xml

<?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" >
 
    <Button
        android:id="@+id/btnLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login Dialog" />
 
</LinearLayout>

File : res/layout/login.xml

<?xml version="1.0" encoding="UTF-8"?>
    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/tableLayout1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/sldjfsjdflsdf"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:src="@drawable/user" />

            <EditText
                android:id="@+id/editText1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1" >

                <requestFocus />
            </EditText>

        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:src="@drawable/password" />

            <EditText
                android:id="@+id/editText2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:inputType="textPassword" />

        </LinearLayout>

        <Button
            android:id="@+id/btnLoginPrompt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/login" />

    </TableLayout>
    

Read the comment and demo in next step, it should be self-explorary.

Button btnLogin = (Button)findViewById(R.id.btnLogin);
btnLogin.setOnClickListener(new OnClickListener() {   
 public void onClick(View arg0) {
  final Dialog dialog = new Dialog(ContactspaceandroidActivity.this);
  dialog.setContentView(R.layout.login);
  dialog.setTitle("Title...");
  
  dialog.show();
  
  Button azxc = (Button) dialog.findViewById(R.id.btnLoginPrompt);
  azxc.setOnClickListener(new OnClickListener() {    
   @Override
      public void onClick(View arg0) {
       System.out.println("BTN LOGIN CLICKED.");
       EditText txtUserName = (EditText) dialog.findViewById(R.id.txtUserName);
       EditText txtPassword = (EditText) dialog.findViewById(R.id.txtPassword);
       if(txtUserName.getText().length() <= 0) {
        Toast.makeText(ContactspaceandroidActivity.this, "Enter username.", Toast.LENGTH_LONG).show();
        return;
       }
       if(txtPassword.getText().length() <= 0) {
        Toast.makeText(ContactspaceandroidActivity.this, "Enter password.", Toast.LENGTH_LONG).show();
        return;
       }
      }
  });    
 }
});