Create CustomAdapter for listView with different row layouts

Question

I want to add different rows to a ListView. In first row I want to show a textView. In second Two imageViews and third row Single textView. Then a list of text with icon. I know this is possible using custom CustomAdapter. But not understanding how to proceed.
My CustomAdapter :

       public class CustomList extends ArrayAdapter<String>
 {
 private final Activity context;
 private final String[] web;
 private final Integer[] imageId;

 public CustomList(Activity context,
        String[] web, Integer[] imageId) {
    super(context, R.layout.drawer_list_item, web);
    this.context = context;
    this.web = web;
    this.imageId = imageId;
   }
    @Override
    public View getView(int position, View view, ViewGroup parent) {
    LayoutInflater inflater = context.getLayoutInflater();

    View rowView= inflater.inflate(R.layout.drawer_list_item, null, true);
    TextView txtTitle = (TextView) rowView.findViewById(R.id.text1);
    ImageView imageView = (ImageView) rowView.findViewById(R.id.drawer_imgIcom);
    txtTitle.setText(web[position]);
    imageView.setImageResource(imageId[position]);

    return rowView;
  }

Y u no google ? http://www.survivingwithandroid.com/2014/08/android-listview-with-multiple-row.html — 2Dee, Sep 16 '14 at 11:51
I googled. But couldent understand how to pass different row to adapter class. Basically not understanding how to use the written customAdapter class. — user2686960, Sep 16 '14 at 11:53
Do you see the problem with such a question here ? There are many detailed tutorials on the subject, so if you don't emphasize what is causing your problems, how could we possibly provide you with a more complete answer than what is already available with a simple google search ? A better question would be : I tried doing this [your code] but it doesn't work for me because I'm expecting [result] and I'm getting [error stacktrace/other result]. — 2Dee, Sep 16 '14 at 12:04

score 0 · Answer 1 · answered Sep 16 '14 at 11:52

0

In your drawer_list_item xml file create all the elements you need, text, images etc, positioned as desired. Then in the getView() after the inflate, simple hide and show these elements as desired based on the position.

Remember to hide and show, because Android will re-use the views.

Also you should consider using a viewHolder as this will improve performance.

answered Sep 16 '14 at 11:52

James

3,485
3
20
43

and how will I pass the view details for each king of row to the Adapter class. my code for adding one kind of view. CustomList adapter = new CustomList(MainActivity.this, categories, category_images); mDrawerList = (ListView) findViewById(R.id.left_drawer); – user2686960 Sep 16 '14 at 12:02
Create a member list in the adapter: private ArrayList mList; Create a CustomList constructor like so: public CustomList(Context context, Fragment fragment, ArrayList items){ mList = items; } Then in your getView you can do mList.get(position) This is just a quick crude example. For complete example do a quick google for some listview adapter examples. – James Sep 16 '14 at 12:06

score 0 · Answer 2 · answered Sep 16 '14 at 12:00

try this code in getview(),

@Override
public View getView(int position, View view, ViewGroup parent) {
LayoutInflater inflater = context.getLayoutInflater();

View rowView= inflater.inflate(R.layout.drawer_list_item, null, true);
TextView txtTitle = (TextView) rowView.findViewById(R.id.text1);
ImageView imageView = (ImageView) rowView.findViewById(R.id.drawer_imgIcom);
ImageView imageView1 = (ImageView) rowView.findViewById(R.id.drawer_imgIcom1);

 if(position == 0)
 {
   txtTitle.setText(web[position]);
   imageView.setvisibility(View.GONE);
   imageView1..setvisibility(View.GONE);
 }
else if(Position == 1){
txtTitle.setText(web[position]);
imageView.setvisibility(View.Visible);
imageView1..setvisibility(View.Visible);
imageView.setImageResource(imageId[position]);
imageView1.setImageResource(imageId1[position]); 

}else
{
 txtTitle.setText(web[position]);
 imageView.setvisibility(View.GONE);
 imageView1..setvisibility(View.GONE);
 }

 return rowView;}

and then corresponding views use in your xml layouts.

thanks prakash. but while setting adapter to listView I pass two arrays categories and category_array that contain 7 items each. CustomList adapter = new CustomList(MainActivity.this, categories, category_images); How will I set Adapter for this case. — user2686960, Sep 16 '14 at 12:10
we don't know your concepts,we just help you,understand your logic.try it yourself. — prakash, Sep 16 '14 at 12:45

score 0 · Answer 3 · answered Sep 16 '14 at 12:10

First you need your custom view (this contains the Views that you need for your purpose)

example:

<?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/photo"
        android:layout_width="match_parent"
        android:layout_height="170dp"
        android:background="@android:color/holo_blue_light"
        android:contentDescription="@string/cd_pr_photo"
        android:scaleType="centerCrop" />

    <!--Invisible divider so we can put our views just in the
    right place :) -->
    <View
        android:id="@+id/divider"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_below="@id/photo" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/divider"
        android:layout_margin="10dp"
        android:text="@string/sample_title"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:textStyle="bold|italic" />

    <ImageButton
        android:id="@+id/share"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/divider"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_margin="10dp"
        android:background="@android:drawable/ic_menu_share"
        android:contentDescription="@string/cd_the_sharebutton" />

</RelativeLayout>

Once you have decided your layout you extend ArrayAdapter in your CustomAdapterClass.

Example:

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

        //In case we don't have an inflated view, inflate.
        if (v == null) {
            v = View.inflate(getContext(), R.layout.custom_puertorico_layout, null);
        }

        //The domain object with data.
        PuertoRico p = getItem(position);


        //Photo of Puerto Rico
        final ImageView photo = (ImageView) v.findViewById(R.id.photo);
        photo.setImageDrawable(p.getPicture());

        //Given Title
        TextView title = (TextView) v.findViewById(R.id.title);
        title.setText(p.getTitle());

        //Extra stuff...
        ImageButton share = (ImageButton) v.findViewById(R.id.share);



        return v;
    }

This easy example and the full code can be found at https://github.com/JRSosa/PRPics

Hope it Helps.

Create CustomAdapter for listView with different row layouts

3 Answers3