This example will show you how to create a popup dialog with user input controls when user click a button in the main activity screen. The popup dialog customize the android.support.v7.app.AlertDialog class.
1. Create Android Popup Dialog With Input UI Controls Steps.
- Design and create the popup dialog ui layout xml file in app / res / layout folder. The layout xml file is popup_input_dialog.xml in this example.
- Use LayoutInflater to inflate 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);
- 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.
- When user click the button in main activity screen, it will popup a dialog which let user input username, password and email.
- When user click save button to save the input data, all the data will be displayed in main activity screen list view object.
- When user click the button in main activity again, if the list view contains data, it will display those data in popup dialog input text box.
Below is the example project files picture, there are three important files.
- MainActivity.java
- activity_main.xml
- popup_input_dialog.xml
2.2 Main Activity Java File.
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.
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.
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>
this website layout is abysmal
Which layout do you mean? Do you mean the code line can not return back or something else? Thanks.