Course Content
Android Basics
0/10
Android – Overview
Android – Environment Setup
Android – Architecture
Android – Application Components
Android – Hello World App
Android – Activities
Android – Services
Android – Broadcast Receivers
Android – Fragments
Android – Toast
Android – User Interface (UIs)
0/5
Android – UI Layouts
Android – UI Controls
Android – Event Handling
Android – Styles and Themes
Android – Custom Components
Android – Advanced
0/4
Android – Notifications
Android – Send Email
Android – Send SMS
Android – Make Phone Calls
Android – Examples
0/9
Android – Alert Dialog
Android – Alert Dialog with Custom Layout
00:00
Android – Animations
Android – AutoCompleteTextView
Android – Camera
Android – Clipboard
Android – Spinner
Android – ListView
Android – GridView
Android
    About Lesson

    What is an Alert Dialog in Android?

    An Alert Dialog is a small window that prompts the user to decide or provide information. You can customize its layout to fit your app’s requirements.

     

    Why Use a Custom Layout in Alert Dialog?

    A custom layout lets you design the dialog as you want it. It’s perfect for showing forms, custom messages, or styled buttons.

     

    Step-by-Step Tutorial to Create a Custom Alert Dialog in Android

    Follow these steps to create a custom Alert Dialog in an Android application using Java.

     

    Step 1: Set Up Your Android Project

    1. Open Android Studio.
    2. Create a new project or open an existing one.

     

    Step 2: Create a Custom Layout for the Dialog

    1. Navigate to the res/layout folder.
    2. Right-click and select New > Layout Resource File.
    3. Name the file custom_dialog.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="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <TextView
            android:id="@+id/tvDialogTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Custom Dialog Title"
            android:textSize="18sp"
            android:textStyle="bold"
            android:paddingBottom="10dp" />

        <EditText
            android:id="@+id/etInput"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter your input" />

        <Button
            android:id="@+id/btnSubmit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Submit"
            android:layout_marginTop="10dp" />
    </LinearLayout>

     

    Step 3: Create the Alert Dialog in Java

    1. Open the activity where you want to display the dialog.
    2. Use the following code:
    import android.app.AlertDialog;
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.widget.Button;
    import android.widget.EditText;
    import android.widget.TextView;
    import androidx.appcompat.app.AppCompatActivity;

    public class MainActivity extends AppCompatActivity {

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

            Button btnShowDialog = findViewById(R.id.btnShowDialog);
            btnShowDialog.setOnClickListener(v -> showCustomDialog());
        }

        private void showCustomDialog() {
            // Inflate custom layout Infovistar.in
            LayoutInflater inflater = getLayoutInflater();
            View dialogView = inflater.inflate(R.layout.custom_dialog, null);

            // Create AlertDialog Infovistar.in
            AlertDialog.Builder builder = new AlertDialog.Builder(this);
            builder.setView(dialogView);

            AlertDialog alertDialog = builder.create();

            // Initialize dialog views Infovistar.in
            TextView tvTitle = dialogView.findViewById(R.id.tvDialogTitle);
            EditText etInput = dialogView.findViewById(R.id.etInput);
            Button btnSubmit = dialogView.findViewById(R.id.btnSubmit);

            // Set button click listener
            btnSubmit.setOnClickListener(v -> {
                String input = etInput.getText().toString();
                alertDialog.dismiss(); // Close dialog
                // Handle the input
                // Example: Show input in a Toast
                Toast.makeText(this, "You entered: " + input, Toast.LENGTH_SHORT).show();
            });

            // Show the dialog
            alertDialog.show();
        }
    }

     

    Step 4: Update Your Main Layout

    Add a button in your activity’s layout file (activity_main.xml) to trigger the dialog:

    <Button
        android:id="@+id/btnShowDialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show Custom Dialog"
        android:layout_gravity="center"
        android:layout_marginTop="50dp" />

     

    Key Points to Remember

    • LayoutInflater is used to load the custom layout.
    • Use AlertDialog.Builder to create the dialog.
    • Always set up button click listeners inside the custom layout to manage user interactions.

     

    Final Output

    When the user taps the “Show Custom Dialog” button, a dialog appears with:

    • A title.
    • An input field.
    • A button to submit the input.

     

    Following this tutorial, you can easily create a custom Alert Dialog for your Android app. Use it to enhance user interaction and build professional-looking applications.

    Previous
    Next