Como Exibir um AlertDialog Customizado no Android

O Android possui duas formas para exibir mensagens para o usuário, uma através de mensagens simples de texto que são exibidas de forma temporizada, e outra através de telas de mensagens utilizando o componente AlertDialog, que pode ser customizado para exibir por exemplo, caixas de texto, barra de progresso, lista de itens entre outros componentes.

Este post detalha como criar uma tela de mensagem utilizando o AlertDialog customizado no formato de uma tela de login, com caixas de texto para inserir o nome de usuário e a senha. A tela de login vai ser apresentada como ilustrado na figura abaixo.

Para exibir a tela de mensagem foi criado um projeto com uma Activity e o botão Exibir AlertDialog, que no momento em que for clicado exibe a Tela de Login. O usuário deve inserir o nome de usuário e uma senha. Caso a senha esteja correta será exibida a mensagem “Senha correta” e se estiver errada, a mensagem “Senha incorreta”. 

Para exibir o AlertDialog com uma tela customizada é necessário criar a tela com as caixas de texto para o nome do usuário e a senha. Os botões Ok e Cancelar são configurados programaticamente no momento da configuração do AlertDialog. A Listagem 1 mostra o arquivo Xml com o layout da tela de login.

Listagem 1

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <EditText
        android:id="@+id/textUsuario"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Digite o usuário">
        <requestFocus />
    </EditText>
    
    <EditText
        android:id="@+id/textSenha"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Digite a senha">
    </EditText>
    
</LinearLayout>

Para criar o AlertDialog foi criada a classe LoginFragment que herda da classe DialogFragment. No método onCreateDialog(Bundle) foi feita toda a configuração do AlertDialog, conforme mostrado na Listagem 2.

Listagem 2

public class LoginFragment extends DialogFragment {
private EditText editSenha;
private EditText editUsuario;
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
    
        // Cria o objeto para configurar o AlertDialog
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());

        // Define o layout do AlertDialog
        LayoutInflater inflater = getActivity().getLayoutInflater();
        View dialogView = inflater.inflate(R.layout.login, null);
        builder.setView(dialogView);

        // Título do AlertDialog
        builder.setTitle("Login");
        
        // Define os campos de usuário e senha
        editSenha = (EditText)dialogView.findViewById(R.id.textSenha);
        editUsuario = (EditText)dialogView.findViewById(R.id.textUsuario);
        
        // Configura o botão de Ok
        builder.setPositiveButton("Ok", new DialogInterface.OnClickListener() {
            
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // Se digitada a senha 1234 informa que a 
                // senha está correta
                if(editSenha.getText().toString().equals("1234")){
                    Toast.makeText(getActivity(), "Senha correta",
                    Toast.LENGTH_SHORT).show();
                }
                else {
                    Toast.makeText(getActivity(), "Senha incorreta",
                    Toast.LENGTH_SHORT).show();
                }
            }
        });
        // Configura o botão de Cancelar
        builder.setNegativeButton("Cancelar", new DialogInterface.OnClickListener() {
            
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // Fecha o AlertDialog 
                dismiss();
            }
        });
        
        // Cria o objeto AlertDialog
        return builder.create();

    }

}

Para exibir a Tela de Login foi criado o método exibirAlertDialog() que será chamado quando o botão Exibir AlertDialog for clicado, conforme mostrado na Listagem 3.
Listagem 3

    private void exibirAlertDialog(){
        DialogFragment login = new LoginFragment();
        login.show(getFragmentManager(), "login");
    }

O método exibirAlertDialog() deve ser inserido no método onClick(View) do botão Exibir AlertDialog.
Quando o botão Exibir AlertDialog for clicado a Tela de Login será exibida. O usuário deve então digitar o nome de usuário e a senha 1234 para que seja exibida a mensagem “Senha correta”.