How to add multiple textView and dynamic ImageView inside ListView Row

Question

Someone pls guide me in the right way.

I have the below Design: main.xml

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

        <ListView android:layout_width="fill_parent"   
          android:layout_height="fill_parent"   
          android:id="@+id/topSongs">  
        </ListView>  

    </RelativeLayout>

list.xml

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

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:src="@drawable/albumart_cocktail" />

        <TextView
            android:id="@+id/AlbumText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/imageView2"
            android:layout_toRightOf="@+id/imageView2"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/songText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/AlbumText"
            android:layout_centerVertical="true"
            android:textAppearance="?android:attr/textAppearanceSmall" />

    </RelativeLayout>

Activity code:

I have this array:

 String[] AlbumText = {"Maximum", "Shangai", "Cocktail",
            "Rowdy Rathore", "Bol Bachan"
    };
    String[] songText = {"Sunday", "Monday", "Tuesday",
              "Wednesday", "Thursday"
    };

And 5 images(album art) for the particular song. I'm setting the array like this:

setListAdapter(new ArrayAdapter<String>(this,
    R.layout.list, R.id.songText, songText));
setListAdapter(new ArrayAdapter<String>(this,
    R.layout.list, R.id.AlbumText, AlbumText));

I know the above one is wrong, I need to know hw to do it in a proper way.

My Question: I need to implement a listView with 2 textView and 1 album art, so for that I have used the relative layout inside the list.xml file. Atleast I got to know how to send one array into textView, I really don't know how to change the images for particular row.

pls someone guide me in a right way.

Answer 1

Wrong:

setListAdapter(new ArrayAdapter<String>(this,
    R.layout.list, R.id.songText, songText));
setListAdapter(new ArrayAdapter<String>(this,
    R.layout.list, R.id.AlbumText, AlbumText));

Suggestion/Steps to create custom adapter:

1. Create a custom adapter and extends either ArrayAdapter or BaseAdapter
2. Implement getView() method.
3. Follow view holder design pattern.

And yes, if you are having 10 details about your song or album, then Will you create 10 Array or Arraylist? Instead create a custom class with getter/setter methods, create object for particular item and add into ArrayList. So its easy to manage a single ArrayList other than 10 array or ArrayList for single detail.

Answer 2

For what you want to achieve I believe you will need to implement your custom adapter.
And I believe setting the adapter twice is not correct, because only the last line will take effect.

You may take a look over Building a Custom Fancy ListView in Android blog post to get an idea how to build a custom adapter.

Answer 3

arrays

String[] AlbumText = {"Maximum", "Shangai", "Cocktail", "Rowdy Rathore", "Bol Bachan"
};
String[] songText = {"Sunday", "Monday", "Tuesday","Wednesday", "Thursday"
};

 // add values to adapter class like this

MobileArrayAdapter adapter = new MobileArrayAdapter(this, AlbumText , songText );
        list.setAdapter(adapter);                

        list.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {                      
              //here to use get values from adapter class and pass values use intent

                    Intent intent = new Intent(ListMobileActivity.this, Display.class);                         
                    intent.putExtra("AlbumText", one);
                    intent.putExtra("songText", two);                                    

                    startActivity(intent);          
                }
            }        
        });
    }

display activity

            message = getIntent().getExtras().getString("AlbumText");
            message1 = getIntent().getExtras().getString("songText");                                          

            text.setText(message);
            text1.setText(message1);

Answer 4

To develop a contact list with an Imageview and multiple textviews in a single row of a listview I used the following xml as to define each row in the listview.

<?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"
android:orientation="vertical" >

<ImageView
    android:id="@+id/pIcon"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:contentDescription="@string/hello"
    android:paddingBottom="10dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="10dp">
</ImageView>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_toRightOf="@+id/pIcon"
    android:layout_alignBaseline="@+id/pIcon"
    android:layout_alignTop="@+id/pIcon" >

    <TextView
        android:id="@+id/pName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

    <TextView
        android:id="@+id/pNum"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
</LinearLayout>

I defined a custom adapter for the listview. The code for the custom adapter is

public class ContactListAdapter extends BaseAdapter {

private ArrayList<ContactListItem> contactListItems;
private Context context;

public ContactListAdapter(ArrayList<ContactListItem> contactListItems,
        Context context) {
    this.contactListItems = contactListItems;
    this.context = context;
}

@Override
public int getCount() {
    return contactListItems.size();
}

@Override
public Object getItem(int arg0) {
    return contactListItems.get(arg0);
}

@Override
public long getItemId(int position) {
    return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    if (convertView == null) {
        LayoutInflater mInflater = (LayoutInflater) context
                .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        convertView = mInflater.inflate(R.layout.contact_list_item, null);
    }
    // references to the list items
    TextView numTxt = (TextView) convertView.findViewById(R.id.pNum);
    TextView nameTxt = (TextView) convertView.findViewById(R.id.pName);
    ImageView peopleIcon = (ImageView) convertView.findViewById(R.id.pIcon);
    // set the value of the list items
    peopleIcon.setImageResource(contactListItems.get(position).getIcon());
    nameTxt.setText(contactListItems.get(position).getName());
    numTxt.setText(contactListItems.get(position).getNum());
    return convertView;
}

}

To get the contact list items I defined another class. The code for the class is

public class ContactListItem {
int pIcon;
String pNum;
String pName;

public ContactListItem() {
}

public ContactListItem(int pIcon, String pNum, String pName) {
    this.pIcon = pIcon;
    this.pNum = pNum;
    this.pName = pName;
}

public int getIcon() {
    return this.pIcon;
}

public String getNum() {
    return this.pNum;
}

public String getName() {
    return this.pName;
}

public void setIcon(int icon) {
    this.pIcon = icon;
}

public void setNum(String num) {
    this.pNum = num;
}

public void setName(String name) {
    this.pName = name;
}
}

The listview was used in a fragment you can easily use it inside an activity.

public class ContactFragment extends Fragment {
private ListView mContactList;

// array for the contact list
private String[] pNum;
private String[] pName;
private TypedArray pIcon;

private ArrayList<ContactListItem> contactListItems;
private ContactListAdapter adapter;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // get the names of people in the contact list
    pName = getResources().getStringArray(R.array.pNames);
    // get the numbers of the people in the contact list
    pNum = getResources().getStringArray(R.array.pNumbers);
    // get the photos of the people in the list
    pIcon = getResources().obtainTypedArray(R.array.pIcons);
    // Initialise the contact list adapter
    contactListItems = new ArrayList<ContactListItem>();
    // add the items to array list
    for (int i = 0; i < 5; i++) {
        contactListItems.add(new ContactListItem(
                pIcon.getResourceId(i, -1), pNum[i], pName[i]));
    }
    pIcon.recycle();
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {

    View rootView = inflater.inflate(R.layout.contact_us_layout, container,
            false);

    return rootView;
}

@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    // set the title of the activity
    ((MainActivity) getActivity()).setTitle("CONTACT US");
    // get a reference to the contact list
    mContactList = (ListView) view.findViewById(R.id.contact_list);
    adapter = new ContactListAdapter(contactListItems, getActivity());
    mContactList.setAdapter(adapter);
}
}

If anyone wants to see the code so that it can be used in an activity then please comment.