Gossip Burst

Home / general

How can I display a list view in an Android Alert Dialog?

Sarah Thomas |

In an Android application, I want to display a custom list view in an AlertDialog.

How can I do this?

1

12 Answers

Used below code to display custom list in AlertDialog

AlertDialog.Builder builderSingle = new AlertDialog.Builder(DialogActivity.this); builderSingle.setIcon(R.drawable.ic_launcher); builderSingle.setTitle("Select One Name:-"); final ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(DialogActivity.this, android.R.layout.select_dialog_singlechoice); arrayAdapter.add("Hardik"); arrayAdapter.add("Archit"); arrayAdapter.add("Jignesh"); arrayAdapter.add("Umang"); arrayAdapter.add("Gatti"); builderSingle.setNegativeButton("cancel", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { dialog.dismiss(); } }); builderSingle.setAdapter(arrayAdapter, new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { String strName = arrayAdapter.getItem(which); AlertDialog.Builder builderInner = new AlertDialog.Builder(DialogActivity.this); builderInner.setMessage(strName); builderInner.setTitle("Your Selected Item is"); builderInner.setPositiveButton("Ok", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog,int which) { dialog.dismiss(); } }); builderInner.show(); } }); builderSingle.show();
11

According to the documentation, there are three kinds of lists that can be used with an AlertDialog:

  1. Traditional single-choice list
  2. Persistent single-choice list (radio buttons)
  3. Persistent multiple-choice list (checkboxes)

I will give an example of each below.

Traditional single-choice list

The way to make a traditional single-choice list is to use setItems.

enter image description here

Java version

// setup the alert builder AlertDialog.Builder builder = new AlertDialog.Builder(context); builder.setTitle("Choose an animal"); // add a list String[] animals = {"horse", "cow", "camel", "sheep", "goat"}; builder.setItems(animals, new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { switch (which) { case 0: // horse case 1: // cow case 2: // camel case 3: // sheep case 4: // goat } } }); // create and show the alert dialog AlertDialog dialog = builder.create(); dialog.show();

There is no need for an OK button because as soon as the user clicks on a list item control is returned to the OnClickListener.

Kotlin version

// setup the alert builder val builder = AlertDialog.Builder(context) builder.setTitle("Choose an animal") // add a list val animals = arrayOf("horse", "cow", "camel", "sheep", "goat") builder.setItems(animals) { dialog, which -> when (which) { 0 -> { /* horse */ } 1 -> { /* cow */ } 2 -> { /* camel */ } 3 -> { /* sheep */ } 4 -> { /* goat */ } } } // create and show the alert dialog val dialog = builder.create() dialog.show()

Radio button list

enter image description here

The advantage of the radio button list over the traditional list is that the user can see what the current setting is. The way to make a radio button list is to use setSingleChoiceItems.

Java version

// setup the alert builder AlertDialog.Builder builder = new AlertDialog.Builder(context); builder.setTitle("Choose an animal"); // add a radio button list String[] animals = {"horse", "cow", "camel", "sheep", "goat"}; int checkedItem = 1; // cow builder.setSingleChoiceItems(animals, checkedItem, new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // user checked an item } }); // add OK and Cancel buttons builder.setPositiveButton("OK", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // user clicked OK } }); builder.setNegativeButton("Cancel", null); // create and show the alert dialog AlertDialog dialog = builder.create(); dialog.show();

I hard coded the chosen item here, but you could keep track of it with a class member variable in a real project.

Kotlin version

// setup the alert builder val builder = AlertDialog.Builder(context) builder.setTitle("Choose an animal") // add a radio button list val animals = arrayOf("horse", "cow", "camel", "sheep", "goat") val checkedItem = 1 // cow builder.setSingleChoiceItems(animals, checkedItem) { dialog, which -> // user checked an item } // add OK and Cancel buttons builder.setPositiveButton("OK") { dialog, which -> // user clicked OK } builder.setNegativeButton("Cancel", null) // create and show the alert dialog val dialog = builder.create() dialog.show()

Checkbox list

enter image description here

The way to make a checkbox list is to use setMultiChoiceItems.

Java version

// setup the alert builder AlertDialog.Builder builder = new AlertDialog.Builder(context); builder.setTitle("Choose some animals"); // add a checkbox list String[] animals = {"horse", "cow", "camel", "sheep", "goat"}; boolean[] checkedItems = {true, false, false, true, false}; builder.setMultiChoiceItems(animals, checkedItems, new DialogInterface.OnMultiChoiceClickListener() { @Override public void onClick(DialogInterface dialog, int which, boolean isChecked) { // user checked or unchecked a box } }); // add OK and Cancel buttons builder.setPositiveButton("OK", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // user clicked OK } }); builder.setNegativeButton("Cancel", null); // create and show the alert dialog AlertDialog dialog = builder.create(); dialog.show();

Here I hard coded the the which items in the list were already checked. It is more likely that you would want to keep track of them in an ArrayList<Integer>. See the documentation example for more details. You can also set the checked items to null if you always want everything to start unchecked.

Kotlin version

// setup the alert builder val builder = AlertDialog.Builder(context) builder.setTitle("Choose some animals") // add a checkbox list val animals = arrayOf("horse", "cow", "camel", "sheep", "goat") val checkedItems = booleanArrayOf(true, false, false, true, false) builder.setMultiChoiceItems(animals, checkedItems) { dialog, which, isChecked -> // user checked or unchecked a box } // add OK and Cancel buttons builder.setPositiveButton("OK") { dialog, which -> // user clicked OK } builder.setNegativeButton("Cancel", null) // create and show the alert dialog val dialog = builder.create() dialog.show()

Notes

  • For the context in the code above, don't use getApplicationContext() or you will get an IllegalStateException (see here for why). Instead, get a reference to the activity context, such as with this.
  • You can also populate the list items from a database or another source using setAdapter or setCursor or passing in a Cursor or ListAdapter into the setSingleChoiceItems or setMultiChoiceItems.
  • If the list is longer than will fit on the screen then the dialog will automatically scroll it. If you have a really long list, though, I'm guessing that you should probably make a custom dialog with a RecyclerView.

  • To test all of the examples above I just had a simple project with a single button than showed the dialog when clicked:

    import android.support.v7.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { Context context; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); context = this; } public void showAlertDialogButtonClicked(View view) { // example code to create alert dialog lists goes here } }

Related

9

You can use a custom dialog.

Custom dialog layout. list.xml 

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ListView android:id="@+id/lv" android:layout_width="wrap_content" android:layout_height="fill_parent"/> </LinearLayout>

In your activity

Dialog dialog = new Dialog(Activity.this); dialog.setContentView(R.layout.list) ListView lv = (ListView ) dialog.findViewById(R.id.lv); dialog.setCancelable(true); dialog.setTitle("ListView"); dialog.show();

Edit:

Using alertdialog

String names[] ={"A","B","C","D"}; AlertDialog.Builder alertDialog = new AlertDialog.Builder(MainActivity.this); LayoutInflater inflater = getLayoutInflater(); View convertView = (View) inflater.inflate(R.layout.custom, null); alertDialog.setView(convertView); alertDialog.setTitle("List"); ListView lv = (ListView) convertView.findViewById(R.id.lv); ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,names); lv.setAdapter(adapter); alertDialog.show();

custom.xml

<?xml version="1.0" encoding="utf-8"?> <ListView xmlns:android="" android:id="@+id/listView1" android:layout_width="fill_parent" android:layout_height="fill_parent" > </ListView>

Snap

enter image description here

15
final CharSequence[] items = {"A", "B", "C"}; AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setTitle("Make your selection"); builder.setItems(items, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int item) { // Do something with the selection mDoneButton.setText(items[item]); } }); AlertDialog alert = builder.create(); alert.show();
5

Use the "import android.app.AlertDialog;" import and then you write 

 String[] items = {"...","...."}; AlertDialog.Builder build = new AlertDialog.Builder(context); build.setItems(items, new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { //do stuff.... } }).create().show();
5

This is how to show custom layout dialog with custom list item, can be customised as per your requirement.

enter image description here

STEP - 1 Create the layout of the DialogBox ie:-

R.layout.assignment_dialog_list_view

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/rectangle_round_corner_assignment_alert" android:orientation="vertical"> <TextView android:id="@+id/tv_popup_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="8dp" android:singleLine="true" android:paddingStart="4dp" android:text="View as:" android:textColor="#4f4f4f" /> <ListView android:id="@+id/lv_assignment_users" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout>

STEP - 2 Create custom list item layout as per your business logic

R.layout.item_assignment_dialog_list_layout

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="" xmlns:tools="" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="4dp" android:orientation="horizontal"> <ImageView android:id="@+id/iv_user_profile_image" android:visibility="visible" android:layout_width="42dp" android:layout_height="42dp" /> <TextView android:id="@+id/tv_user_name" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="8dp" android:layout_marginStart="8dp" android:paddingBottom="8dp" android:textColor="#666666" android:textSize="18sp" tools:text="ABCD XYZ" /> </LinearLayout>

STEP - 3 Create a Data model class of your own choice

public class AssignmentUserModel { private String userId; private String userName; private String userRole; private Bitmap userProfileBitmap; public AssignmentUserModel(String userId, String userName, String userRole, Bitmap userProfileBitmap) { this.userId = userId; this.userName = userName; this.userRole = userRole; this.userProfileBitmap = userProfileBitmap; } public String getUserId() { return userId; } public void setUserId(String userId) { this.userId = userId; } public String getUserName() { return userName; } public void setUserName(String userName) { this.userName = userName; } public String getUserRole() { return userRole; } public void setUserRole(String userRole) { this.userRole = userRole; } public Bitmap getUserProfileBitmap() { return userProfileBitmap; } public void setUserProfileBitmap(Bitmap userProfileBitmap) { this.userProfileBitmap = userProfileBitmap; } }

STEP - 4 Create custom adapter

public class UserListAdapter extends ArrayAdapter<AssignmentUserModel> { private final Context context; private final List<AssignmentUserModel> userList; public UserListAdapter(@NonNull Context context, int resource, @NonNull List<AssignmentUserModel> objects) { super(context, resource, objects); userList = objects; this.context = context; } @SuppressLint("ViewHolder") @NonNull @Override public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) { LayoutInflater inflater = (LayoutInflater) context .getSystemService(Context.LAYOUT_INFLATER_SERVICE); View rowView = inflater.inflate(R.layout.item_assignment_dialog_list_layout, parent, false); ImageView profilePic = rowView.findViewById(R.id.iv_user_profile_image); TextView userName = rowView.findViewById(R.id.tv_user_name); AssignmentUserModel user = userList.get(position); userName.setText(user.getUserName()); Bitmap bitmap = user.getUserProfileBitmap(); profilePic.setImageDrawable(bitmap); return rowView; } }

STEP - 5 Create this function and provide ArrayList of above data model in this method

// Pass list of your model as arraylist private void showCustomAlertDialogBoxForUserList(ArrayList<AssignmentUserModel> allUsersList) { final Dialog dialog = new Dialog(mActivity); dialog.setContentView(R.layout.assignment_dialog_list_view); if (dialog.getWindow() != null) { dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT)); // this is optional } ListView listView = dialog.findViewById(R.id.lv_assignment_users); TextView tv = dialog.findViewById(R.id.tv_popup_title); ArrayAdapter arrayAdapter = new UserListAdapter(context, R.layout.item_assignment_dialog_list_layout, allUsersList); listView.setAdapter(arrayAdapter); listView.setOnItemClickListener((adapterView, view, which, l) -> { Log.d(TAG, "showAssignmentsList: " + allUsersList.get(which).getUserId()); // TODO : Listen to click callbacks at the position }); dialog.show(); }

Step - 6 Giving round corner background to dialog box

@drawable/rectangle_round_corner_assignment_alert

 <?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android=""> <solid android:color="#ffffffff" /> <corners android:radius="16dp" /> <padding android:bottom="16dp" android:left="16dp" android:right="16dp" android:top="16dp" /> </shape>

This is too simple 

final CharSequence[] items = {"Take Photo", "Choose from Library", "Cancel"}; AlertDialog.Builder builder = new AlertDialog.Builder(MyProfile.this); builder.setTitle("Add Photo!"); builder.setItems(items, new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int item) { if (items[item].equals("Take Photo")) { getCapturesProfilePicFromCamera(); } else if (items[item].equals("Choose from Library")) { getProfilePicFromGallery(); } else if (items[item].equals("Cancel")) { dialog.dismiss(); } } }); builder.show();

As a beginner I would suggest you go through

I'll rundown what it basically does

  1. Creates an XML file for the dialog and main Activity
  2. In the main activity in the required place creates an object of android class Dialog
  3. Adds custom styling and text based on the XML file
  4. Calls the dialog.show() method.

In Kotlin:

fun showListDialog(context: Context){ // setup alert builder val builder = AlertDialog.Builder(context) builder.setTitle("Choose an Item") // add list items val listItems = arrayOf("Item 0","Item 1","Item 2") builder.setItems(listItems) { dialog, which -> when (which) { 0 ->{ Toast.makeText(context,"You Clicked Item 0",Toast.LENGTH_LONG).show() dialog.dismiss() } 1->{ Toast.makeText(context,"You Clicked Item 1",Toast.LENGTH_LONG).show() dialog.dismiss() } 2->{ Toast.makeText(context,"You Clicked Item 2",Toast.LENGTH_LONG).show() dialog.dismiss() } } } // create & show alert dialog val dialog = builder.create() dialog.show() }
2

You can actually create a simple Array with Alert Dialog like this.

 val sexArray = arrayOf("Male", "Female") val selectedPosition = 0 AlertDialog.Builder(requireContext()) .setSingleChoiceItems(sexArray, 0) { dialog, position -> val selectedSex = sexArray[position] }.show()

Isn't it smoother to make a method to be called after the creation of the EditText unit in an AlertDialog, for general use? 

public static void EditTextListPicker(final Activity activity, final EditText EditTextItem, final String SelectTitle, final String[] SelectList) { EditTextItem.setOnLongClickListener(new View.OnLongClickListener() { @Override public boolean onLongClick(View v) { AlertDialog.Builder builder = new AlertDialog.Builder(activity); builder.setTitle(SelectTitle); builder.setItems(SelectList, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialogInterface, int item) { EditTextItem.setText(SelectList[item]); } }); builder.create().show(); return false; } }); } 
private void AlertDialogue(final List<Animals> animals) { final AlertDialog.Builder alertDialog = new AlertDialog.Builder(AdminActivity.this); alertDialog.setTitle("Filter by tag"); final String[] animalsArray = new String[animals.size()]; for (int i = 0; i < tags.size(); i++) { animalsArray[i] = tags.get(i).getanimal(); } final int checkedItem = 0; alertDialog.setSingleChoiceItems(animalsArray, checkedItem, new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { Log.e(TAG, "onClick: " + animalsArray[which]); } }); AlertDialog alert = alertDialog.create(); alert.setCanceledOnTouchOutside(false); alert.show(); }
1

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

You Might Also Like