How to Create a Custom AlertDialog in Android?
Sometimes in AlertDialog, there is a need to get input from the user or customize it according to our requirements. So we create custom AlertDialogs. This post will show how to customize the AlertDialogs and take input from it.
Below is the step-by-step implementation of the above approach:
Step 1: Create an XML file custom_layout.xml
Add the below code in custom_layout.xml. This code defines the alert dialog box dimensions and adds an edit text to it.
XML
<? 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" android:paddingLeft = "20dp" android:paddingRight = "20dp" > < EditText android:id = "@+id/editText" android:layout_width = "match_parent" android:layout_height = "wrap_content" /> </ LinearLayout > |
Step 2: Add a Button in activity_main.xml
The button when clicked will show the AlertDialog box.
XML
<? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:tools = "http://schemas.android.com/tools" android:id = "@+id/root" android:layout_width = "match_parent" android:layout_height = "match_parent" android:gravity = "center" android:orientation = "vertical" tools:context = ".MainActivity" > < Button android:layout_width = "match_parent" android:layout_height = "wrap_content" android:onClick = "showAlertDialogButtonClicked" android:text = "Show Dialog" /> </ LinearLayout > |
Step 3: Add custom_layout.xml file
Add custom_layout.xml in that activity in which you want to show a custom alert dialog here it is added in MainActivity.
Java
import android.os.Bundle; import android.view.View; import android.widget.EditText; import androidx.appcompat.app.AlertDialog; import androidx.appcompat.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_main); } public void showAlertDialogButtonClicked(View view) { // Create an alert builder AlertDialog.Builder builder = new AlertDialog.Builder( this ); builder.setTitle( "Name" ); // set the custom layout final View customLayout = getLayoutInflater().inflate(R.layout.custom_layout, null ); builder.setView(customLayout); // add a button builder.setPositiveButton( "OK" , (dialog, which) -> { // send data from the AlertDialog to the Activity EditText editText = customLayout.findViewById(R.id.editText); sendDialogDataToActivity(editText.getText().toString()); }); // create and show the alert dialog AlertDialog dialog = builder.create(); dialog.show(); } // Do something with the data coming from the AlertDialog private void sendDialogDataToActivity(String data) { Toast.makeText( this , data, Toast.LENGTH_SHORT).show(); } } |
Kotlin
import android.content.DialogInterface import android.os.Bundle import android.view.View import android.widget.EditText import android.widget.Toast import androidx.appcompat.app.AlertDialog import androidx.appcompat.app.AppCompatActivity class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContentView(R.layout.activity_main) } fun showAlertDialogButtonClicked() { // Create an alert builder val builder = AlertDialog.Builder( this ) builder.setTitle( "Name" ) // set the custom layout val customLayout: View = layoutInflater.inflate(R.layout.custom_layout, null ) builder.setView(customLayout) // add a button builder.setPositiveButton( "OK" ) { dialog: DialogInterface?, which: Int -> // send data from the AlertDialog to the Activity val editText = customLayout.findViewById<EditText>(R.id.editText) sendDialogDataToActivity(editText.text.toString()) } // create and show the alert dialog val dialog = builder.create() dialog.show() } // Do something with the data coming from the AlertDialog private fun sendDialogDataToActivity(data: String) { Toast.makeText( this , data, Toast.LENGTH_SHORT).show() } } |
Contact Us