John Joe John Joe - 2 months ago 8
Android Question

How to add editText and icon in dialog listView?

I trying to make a

dialog
look like image below, where the
listView
contains icon and
editText
.

enter image description here

However, I only able to make a dialog with
listView
, and a dialog with
editText
seperately. How can I combine them in one dialog ?

code for dialog listView

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_add_task:
String names[] ={"A","B","C","D"};
AlertDialog.Builder alertDialog = new AlertDialog.Builder(this);
LayoutInflater inflater = getLayoutInflater();
View convertView = (View) inflater.inflate(R.layout.custom_dialog, null);
alertDialog.setView(convertView);
ListView lv = (ListView) convertView.findViewById(R.id.listView1);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,names);
lv.setAdapter(adapter);
alertDialog.show();

return true;

default:
return super.onOptionsItemSelected(item);
}
}


custom_dialog

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

</ListView>


SnapShot

enter image description here

Code to have
EditText
in dialog


@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_add_task:
AlertDialog.Builder builder = new AlertDialog.Builder(this);
LayoutInflater inflater = getLayoutInflater();
builder.setView(inflater.inflate(R.layout.dialog_with_edittext,null))
// Add action buttons
.setPositiveButton(R.string.cancel, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int id) {
dialog.cancel();
}
})
.setNegativeButton(R.string.save, new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {

}
});
builder.show();
return true;

default:
return super.onOptionsItemSelected(item);
}
}


dialog_with_editText

<?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">

<EditText
android:id="@+id/username"
android:inputType="textEmailAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginBottom="4dp"
android:hint="Add new task" />

<EditText
android:id="@+id/password"
android:inputType="textPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginBottom="16dp"
android:fontFamily="sans-serif"
android:hint="Summary"/>
</LinearLayout>


SnapShot
enter image description here

Answer

First create a layout for each listView item (editText and icon - imageView)

custom_item_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<ImageView

    android:id="@+id/img"
    android:layout_alignParentStart="true"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_alignParentLeft="true" />
    <EditText
        android:layout_marginStart="60dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:id="@+id/edtText"
        android:layout_alignEnd="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignRight="@+id/img"
        android:layout_marginLeft="60dp" />
</RelativeLayout>
        <EdidText
            android:id="@+id/edtText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

Then you create a custom adapter class which extends BaseAdapter , and in your getView() method inflate the custom layout :

YourAdapterClass

 ...
 private static class Holder {
        ImageView img;
        EditText edt;
    }

  @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        Holder holder = new Holder();

        if (convertView == null) {
            LayoutInflater inflater = LayoutInflater.from(context);
            convertView = inflater.inflate(R.layout.custom_item_layout, parent, false);


            holder.img = (ImageView) convertView.findViewById(R.id.img);
            holder.edt= (EditText) convertView.findViewById(R.id.edtText);

            convertView.setTag(holder);
        } else {
            holder = (Holder) convertView.getTag();
        }

        //do what you want with holder.img and holder.edt


        return convertView;
    }

Then in your code for dialog listView

 @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_add_task:
                String names[] ={"A","B","C","D"};
                AlertDialog.Builder alertDialog = new AlertDialog.Builder(this);
                LayoutInflater inflater = getLayoutInflater();
                View convertView = (View) inflater.inflate(R.layout.custom_dialog, null);
                alertDialog.setView(convertView);
                ListView lv = (ListView) convertView.findViewById(R.id.listView1);
                YourAdapterClass adapter = new YourAdapterClass(this,images,names); //whatever you want to put in
                lv.setAdapter(adapter);
                alertDialog.show();

                return true;

            default:
                return super.onOptionsItemSelected(item);
        }
    }