Saturday, August 15, 2015

How to create an AlertDialog with custom layout/view in Android

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>
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>
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>
MainActivity.java

package com.cfsuman.me.androidcodesnippets;

import android.app.AlertDialog;
import android.content.DialogInterface;
import android.graphics.Color;
import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;
import android.view.LayoutInflater;


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();
            }
        });
  }
}




More android examples