Reputation: 6076

AlertDialog with images in listview

Is it possible to use an AlertDialog to show a listview with images next to the text? Or do I have to implement a DialogFragment with a listview (for example)?

EDIT: Is it also possible to use a custom listview with both the options .setMultiChoiceItems and .setAdapter?

Upvotes: 0

Answers (3)

fdsilva

Reputation: 93

I had the same problem and looking on some blogs and sites i found this tutorial which helps me a lot. The code below, is my version of the tutorial, I only added a checkbox on it to be used as a multiple choice item that you asking for.

First create a ListActivity to be your dialog:

public class ListDialog extends ListActivity {

public String[] names;
private TypedArray imgs;
private List<DialogHelper> list;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    populateList();

    ArrayAdapter<DialogHelper> adapter = new ListDialogAdapter(this, list);
    setListAdapter(adapter);

    getListView().setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

        }
    });
}

private void populateList() {
    list = new ArrayList<>();
    names = getResources().getStringArray(R.array.names);
    imgs = getResources().obtainTypedArray(R.array.flags);
    for(int i = 0; i < names.length; i++){
        list.add(new DialogHelper(names[i], imgs.getDrawable(i)));
    }
  }
}

Then, create a Class to helps to populate the list with the resouces that come from string.xml resources file.

public class DialogHelper {
private String name;
private Drawable flag;

public DialogHelper(String name, Drawable flag){
    this.name = name;
    this.flag = flag;

}
public String getName() {
    return name;
}

public Drawable getFlag() {
    return flag;
}
}

We also need a Custom adapter to the ListActiviy

public class ListDialogAdapter extends ArrayAdapter<DialogHelper> {

private final List<DialogHelper> list;
private final Activity context;

static class ViewHolder {
    protected TextView name;
    protected ImageView flag;
}

public ListDialogAdapter(Activity context, List<DialogHelper> list) {
    super(context, R.layout.dialog_layout, list);
    this.context = context;
    this.list = list;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    View view = null;

    if (convertView == null) {
        LayoutInflater inflator = context.getLayoutInflater();
        view = inflator.inflate(R.layout.dialog_layout, null);
        final ViewHolder viewHolder = new ViewHolder();
        viewHolder.name = (TextView) view.findViewById(R.id.name);
        viewHolder.flag = (ImageView) view.findViewById(R.id.flag);
        view.setTag(viewHolder);
    } else {
        view = convertView;
    }

    ViewHolder holder = (ViewHolder) view.getTag();
    holder.name.setText(list.get(position).getName());
    holder.flag.setImageDrawable(list.get(position).getFlag());
    return view;
  }
}

For the dialog layout use this code below

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="4dp" android:weightSum="10">

<ImageView
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:padding="7dp"
    android:id="@+id/flag">

</ImageView>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:text="Title"
    android:id="@+id/name"
    android:layout_gravity="center_vertical"
    android:layout_weight="10"
    android:layout_marginLeft="10dp"/>

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/checkBox"
    android:checked="false"
    android:layout_gravity="center" />
</LinearLayout>

Define on your string.xml the data that will populate your list dialog.

<resources>
<string name="app_name">TestDialog</string>

<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>

<string-array name="names">
    <item>Apple</item>
    <item>Microsoft</item>
    <item>Motorola</item>
    <item>Dell</item>
</string-array>



<string-array name="flags">
    <item>@drawable/ic_apple</item>
    <item>@drawable/ic_microsoft</item>
    <item>@drawable/ic_motorola</item>
    <item>@drawable/ic_dell</item>
</string-array>
</resources>

In the manifest.xml define the ListDialog theme as a "dialog"

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.testdialog" >

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme" >
    <activity
        android:name=".MainActivity"
        android:label="@string/app_name" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>

    <activity android:name=".ListDialog"
        android:theme="@android:style/Theme.Holo.Light.Dialog"
        android:noHistory="true"
        android:label="Select your company"></activity>
</application>
</manifest>

To test the code above just create a Activity to call you listDialog

public class MainActivity extends AppCompatActivity {
private Button btn;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    final Intent intent = new Intent(this, ListDialog.class);
    btn = (Button) findViewById(R.id.button);
    btn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            startActivity(intent);
        }
    });
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
  }
 }

And below the MainActivity layout.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Open Dialog"
    android:id="@+id/button"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true" />
</RelativeLayout>

I hope this helps you.

Upvotes: 2