How to load external custom XML layout file inside alert dialog as its screen view.

Alert dialog can also support external custom layout files that means if you have design some custom layout using xml that can be easily load as alert dialog screen and while loading custom layout it will open the whole selected layout as alert dialog screen . So here is the complete step by step tutorial for Create AlertDialog with custom xml View/Layout file in android.

Create AlertDialog with custom xml View/Layout file in android.

Code for MainActivity.java file.

 package com.alertdialogwithcustomxml_android_examples.com;

import android.app.Activity;
import android.app.AlertDialog;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity {

 Button button;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 button = (Button)findViewById(R.id.buttonMain);
 
 button.setOnClickListener(new View.OnClickListener() {
 
 @Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 
 
 AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);

 LayoutInflater inflater = getLayoutInflater();
 View dialogView = inflater.inflate(R.layout.custom_layout,null);

 builder.setView(dialogView);

 Button one = (Button) dialogView.findViewById(R.id.button1);
 Button two = (Button) dialogView.findViewById(R.id.button2);
 Button three = (Button) dialogView.findViewById(R.id.button3);

 
 final AlertDialog dialog = builder.create();


 one.setOnClickListener(new View.OnClickListener() {
 
 @Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 
 Toast.makeText(MainActivity.this, "Button 1 Selected", Toast.LENGTH_LONG).show();
 
 }
 });
 
 two.setOnClickListener(new View.OnClickListener() {
 
 @Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 
 Toast.makeText(MainActivity.this, "Button 2 Selected", Toast.LENGTH_LONG).show();
 
 }
 });

 three.setOnClickListener(new View.OnClickListener() {
 
 @Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 
 Toast.makeText(MainActivity.this, "Button 3 Selected", Toast.LENGTH_LONG).show();
 
 }
 });
 
 // Display the custom alert dialog on interface
 dialog.show();
 }
 
 });
 
 }

}

Code for activity_main.xml layout file.

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.alertdialogwithcustomxml_android_examples.com.MainActivity" >

 <Button
 android:id="@+id/buttonMain"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerHorizontal="true"
 android:layout_centerVertical="true"
 android:text="Click here to open AlertDialog with custom xml View/Layout file" />

</RelativeLayout>

Code for custom_layout.xml file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="250dp"
 
 >

 <TextView
 android:id="@+id/textView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true"
 android:text="AlertDialog Title"
 android:textAppearance="?android:attr/textAppearanceLarge"
 android:layout_marginTop="20dp" 
 android:layout_marginBottom="20dp"/>

 <Button
 android:id="@+id/button3"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignBaseline="@+id/button2"
 android:layout_alignBottom="@+id/button2"
 android:layout_alignParentRight="true"
 android:text="Button-3" />

 <Button
 android:id="@+id/button2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignBaseline="@+id/button1"
 android:layout_alignBottom="@+id/button1"
 android:layout_centerHorizontal="true"
 android:text="Button-2" />

 <View
 android:id="@+id/view1"
 android:layout_width="fill_parent"
 android:layout_height="2dp"
 android:layout_alignParentLeft="true"
 android:layout_below="@+id/textView1"
 android:background="#03bd70" />

 <Button
 android:id="@+id/button1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentLeft="true"
 android:layout_below="@+id/view1"
 android:layout_marginTop="78dp"
 android:text="Button-1" />

 <TextView
 android:id="@+id/textView2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_below="@+id/view1"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="26dp"
 android:text="Please select Any Button"
 android:textAppearance="?android:attr/textAppearanceLarge" />
 
</RelativeLayout>

Screenshot: