Android Create User Input Popup Dialog By Custom AlertDialog Example

This example will show you how to create a popup dialog with user input controls when the user clicks a button in the main activity screen. The popup dialog customizes the android.support.v7.app.AlertDialog class.

1. Create Android Popup Dialog With Input UI Controls Steps.

  1. Design and create the popup dialog UI layout XML file in the app/res/layout folder. The layout XML file is popup_input_dialog.xml in this example.
    user-input-popup-dialog-layout-xml-file
  2. Use LayoutInflater to inflate the above layout XML file to get the popup dialog view object.
    LayoutInflater layoutInflater = LayoutInflater.from(MainActivity.this);
    View popupInputDialogView = layoutInflater.inflate(R.layout.popup_input_dialog, null);
  3. Set above popup dialog view object to AlertDialog object and show the AlertDialog.
    alertDialogBuilder.setView(popupInputDialogView);

2. User Input Popup Dialog Extends AlertDialog Example.

2.1 Example Execute Steps.

  1. When the user clicks the Open Overlay Popup Dialog button on the main activity screen, it will pop up a dialog that lets the user input username, password, and email.
    main-activity-with-button
  2. When the user clicks the Save User Data button to save the input data, all the data will be displayed in the main activity screen list view object.
    user-input-popup-dialog
  3. When the user clicks the button in the main activity again, if the list view contains data, it will display those data in the popup dialog input text box.
  4. Below are the example android project files.

    C:\WORKSPACE\WORK\DEV2QA.COM-EXAMPLE-CODE\ANDROIDEXAMPLEPROJECT\OVERLAYPOPUPDIALOG
    │   .gitignore
    │   build.gradle
    │   gradle.properties
    │   gradlew
    │   gradlew.bat
    │   settings.gradle
    │
    ├───.idea
    │       gradle.xml
    │       misc.xml
    │       modules.xml
    │       runConfigurations.xml
    │
    ├───app
    │   │   .gitignore
    │   │   build.gradle
    │   │   proguard-rules.pro
    │   │
    │   └───src
    │       ├───androidTest
    │       │   └───java
    │       │       └───com
    │       │           └───dev2qa
    │       │               └───overlaypopupdialog
    │       │                       ExampleInstrumentedTest.java
    │       │
    │       ├───main
    │       │   │   AndroidManifest.xml
    │       │   │
    │       │   ├───java
    │       │   │   └───com
    │       │   │       └───dev2qa
    │       │   │           └───overlaypopupdialog
    │       │   │                   MainActivity.java
    │       │   │
    │       │   └───res
    │       │       ├───drawable
    │       │       │       ic_launcher_background.xml
    │       │       │
    │       │       ├───drawable-v24
    │       │       │       ic_launcher_foreground.xml
    │       │       │
    │       │       ├───layout
    │       │       │       activity_main.xml
    │       │       │       popup_input_dialog.xml
    │       │       │
    │       │       ├───mipmap-anydpi-v26
    │       │       │       ic_launcher.xml
    │       │       │       ic_launcher_round.xml
    │       │       │
    │       │       ├───mipmap-hdpi
    │       │       │       ic_launcher.png
    │       │       │       ic_launcher_round.png
    │       │       │
    │       │       ├───mipmap-mdpi
    │       │       │       ic_launcher.png
    │       │       │       ic_launcher_round.png
    │       │       │
    │       │       ├───mipmap-xhdpi
    │       │       │       ic_launcher.png
    │       │       │       ic_launcher_round.png
    │       │       │
    │       │       ├───mipmap-xxhdpi
    │       │       │       ic_launcher.png
    │       │       │       ic_launcher_round.png
    │       │       │
    │       │       ├───mipmap-xxxhdpi
    │       │       │       ic_launcher.png
    │       │       │       ic_launcher_round.png
    │       │       │
    │       │       └───values
    │       │               colors.xml
    │       │               strings.xml
    │       │               styles.xml
    │       │
    │       └───test
    │           └───java
    │               └───com
    │                   └───dev2qa
    │                       └───overlaypopupdialog
    │                               ExampleUnitTest.java
    │
    └───gradle
        └───wrapper
                gradle-wrapper.jar
                gradle-wrapper.properties
  5. There are three important files, MainActivity.javaactivity_main.xmlpopup_input_dialog.xml.

2.2 Main Activity Java File.

  1. MainActivity.java
    package com.dev2qa.overlaypopupdialog;
    
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.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.ListAdapter;
    import android.widget.ListView;
    import android.widget.SimpleAdapter;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.Iterator;
    import java.util.List;
    import java.util.Map;
    import java.util.Set;
    
    public class MainActivity extends AppCompatActivity {
    
        // This button is placed in main activity layout.
        private Button openInputPopupDialogButton = null;
        // This listview is just under above button.
        private ListView userDataListView = null;
    
    
        // Below edittext and button are all exist in the popup dialog view.
        private View popupInputDialogView = null;
        // Contains user name data.
        private EditText userNameEditText = null;
        // Contains password data.
        private EditText passwordEditText = null;
        // Contains email data.
        private EditText emailEditText = null;
        // Click this button in popup dialog to save user input data in above three edittext.
        private Button saveUserDataButton = null;
        // Click this button to cancel edit user data.
        private Button cancelUserDataButton = null;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            setTitle("dev2qa.com - Android Popup Overlay Input Dialog Example.");
    
            initMainActivityControls();
    
            // When click the open input popup dialog button.
            openInputPopupDialogButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
    
                    // Create a AlertDialog Builder.
                    AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(MainActivity.this);
                    // Set title, icon, can not cancel properties.
                    alertDialogBuilder.setTitle("User Data Collection Dialog.");
                    alertDialogBuilder.setIcon(R.drawable.ic_launcher_background);
                    alertDialogBuilder.setCancelable(false);
    
                    // Init popup dialog view and it's ui controls.
                    initPopupViewControls();
    
                    // Set the inflated layout view object to the AlertDialog builder.
                    alertDialogBuilder.setView(popupInputDialogView);
    
                    // Create AlertDialog and show.
                    final AlertDialog alertDialog = alertDialogBuilder.create();
                    alertDialog.show();
    
                    // When user click the save user data button in the popup dialog.
                    saveUserDataButton.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View view) {
    
                            // Get user data from popup dialog editeext.
                            String userName = userNameEditText.getText().toString();
                            String password = passwordEditText.getText().toString();
                            String email = emailEditText.getText().toString();
    
                            // Create data for the listview.
                            String[] titleArr = { "User Name", "Password", "Email"};
                            String[] dataArr = {userName, password, email};
    
                            ArrayList<Map<String,Object>> itemDataList = new ArrayList<Map<String,Object>>();;
    
                            int titleLen = titleArr.length;
                            for(int i =0; i < titleLen; i++) {
                                Map<String,Object> listItemMap = new HashMap<String,Object>();
                                listItemMap.put("title", titleArr[i]);
                                listItemMap.put("data", dataArr[i]);
                                itemDataList.add(listItemMap);
                            }
    
                            SimpleAdapter simpleAdapter = new SimpleAdapter(MainActivity.this,itemDataList,android.R.layout.simple_list_item_2,
                                    new String[]{"title","data"},new int[]{android.R.id.text1,android.R.id.text2});
    
                            userDataListView.setAdapter(simpleAdapter);
    
                            alertDialog.cancel();
                        }
                    });
    
                    cancelUserDataButton.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View view) {
                            alertDialog.cancel();
                        }
                    });
                }
            });
    
        }
    
    
        /* Initialize main activity ui controls ( button and listview ). */
        private void initMainActivityControls()
        {
            if(openInputPopupDialogButton == null)
            {
                openInputPopupDialogButton = (Button)findViewById(R.id.button_popup_overlay_input_dialog);
            }
    
            if(userDataListView == null)
            {
                userDataListView = (ListView)findViewById(R.id.listview_user_data);
            }
        }
    
        /* Initialize popup dialog view and ui controls in the popup dialog. */
        private void initPopupViewControls()
        {
            // Get layout inflater object.
            LayoutInflater layoutInflater = LayoutInflater.from(MainActivity.this);
    
            // Inflate the popup dialog from a layout xml file.
            popupInputDialogView = layoutInflater.inflate(R.layout.popup_input_dialog, null);
    
            // Get user input edittext and button ui controls in the popup dialog.
            userNameEditText = (EditText) popupInputDialogView.findViewById(R.id.userName);
            passwordEditText = (EditText) popupInputDialogView.findViewById(R.id.password);
            emailEditText = (EditText) popupInputDialogView.findViewById(R.id.email);
            saveUserDataButton = popupInputDialogView.findViewById(R.id.button_save_user_data);
            cancelUserDataButton = popupInputDialogView.findViewById(R.id.button_cancel_user_data);
    
            // Display values from the main activity list view in user input edittext.
            initEditTextUserDataInPopupDialog();
        }
    
    
        /* Get current user data from listview and set them in the popup dialog edittext controls. */
        private void initEditTextUserDataInPopupDialog()
        {
            List<String> userDataList = getExistUserDataInListView(userDataListView);
    
            if(userDataList.size() == 3)
            {
                String userName = userDataList.get(0);
    
                String password = userDataList.get(1);
    
                String email = userDataList.get(2);
    
                if(userNameEditText != null)
                {
                    userNameEditText.setText(userName);
                }
    
                if(passwordEditText != null)
                {
                    passwordEditText.setText(password);
                }
    
                if(emailEditText != null)
                {
                    emailEditText.setText(email);
                }
            }
        }
    
        /* If user data exist in the listview then retrieve them to a string list. */
        private List<String> getExistUserDataInListView(ListView listView)
        {
            List<String> ret = new ArrayList<String>();
    
            if(listView != null)
            {
                ListAdapter listAdapter = listView.getAdapter();
    
                if(listAdapter != null) {
    
                    int itemCount = listAdapter.getCount();
    
                    for (int i = 0; i < itemCount; i++) {
                        Object itemObject = listAdapter.getItem(i);
                        HashMap<String, String> itemMap = (HashMap<String, String>)itemObject;
    
                        Set<String> keySet = itemMap.keySet();
    
                        Iterator<String> iterator = keySet.iterator();
    
                        String key = iterator.next();
    
                        String value = itemMap.get(key);
    
                        ret.add(value);
                    }
                }
            }
    
            return ret;
        }
    }

2.3 Main Activity Layout Xml File.

  1. app/res/layout/activity_main.xml
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">
    
        <Button
            android:id="@+id/button_popup_overlay_input_dialog"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Open Overlay Popup Dialog"
            android:textSize="20dp"
            android:textAllCaps="false"/>
    
        <ListView
            android:id="@+id/listview_user_data"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="80dp"
            android:layout_marginRight="80dp">
    
        </ListView>
    
    </LinearLayout>

2.4 Popup Dialog Layout Xml File.

  1. app/res/layout/popup_input_dialog.xml
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="20dp">
    
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal"
            android:orientation="horizontal">
    
            <TextView
                android:gravity="end"
                android:text="User Name : " />
    
            <EditText
                android:id="@+id/userName"
                android:hint="Input user name"
                android:inputType="text" />
    
        </TableRow>
    
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal"
            android:orientation="horizontal">
    
            <TextView
                android:gravity="end"
                android:text="Password : " />
    
            <EditText
                android:id="@+id/password"
                android:hint="Input password"
                android:inputType="textPassword" />
    
        </TableRow>
    
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal"
            android:orientation="horizontal">
    
            <TextView
                android:gravity="end"
                android:text="Email : " />
    
            <EditText
                android:id="@+id/email"
                android:hint="Input email"
                android:inputType="text" />
    
        </TableRow>
    
        <TableRow android:gravity="center_horizontal">
    
            <Button
                android:id="@+id/button_cancel_user_data"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Cancel"
                android:textSize="20dp"
                android:textAllCaps="false"
                android:gravity="center_horizontal"
                android:layout_marginBottom="20dp"/>
    
    
            <Button
                android:id="@+id/button_save_user_data"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Save User Data"
                android:textSize="20dp"
                android:textAllCaps="false"
                android:gravity="center_horizontal"
                android:layout_marginBottom="20dp"/>
    
        </TableRow>
    
    </TableLayout>
0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

2 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
ads
ads

this website layout is abysmal

2
0
Would love your thoughts, please comment.x
()
x