Android: ListView inside an AlertDialog

In this tutorial we show how to create a list inside an alert dialog.

The items of the list are defined in the class Component.java and are made of a title and a subtitle.
When the application is started, it's created an Arraylist with 3 elements of this type.

The main activity is implemented in MainActivity.java:

	public class MainActivity extends ActionBarActivity {
	public Context context;
	private Component c1,c2,c3;
	private Dialog list_dialog;
	ComponentAdapter array_adapter;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	context = this;
	//creation and population of the list
	List<Component> my_list = new ArrayList<Component>();
	createComponents();
	my_list.add(c1);
	my_list.add(c2);
	my_list.add(c3);
	//adapter
	array_adapter = new ComponentAdapter(context, R.layout.component,my_list);
	//button to show the dialog
	Button button = (Button)findViewById(R.id.button1);
	button.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	// TODO Auto-generated method stub
	list_dialog = new Dialog(context);
	list_dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
	list_dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
	list_dialog.setContentView(R.layout.list_dialog);
	ListView list = (ListView)list_dialog.findViewById(R.id.component_list);
	list.setAdapter(array_adapter);
	Button positiveButton = (Button) list_dialog.findViewById(R.id.positive_button);
	positiveButton.setOnClickListener(new OnClickListener(){
	@Override
	public void onClick(View arg0) {
	list_dialog.dismiss();
	}
	});
	list_dialog.show();
	}
	});
	}
	private void createComponents() {
	// TODO Auto-generated method stub
	c1 = new Component("Component 1","subtitle 1");
	c2 = new Component("Component 2","subtitle 2");
	c3 = new Component("Component 3","subtitle 3");
	}

view raw gistfile1.java hosted with ❤ by GitHub

The layout of the alert dialog is defined in list_dialog.xml:

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:gravity="center_vertical|center_horizontal"
	android:background="@drawable/dialogs">
	<RelativeLayout
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:paddingLeft="20dip"
	android:paddingRight="20dip"
	android:paddingTop="10dip">
	<ImageView
	android:id="@+id/dialog_title_image"
	android:layout_alignParentLeft="true"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:background="@drawable/info"/>
	<TextView
	android:id="@+id/dialog_title"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginLeft="10dip"
	android:layout_marginTop="20dp"
	android:layout_centerInParent="true"
	android:text="Title"
	android:layout_toRightOf="@id/dialog_title_image"
	android:textColor="@android:color/black"
	android:textSize="20sp"/>
	<!-- Lista -->
	</RelativeLayout>
	<TextView
	android:layout_width="fill_parent"
	android:layout_height="3dip"
	android:background="#1e90ff"/>
	<ListView
	android:id="@+id/component_list"
	android:layout_width="match_parent"
	android:layout_height="wrap_content" />
	<!-- Fine lista -->
	<RelativeLayout
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:paddingTop="10dip"
	android:paddingLeft="10dp"
	android:paddingRight="10dp"
	android:layout_marginLeft="20dp"
	android:layout_marginRight="20dp"
	android:gravity="bottom|center_horizontal"
	android:paddingBottom="20dip">
	<Button
	android:id="@+id/positive_button"
	android:layout_alignParentLeft="true"
	android:layout_width="120dip"
	android:layout_height="wrap_content"
	android:background="#1e90ff"
	android:textColor="@android:color/white"
	android:text="@string/close"/>
	</RelativeLayout>
	</LinearLayout>

view raw gistfile1.xml hosted with ❤ by GitHub

The layout of the single item of the list is defined in component.xml:

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:paddingTop="10dp"
	android:paddingBottom="10dp"
	android:paddingLeft="10dp"
	android:orientation="vertical" >
	<TextView
	android:id="@+id/title"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Large Text"
	android:textStyle="bold"
	android:textAppearance="?android:attr/textAppearanceLarge" />
	<TextView
	android:id="@+id/subtitle"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Small Text"
	android:textAppearance="?android:attr/textAppearanceSmall" />
	</LinearLayout>

view raw gistfile1.xml hosted with ❤ by GitHub

The adapter for the correspondence between the layout and the list is defined in ComponentAdapter.java:

	package com.example.listdialog;
	import java.util.List;
	import android.content.Context;
	import android.view.LayoutInflater;
	import android.view.View;
	import android.view.ViewGroup;
	import android.widget.ArrayAdapter;
	import android.widget.TextView;
	public class ComponentAdapter extends ArrayAdapter<Component> {
	public ComponentAdapter(Context context, int textViewResourceId, List<Component> objects)
	{
	super(context, textViewResourceId, objects);
	}
	@Override
	public View getView(int position, View convertView, ViewGroup parent)
	{
	View curView = convertView;
	if (curView == null)
	{
	LayoutInflater vi = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
	curView = vi.inflate(R.layout.component, null);
	}
	Component cp = getItem(position);
	TextView title = (TextView) curView.findViewById (R.id.title);
	TextView subtitle = (TextView) curView.findViewById (R.id.subtitle);
	title.setText(cp.getTitle());
	subtitle.setText(cp.getSubtitle());
	return curView;
	}
	}

view raw gistfile1.java hosted with ❤ by GitHub

You can download the complete example from our repository: Download ListDialog.zip

The final result is the following: