5. HeroItemSpec

We're going to display list of hero name, image and description on the screen. You can think I am gonna build RecyclerView using Litho.
Let's define data class for hero first.

data class Hero( val name: String,  
                 val description: String,  
                 @DrawableRes val image: Int)

It's straightforward and let's prepare hero data.

package com.mpark.android.marblecharacters  

class DataLoader {  
    companion object {  
        val PHOTOS = listOf(  
                R.drawable.angel,  
  R.drawable.beast,  
  R.drawable.blob,  
  R.drawable.captain_ameria,  
  R.drawable.cyclops,  
  R.drawable.doctor_strange,  
  R.drawable.emma_frost,  
  R.drawable.hulk,  
  R.drawable.iceman,  
  R.drawable.iron_man,  
  R.drawable.magneto,  
  R.drawable.puck,  
  R.drawable.pyro,  
  R.drawable.silver_surfer,  
  R.drawable.spider_man,  
  R.drawable.thing,  
  R.drawable.thor,  
  R.drawable.wolverine  
  )  

        val NAMES = listOf(  
                "Angel",  
  "Beast",  
  "Blob",  
  "Captain America",  
  "Cyclops",  
  "Doctor Strange",  
  "Emma Frost",  
  "Hulk",  
  "Iceman",  
  "Iron Man",  
  "Magneto",  
  "Puck",  
  "Pyro",  
  "Silver Surfer",  
  "Spider Man",  
  "Thing",  
  "Thor",  
  "Wolverine"  
  )  

        val DESCRIPTIONS = listOf("Created upon forth there sea under. Creepeth beast.",  
  "Grass grass Moveth sixth from sixth, spirit third to man.",  
  "Night said days fly fill saying is. Divided own god.",  
  "Replenish bearing Hath beginning he kind night form had, darkness.",  
  "Appear night to Above, tree, every greater that from good.",  
  "Under herb creeping, brought unto god that great replenish. Whose.",  
  "Above green was grass. Kind subdue they're whales meat. You'll.",  
  "One own signs without man, us fruit evening his green.",  
  "Were fill creeping his heaven waters form, it Fish the.",  
  "Two him moveth first man forth Bring their his yielding.",  
  "Itself whales spirit third. Bearing forth, fruitful given living creeping.",  
  "Them. Him seas you his to, you'll, made darkness darkness.",  
  "Living greater form living winged that stars. Shall form for.",  
  "Fruitful together his day she'd years our living waters. Lights.",  
  "Fifth seed made hath forth thing. Doesn't sixth fill deep.",  
  "Created green a greater under second moving brought made that.",  
  "Light spirit kind, without also void open in. You they're.",  
  "Grass grass Moveth sixth from sixth, spirit third to man.",  
  "Night said days fly fill saying is. Divided own god."  
  )  

        val HEROES: List<Hero> = PHOTOS.mapIndexed { index, drawableRes ->  
  Hero(name = NAMES[index], description = DESCRIPTIONS[index], image = drawableRes)  
        }  
  }  
}

Effective organising hero data is out of scope of this posting and let's skip that part.

And now let's implement an item view to display hero data. We need to use @LayoutSpec annotation for this.
A layout spec is the logical equivalent of a composite view on Android. It simply groups existing components together in an immutable layout tree.
As @GroupSectionSpec, our @LayoutSpec class name ends with Spec.

@LayoutSpec  
object HeroItemSpec {
}

Implementing a layout spec is very simple: you only need to write one method annotated with @OnCreateLayout which returns an immutable tree of Component objects.

@OnCreateLayout  
fun onCreateLayout(c: ComponentContext,  
 @Prop hero: Hero): Component {  
    val headerText = Text.create(c)  
            .text(hero.name)  
            .textSizeSp(20f)  
            .build()  

    val footerText = Text.create(c)  
            .text(hero.description)  
            .textSizeSp(14f)  
            .build()  

    val image = Image.create(c)  
            .drawableRes(hero.image)  
            .widthPercent(100f)  
            .heightDip(200f)  
            .scaleType(ImageView.ScaleType.CENTER_CROP)  
            .build()  

    return Column.create(c)  
            .child(headerText)  
            .child(image)  
            .child(footerText)  
            .build()  
}

Text is like TextView to display readonly text.
Imagesi like ImageView.
Column is similar to LinearLayout with vertical orientation but big difference is that once measurement and computation of positioning are done, Column will not be in the view hierarchy. It's only for computation.
Row is horizontal orientation.

Update HeroesComponentSpec to use HeroItem. Please rebuild first if HeroItem class is not recognised.

@GroupSectionSpec  
object HeroesComponentSpec {  

    @OnCreateChildren  
 internal fun onCreateChildren(c: SectionContext): Children {  
        val builder: Children.Builder = Children.create()  

        val sectionList: List<SingleComponentSection> = DataLoader.HEROES.map { hero ->  
  SingleComponentSection.create(c)  
                    .key(hero.name)  
                    .component(  
                            HeroItem.create(c)  
                                    .hero(hero)  
                    )  
                    .build()  
        }  

  return builder  
                .child(sectionList)  
                .build()  
    }  
}

And update MainActivity as well.

class MainActivity : AppCompatActivity() {  

    override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(savedInstanceState)  
        createSection { sc -> HeroesComponent.create(sc).build()     }  
  }  
}

Let's update style in HeroItemSpec. I think Card is good choice for our case.

Card.create(c)
                                    .content(
                                            HeroItem.create(c)
                                                    .hero(hero)
                                    )
                                    .cardBackgroundColor(Color.WHITE)
                                    .elevationDip(6f)

Here is the screenshot of the app.