Create AlertDialog with complex custom layout programmatically

Home / Android / Create AlertDialog with complex custom layout programmatically

This tutorial is for the creating AlertDialog similar to the login screen. But, the views are added programmatically, instead of creating and inflating an XML layout inside it.


main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn_show_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show Dialog"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

MyEditText.java

package com.pcsalt.example.customalertdialogdemo2;

import android.content.Context;
import android.support.v7.widget.AppCompatEditText;
import android.view.ViewGroup.LayoutParams;
import android.view.inputmethod.EditorInfo;
import android.widget.LinearLayout;

public class MyEditText extends AppCompatEditText {

    public MyEditText(Context context) {
        super(context);
        this.setSingleLine();
        this.setImeOptions(EditorInfo.IME_ACTION_DONE);
        this.setImeActionLabel("Done", EditorInfo.IME_ACTION_DONE);
        this.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
    }
}




MainActivity.java

package com.pcsalt.example.customalertdialogdemo2;

import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        findViewById(R.id.btn_show_dialog).setOnClickListener(view -> showCustomDialog());
    }

    private void showCustomDialog() {
        LinearLayout ll_Main = new LinearLayout(this);
        LinearLayout ll_Row1 = new LinearLayout(this);
        LinearLayout ll_Row2 = new LinearLayout(this);

        ll_Main.setOrientation(LinearLayout.VERTICAL);
        ll_Main.setPadding(10, 10, 10, 10);
        ll_Row1.setOrientation(LinearLayout.HORIZONTAL);
        ll_Row1.setPadding(10, 10, 10, 10);
        ll_Row2.setOrientation(LinearLayout.HORIZONTAL);
        ll_Row2.setPadding(10, 10, 10, 10);

        final EditText et_User = new MyEditText(this);
        final EditText et_Pass = new MyEditText(this);

        TextView tv_User = new TextView(this);
        TextView tv_Pass = new TextView(this);

        tv_User.setText("Username: ");
        tv_Pass.setText("Password: ");

        ll_Row1.addView(tv_User);
        ll_Row1.addView(et_User);
        ll_Row2.addView(tv_Pass);
        ll_Row2.addView(et_Pass);
        ll_Main.addView(ll_Row1);
        ll_Main.addView(ll_Row2);

        AlertDialog.Builder alert = new AlertDialog.Builder(this);
        alert.setTitle("Custom Login");
        alert.setView(ll_Main);
        alert.setCancelable(false);
        alert.setPositiveButton("Login", (dialog, which) -> {
            String user = et_User.getText().toString();
            String pass = et_Pass.getText().toString();
            Toast.makeText(getBaseContext(), "User: " + user + " Password: " + pass, Toast.LENGTH_SHORT).show();
        });
        alert.setNegativeButton("Cancel", (dialog, which) -> dialog.dismiss());

        AlertDialog dialog = alert.create();
        dialog.show();
    }
}

Screenshots

CustomAlertDialogDemo21 CustomAlertDialogDemo21 CustomAlertDialogDemo21 CustomAlertDialogDemo21

Download source: