Create AlertDialog with Custom Layout Programmatically

Home / Android / Create AlertDialog with Custom Layout Programmatically

As we discussed in the previous post about creating custom layout using XML layout. This post is about creating the same layout programatically. We will be creating all the views to be used in the AlertDialog programatically. Creating layout using XML or programatically is basically developers choice of development. And, it is better to know how things are done programatically, as well.

This post is forth in series of tutorials for creating and displaying AlertDialog.

 

Series Index of AlertDialog

  1. Create AlertDialog and Basic Usage
  2. Provide Selection from a list of options
  3. Create AlertDialog with Custom Layout using XML Layout
  4. Create AlertDialog with Custom Layout Programmatically
  5. Create AlertDialog with Complex Custom Layout Programmatically
  6. Override Button of AlertDialog




Create Android Application Project

If you are new to Android Studio, then you could learn about creating new projects from our tutorial Create Android Application Project in Android Studio Continued.

Create Android application project with following attributes.

Project Name Custom Alert Dialog
Package Name com.pcsalt.example.customalertdialogsimpleprogrammatically
Minimum SDK Version 19
Activity Type Empty Activity
Activity Name MainActivity
Layout Name activity_main

Create layout for MainActivity

activity_main.xml: In the MainActivity, we will display a button, when clicked it will display an AlertDialog.

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

Update MainActivity to Create and Display Custom AlertDialog Programmatically

MainActivity.java: In MainActivity, we will be creating an AlertDialog with one TextView and one EditText in it. These views will be added inside a LinearLayout. All three views will be created programmatically.

package com.pcsalt.example.customalertdialogsimpleprogrammatically;

import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.util.TypedValue;
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 -> createAndDisplayDialog());
    }

    private void createAndDisplayDialog() {
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        LinearLayout layout       = new LinearLayout(this);
        TextView tvMessage        = new TextView(this);
        final EditText etInput    = new EditText(this);

        tvMessage.setText("Enter name:");
        tvMessage.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16f);
        etInput.setSingleLine();
        layout.setOrientation(LinearLayout.VERTICAL);
        layout.addView(tvMessage);
        layout.addView(etInput);
        layout.setPadding(50, 40, 50, 10);

        builder.setView(layout);

        builder.setNegativeButton("Cancel", (dialog, which) -> {
            Toast.makeText(this, "Cancel clicked", Toast.LENGTH_SHORT).show();
            dialog.cancel();
        });

        builder.setPositiveButton("Done", (dialog, which) -> {
            String name = etInput.getText().toString();
            Toast.makeText(this, "Name entered: " + name, Toast.LENGTH_SHORT).show();
        });

        builder.create().show();
    }
}

Screenshots:

Download Source Code

Download Source Code

  • We shifted server and some blog post got corrupted. Now, blog post is updated and link to GitHub for source code is added. You can try it out now.

    Thank you for raising the concern.