Wednesday, December 18, 2019

How to custom layout AlertDialog in Android

Step 1. Create a file activity_main.xml
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    tools:context=".MainActivity"
    android:background="#ecd235"
    >
    <TextView
        android:id="@+id/tv_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Simple TextView"
        android:textSize="35dp"
        />
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Apply Red Color Text"
        android:layout_below="@id/tv_message"
        />
</RelativeLayout>
Step 2. Custom layout alertDialog in android alertdialog_custom_view.xml
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/dialog_rl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    tools:context=".MainActivity"
    android:background="#c9d4f6"
    >
    <TextView
        android:id="@+id/dialog_titile"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Confirm the change."
        android:padding="5dp"
        android:background="#a2abcd"
        android:textSize="15dp"
        />
    <TextView
        android:id="@+id/dialog_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Want to change the text color?"
        android:padding="15dp"
        android:layout_below="@id/dialog_titile"
        />
    <Button
        android:id="@+id/dialog_neutral_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cancel"
        android:layout_below="@id/dialog_tv"
        android:background="@drawable/button_bg"
        />
    <Button
        android:id="@+id/dialog_positive_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Yes"
        android:layout_alignBaseline="@id/dialog_neutral_btn"
        android:layout_alignParentRight="true"
        android:background="@drawable/button_bg"
        />
    <Button
        android:id="@+id/dialog_negative_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="No"
        android:layout_toLeftOf="@id/dialog_positive_btn"
        android:layout_alignBaseline="@id/dialog_neutral_btn"
        android:background="@drawable/button_bg"
        android:layout_marginRight="3dp"
        />
</RelativeLayout>
Step 3. Create a file res/drawable/button_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#d2ddff"/>
        </shape>
    </item>
</selector>
Step 4. Create a class MainActivity.java
public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // Get reference of widgets from XML layout
        final RelativeLayout rl = (RelativeLayout) findViewById(R.id.rl);
        final TextView tv_message = (TextView) findViewById(R.id.tv_message);
        Button btn = (Button) findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Build an AlertDialog
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                LayoutInflater inflater = getLayoutInflater();
                View dialogView = inflater.inflate(R.layout.alertdialog_custom_view,null);
                // Set the custom layout as alert dialog view
                builder.setView(dialogView);
                // Get the custom alert dialog view widgets reference
                Button btn_positive = (Button) dialogView.findViewById(R.id.dialog_positive_btn);
                Button btn_negative = (Button) dialogView.findViewById(R.id.dialog_negative_btn);
                Button btn_neutral = (Button) dialogView.findViewById(R.id.dialog_neutral_btn);
                // Create the alert dialog
                final AlertDialog dialog = builder.create();
                // Set positive/yes button click listener
                btn_positive.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // Dismiss the alert dialog
                        dialog.cancel();
                        tv_message.setText("Yes button clicked");
                        // Set the TextView text color red
                        tv_message.setTextColor(Color.RED);
                    }
                });
                // Set negative/no button click listener
                btn_negative.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // Dismiss the alert dialog
                        dialog.cancel();
                        tv_message.setText("No button clicked");
                    }
                });
                // Set cancel/neutral button click listener
                btn_neutral.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // Dismiss/cancel the alert dialog
                        dialog.cancel();
                        tv_message.setText("Cancel button clicked");
                    }
                });
                // Display the custom alert dialog on interface
                dialog.show();
            }
        });
  }
}
Result:
How to custom layout AlertDialog in Android

2 comments: