Different layout for different rows using listView/recyclerView (showing either image or text)

Question

Hello I am new to android development and I am currently working on my first app. Suppose now I get some data from last activity -- four string arrayLists--medicine names, images' URL links, colors, shapes. I want to show these information in the formate like this:

the four columns are from items in four arrayLists. The number of medicine is depend on the size of the arrayLists and I want to scroll down to view each medicine. I am thinking maybe to use recyclerView to accomplish this. There are two questions:

How to customize each row to let only one row to display image but others display text? I lookup on the net and it seems customer adaptor customize every row in a same layout.
How to wrote the layout in .xml file if the number of medicine n is different each time we run the app since it depend on the result of last activity? I can't simply write a fixed number of ListView in the .xml file.

Could someone give me some advice? Many thanks!

score 1 · Answer 1 · answered Oct 05 '18 at 09:55

You will need to do, define the view type for the item you are using.

data class MedicineItem(val name, val imageUrl, val viewType)

Then pass the List into your adapter

Override the getViewItemType() method in your adapter. As the design, I think you will need three type of view of Medicine item. The first one is the title, the second one is the normal item and the third one will be the Medicine item with an image.

You can define viewType value by yourself, for example, I just made

class Constants {
  const val TITLE = 1
  const val NORMAL_ITEM = 2
  const val IMAGE_ITEM = 3
}

 override fun getItemViewType(position: Int): Int {
    val item : MedicineItem = list[position]
    if(item.viewType == Constants.TITLE) 
       return Constants.TITLE
    else if(item.viewType == Constant.NORMAL_ITEM)
       return Constants.NORMAL_ITEM
    else if(item.viewType == Constant.NORMAL_ITEM)
       return Constants.IMAGE_ITEM
}

For the different layout for each view item, you need to create three layout(xml file) and three ViewHolder class for each type. Then define which layout will be displayed by.

First, in onCreatViewHolder(), decide which ViewHolder will be used for each view item. You can see the return value of viewType.

 override fun onCreateViewHolder(parent: ViewGroup?, viewType: Int): RecyclerView.ViewHolder {
    if(viewType == Constants.TITLE) {
        return MedicineTitleViewHolder()

    } else if(viewType == Constants.NORMAL_ITEM) {
        return MedicineNormalViewHolder()

    } else if(viewType == Constants.IMAGE_ITEM) {
        return MedicineIamgeViewHolder()

    }

}

Finally, now return the view holder of each item for recycling in onBindViewHolder(), as you can see the bind() method receive the single data, you can pass a MedicinItem data object for display.

override fun onBindViewHolder(holder: RecyclerView.ViewHolder?, position: Int) {
    if (holder is MedicineTitleViewHolder) {
        (holder as MedicineTitleViewHolder).bind(list[position])

    } else if(holder as MedicineNormalViewHolder){
        (holder as MedicineNormalViewHolder).bind(list[position])

    } else if(viewType == Constants.IMAGE_ITEM) {
        (holder as MedicineIamgeViewHolder).bind(list[position]) 

    }
}

score 0 · Answer 2 · answered Oct 05 '18 at 09:39

0

RecyclerView::Adapter has a method getItemViewType(position), you can override it and return different view types. And in createViewHolder(viewType) you can create different views based on the view type.

answered Oct 05 '18 at 09:39

AIMIN PAN

1,563
1
9
13

score 0 · Answer 3 · answered Oct 05 '18 at 10:07

0

I think you need to create a recycler view inside a recycler view. You need to just create the item layout file of the parent recycler view which contains the Medicine No and another recycler view. Then, you need to create the item layout file for the inner recycler view which contains variable amount of medicines. This answers your part 2.

For part 1 see this link. How to create RecyclerView with multiple view type?

answered Oct 05 '18 at 10:07

Saad

28
4

Put the recyclerview inside another recyclerview is a very very bad idea. – Cuong Vo Oct 05 '18 at 10:12
Many apps use the recycler inside another recycler for complex layouts. – Saad Oct 05 '18 at 10:21
It is doable but very bad idea, especially for a linear list. The option using the recyclerview inside recyclerview could be considered when you want to display various horizontal recyclerview inside a vertical list. For example, the google app did it. But, for just a vertical list, that is not a good idea because if you want to change the item UI or implement more action, for example, update the state of an item, that could be the pain. – Cuong Vo Oct 05 '18 at 10:31

Different layout for different rows using listView/recyclerView (showing either image or text)

3 Answers3