android - Custom Alert Dialog with Multiple Views

Question

I'm trying to create a custom alert with cancel button shown in the below Picture, Please help me to create this. Thanks in advance.!

Answer 1

MainActivity class

    Button openAlert;

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

    openAlert = (Button)findViewById(R.id.openAlert);

    openAlert.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {


            AlertDialog.Builder alert = new AlertDialog.Builder(MainActivity.this);
            View alertView = getLayoutInflater().inflate(R.layout.custom_alert, null);

            //Set the view
            alert.setView(alertView);
            //Show alert
            final AlertDialog alertDialog = alert.show();
            //Can not close the alert by touching outside.
            alertDialog.setCancelable(false);
            alertDialog.setCanceledOnTouchOutside(false);
            alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

            ImageView closeButton = (ImageView) alertView.findViewById(R.id.closeButton);

            closeButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    alertDialog.dismiss();
                }
            });



        }
    });



}

MainActivity XML -> This is just a button that opens the alert

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.vzw.www.multviewalert.MainActivity">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="OPEN ALERT"
        android:id="@+id/openAlert"/>

</RelativeLayout>

You need to create a custom layout for the alert

custom_alert.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/alertContainer"
        android:background="@drawable/custom_alert_bg">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/rowOne">

            <ImageView
                android:id="@+id/rowOneButtonOne"
                android:background="#cdcdcd"
                android:layout_margin="4dp"
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:layout_weight="0.33"
                />

            <ImageView
                android:id="@+id/rowOneButtonTwo"
                android:background="#cdcdcd"
                android:layout_margin="4dp"
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:layout_weight="0.33"
                />

           <ImageView
                android:id="@+id/rowOneButtonThree"
                android:background="#cdcdcd"
                android:layout_margin="4dp"
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:layout_weight="0.33"
                />
        </LinearLayout>



    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/rowTwo"
        android:layout_below="@id/rowOne">

        <ImageView
            android:id="@+id/rowTwoButtonOne"
            android:background="#cdcdcd"
            android:layout_margin="4dp"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            />

        <ImageView
            android:id="@+id/rowTwoButtonTwo"
            android:background="#cdcdcd"
            android:layout_margin="4dp"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            />

        <ImageView
            android:id="@+id/rowTwoButtonThree"
            android:background="#cdcdcd"
            android:layout_margin="4dp"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/rowThree"
        android:layout_below="@id/rowTwo">

        <ImageView
            android:id="@+id/rowThreeButtonOne"
            android:background="#cdcdcd"
            android:layout_margin="4dp"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            />

        <ImageView
            android:id="@+id/rowThreeButtonTwo"
            android:background="#cdcdcd"
            android:layout_margin="4dp"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            />

        <ImageView
            android:id="@+id/rowThreeButtonThree"
            android:background="#cdcdcd"
            android:layout_margin="4dp"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            />
    </LinearLayout>

</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

</RelativeLayout>

<ImageView
    android:id="@+id/closeButton"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_weight="0.33"
    android:background="#cdcdcd" />


</RelativeLayout>

Here is the drawable for the alert background custom_alert_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="#ffffff"/>
    <corners
        android:radius="5dp" />
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp" />
</shape>

This will produce the following

this is a skeleton.... you have to fill it in with your images and on click listeners for each.

Also, if you want to move the top section down. you can add

android:layout_marginTop="50dp"

to the alertContainer ID in the custom_alert.xml