Pynnie
Pynnie

Reputation: 136

RecyclerView - listitem with unknown amount of elements

i'm confronted with the following situation: i have a RecyclerView with 3 different viewtypes. Each contains a subtitle and then either a radio group, checkboxes or an editText. The problem is: the ammount of the elements (edittext,checkbox,radiobuttons) is variable so i am not able to create a static template as the viewtypes. So i'm trying to reach something like this (example with radiobuttons):

LISTVIEW
------------------
row1
      1) choice1
      2) choice2
------------------
row2
      1) choice1
      2) choice2
      3) choice3
------------------
row3
      1) choice1
-------------------

Any ideas about a good approach? Thanks for you time and help ! :)

EDIT: ChaitanyaAtkuris answer was quite helpful, but im getting a ClassCastException in the onBindViewHolder(). It says "cant cast TitleHolder to InputHolder" ... but i cant figure out why the holder object actually is a TitleHolder, because it uses the right case (INPUT) though. Here is my adapter code

public class RecAdapter extends RecyclerView.Adapter {

private List<Object> items;
private final int TITLE_VIEW = 0; 
private final int RADIO_GROUP = 1; 
private final int CHECK_BOX = 2; 
private final int INPUT = 3; 

public RecAdapter(List<Object> data) {
    this.items = data;
}

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    RecyclerView.ViewHolder viewHolder = null;
    LayoutInflater inflater = LayoutInflater.from(parent.getContext());

    switch (viewType) {
        case CHECK_BOX:
            View v1 = inflater.inflate(R.layout.child_checkbox, parent, false);
            viewHolder = new CheckboxHolder(v1);
            break;
        case TITLE_VIEW:
            View v2 = inflater.inflate(R.layout.child_title, parent, false);
            viewHolder = new TitleHolder(v2);
            break;
        case INPUT:
            View v3 = inflater.inflate(R.layout.child_inputfield, parent, false);
            viewHolder = new TitleHolder(v3);
            break;

    }

    return viewHolder;
}

@Override
public int getItemViewType(int position) {
    ListItem item = (ListItem) items.get(position);
    if (item.getviewType()==TITLE_VIEW) {
        return TITLE_VIEW;
    } else if (item.getviewType()==RADIO_GROUP) {
        return RADIO_GROUP;
    } else if (item.getviewType()==CHECK_BOX) {
        return CHECK_BOX;
    } else if (item.getviewType()==INPUT) {
        return INPUT;
    }
        return -1;
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    switch (holder.getItemViewType()) {
        case CHECK_BOX:
            CheckboxHolder checkboxHolder = (CheckboxHolder) holder;
            configureCheckBoxHolder(checkboxHolder, position);
            break;
        case TITLE_VIEW:
            TitleHolder titleHolder = (TitleHolder) holder;
            configureTitleHolder(titleHolder, position);
            break;
        case INPUT:
            InputHolder inputHolder = (InputHolder) holder;
            configureInputHolder(inputHolder, position);
            break;
    }
}

private void configureCheckBoxHolder(CheckboxHolder holder,int position)    {
    CheckBoxElement boxElement = (CheckBoxElement) items.get(position);
    if (boxElement != null) {
        holder.box.setText(boxElement.getText());
    }
}

private void configureInputHolder(InputHolder holder,int position)    {
    InputField field = (InputField) items.get(position);
    if (field != null) {
        holder.title.setText(field.getSubtitle());
    }
}

private void configureTitleHolder(TitleHolder holder,int position)    {
    TitlePojo titlePojo = (TitlePojo) items.get(position);
    if (titlePojo != null) {
        holder.titleText.setText(titlePojo.getTitle());
    }
}

@Override
public int getItemCount() {
    return items.size();
}

private class InputHolder extends RecyclerView.ViewHolder {
    private TextView title;
    private EditText inputfield;

    public InputHolder(View v1) {
        super(v1);
        title = (TextView) v1.findViewById(R.id.inputTitleItem);
        inputfield = (EditText) v1.findViewById(R.id.fieldItem);
    }
}

private class TitleHolder extends RecyclerView.ViewHolder {
    private TextView titleText;

    public TitleHolder(View v1) {
        super(v1);
        titleText = (TextView)  v1.findViewById(R.id.titleView);
    }
}

private class CheckboxHolder extends RecyclerView.ViewHolder {
    private CheckBox box;

    public CheckboxHolder(View v1) {
        super(v1);
        box = (CheckBox)   v1.findViewById(R.id.checkboxItem);
    }
}

private class RadioGroupHolder extends RecyclerView.ViewHolder {
    private RadioGroup group;

    public RadioGroupHolder(View v1) {
        super(v1);

    }
}

}

Upvotes: 0

Views: 1042

Answers (1)

Chaitanya Atkuri
Chaitanya Atkuri

Reputation: 1672

@Pynnie, This isn't a big deal. I believe you will resolve it. Lemme give you some light to resolve this.

Step1: As we have three different kinds of views as mentioned, lets take an List<Object> dataList= new ArrayList();This list will decide the total views to be displayed.

Step 2: Now, lets make a viewType for each of the component available. For example

private final int TEXT_VIEW = 0; //For TextView
private final int RADIO_GROUP = 1; //For RadioGroup
private final int CHECK_BOX = 2; //For individual Checkbox
private final int EDIT_TEXT = 3; //For Edit text individual

Now while storing the data dynamically basing upon the structure, store in the following way.

public class TextViewPojo { // This will used for identifying textViews

public String text;
//Any other necessary variables to hold data to display
}

public class EditTextPojo { // This will used for identifying editText

public String text;
//Any other necessary variables to hold data to display
}

public class RadioGroupPojo { // This will used for identifying RadioGroup

public int noOfRadioButtons;
//Any other necessary variables to hold data to display
}

public class CheckBoxPojo { // This will used for identifying checkbox

public String text;
//Any other necessary variables to hold data to display
}

// ------------------ row1 - TextView indicating subTitle -> dataList.add(new TextViewPojo()); 1) choice1 - EditText - > dataList.add(new EditTextPojo()); 2) choice2- EditText - > dataList.add(new EditTextPojo()); //------------------ row2- TextView indicating subTitle -> dataList.add(new TextViewPojo()); 1) choice1 -CheckBox -> dataList.add(new CheckBoxPojo()); 2) choice2-CheckBox -> dataList.add(new CheckBoxPojo()); 3) choice3-CheckBox -> dataList.add(new CheckBoxPojo()); //------------------ row3 - TextView indicating subTitle -> dataList.add(new TextViewPojo()); 1) choice1 - RadioGroup For both choice1, choice2 consider as one as it a group of radio buttons, -> RadioGroup -> dataList.add(new RadioGroupPojo()); 2) choice2 //-------------------

Now coming to the RecyclerView Adapter Implementation

public class RecyclerViewsAdapter extends RecyclerView.Adapter {

// The items to display in your RecyclerView
private List<Object> items; 
private final int TEXT_VIEW = 0; //For TextView
private final int RADIO_GROUP = 1; //For RadioGroup
private final int CHECK_BOX = 2; //For individual Checkbox
private final int EDIT_TEXT = 3; //For Edit text individual

public RecyclerViewsAdapter(List<Object> data,) {
this.items = data;
}

and now to differentiate the data, we shall use the getViewType() method

//Returns the view type of the item at position for the purposes of view recycling.

@Override
  public int getItemViewType(int position) {
      if (items.get(position) instanceof CheckBoxPojo) {
          return CHECK_BOX;
      } else if (items.get(position) instanceof RadioGroupPojo) {
          return RADIOGROUP;
      } //All the conditions follow..
      return -1;
  }

Now create viewholders for each of the types.

public class ViewHolder1 extends RecyclerView.ViewHolder {

    private TextView label1;

    public ViewHolder1(View v) {
        super(v);
        label1 = (TextView) v.findViewById(R.id.text1);
    }

    public TextView getLabel1() {
        return label1;
    }

    public void setLabel1(TextView label1) {
        this.label1 = label1;
    }
}

//All the other viewHolders accordingly.

@Override
  public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {

      RecyclerView.ViewHolder viewHolder;
      LayoutInflater inflater = LayoutInflater.from(viewGroup.getContext());

      switch (viewType) {
          case CHECKBOX:
              View v1 = inflater.inflate(R.layout.layout_viewholder1, viewGroup, false);
              viewHolder = new ViewHolder1(v1);
              break;
          case RADIOGROUP:
              View v2 = inflater.inflate(R.layout.layout_viewholder2, viewGroup, false);
              viewHolder = new ViewHolder2(v2);
              break;

//And the rest cases follow.

NExt set data to views

@Override
  public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {
      switch (viewHolder.getItemViewType()) {
          case CHECKBOX:
              ViewHolder1 vh1 = (ViewHolder1) viewHolder;
              configureViewHolder1(vh1, position);
              break;
          case RADIOGROUp:
              ViewHolder2 vh2 = (ViewHolder2) viewHolder;
              configureViewHolder2(vh2, position);
              break;
//Rest cases follow.
          default:
              RecyclerViewSimpleTextViewHolder vh = (RecyclerViewSimpleTextViewHolder) viewHolder;
              configureDefaultViewHolder(vh, position);
              break;
      }
  }

private void configureViewHolder1(ViewHolder1 vh1, int position) {
      CheckBoxPojo user = (CheckBoxPojo) items.get(position);
      if (user != null) {
          vh1.getCheckBox1().setChecked(user.isChecked);
      }
  }

  private void configureViewHolder2(ViewHolder2 vh2) {
      //vh2.getImageView().setImageResource(R.drawable.sample_golden_gate);
Similarly rest follows.
  }

And thats it done!!! You can configure in what ever way, how many ever it might be, how random they might be even.

REFERENCE : https://guides.codepath.com/android/Heterogenous-Layouts-inside-RecyclerView

EDIT :

To find out the issue in the snippet added by you. Below is the issue :

case TITLE_VIEW: View v2 = inflater.inflate(R.layout.child_title, parent, false); viewHolder = new TitleHolder(v2); break; case INPUT: View v3 = inflater.inflate(R.layout.child_inputfield, parent, false); viewHolder = new TitleHolder(v3); break;

In both these cases you are using title holder only.

Upvotes: 1

Related Questions