AdapterDelegateCards
Update 2021: See JetpackComposeCards for a Jetpack Compose implementation of the same design system.
A proof of concept for a composition-over-inheritance RecyclerView that uses Card Components and JSON-driven styles. It's built with Hannes Dorfmann's library of the same name.
Adapter Delegates are an inversion control pattern for the RecylerView designed to help you add reusable cards to a list instead of defining a fix set of cards to an Adapter that leads to a subclass hell.
This sample uses Adapter Delegates to create a visually robust feed with a few goals:
- Composition over Inheritance in a ReyclerView
- Separate Layout, Style, and Text Style
- Compose card style with a JSON model
Following these principles, we will get 15 different card variants with just three Adapter Delegates.
RecyclerView Adapter vs Adapter Delegates
The main objective of the Adapter Delegate system is to favor composition over inheritence when using the RecyclerView. We will create Cards instead of Adapters.
RecyclerView Adapter
The standard RecyclerView Adapter's performance is great, but it can quickly grow unweildy if your Design team wants a feed with more than just a standard material card.
In this example, there are three cards (View Types) that require multiple when statements across onCreateViewHolder
, onBindViewHolder
, and getItemViewType
.
Even worse, you have to make sure your when case in onCreateViewHolder
matches the case in onBindViewHolder
otherwise you might end up with a mismatched implementation.
This solution doesn't scale well when we have 10 different View Types with unique on bind logic for each case.
class FeedAdapter : ListAdapter<FeedItem, CardViewHolder>(FeedItemDiffCallback()) {
companion object {
const val VIEW_TYPE_MATERIAL_CARD = 1
const val VIEW_TYPE_THUMBNAIL_CARD = 2
const val VIEW_TYPE_VISUAL_CARD = 3
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CardViewHolder {
val inflater = LayoutInflater.from(parent.context)
return when (viewType) {
VIEW_TYPE_MATERIAL_CARD -> CardViewHolder(inflater.inflate(R.layout.card_material, parent, false))
VIEW_TYPE_THUMBNAIL_CARD -> CardViewHolder(inflater.inflate(R.layout.card_thumbnail, parent, false))
VIEW_TYPE_VISUAL_CARD -> CardViewHolder(inflater.inflate(R.layout.card_visual, parent, false))
else -> CardViewHolder(inflater.inflate(R.layout.card_material, parent, false))
}
}
override fun onBindViewHolder(holder: CardViewHolder, position: Int) {
return when (viewType) {
VIEW_TYPE_MATERIAL_CARD -> // Do something custom for the Material View Type
VIEW_TYPE_THUMBNAIL_CARD -> // Do something custom for the Thumbnail View Type
VIEW_TYPE_VISUAL_CARD -> // // Do something custom for Visual View Type
else -> // Define your fallback case
}
}
override fun getItemViewType(position: Int): Int {
return when (getItem(position).layoutKey) {
"material" -> VIEW_TYPE_MATERIAL_CARD
"thumbnail" -> VIEW_TYPE_THUMBNAIL_CARD
"visual" -> VIEW_TYPE_VISUAL_CARD
else -> VIEW_TYPE_MATERIAL_CARD
}
}
}
Adapter Delegates
Ideally, we want to harness the performance of the RecyclerView Adapter with something that scales well when we have 10 or more cards in our feed.
Each Adapter Delegate implements the RecyclerView Adapter methods of onCreateViewHolder
and onBindViewHolder
to compose a card.
In this sense, an Adapater Delegate is a Card Component.
Material Card Adapter Delegate
class MaterialCardAdapterDelegate() : AbstractCardAdapterDelegate() {
override fun onCreateViewHolder(parent: ViewGroup): RecyclerView.ViewHolder {
return CardViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.card_material, parent, false))
}
override fun isForViewType(items: List<FeedItem>, position: Int): Boolean {
return items[position].layoutKey == "material"
}
override fun onBindViewHolder(
items: List<FeedItem>,
position: Int,
holder: RecyclerView.ViewHolder,
payloads: MutableList<Any>
) {
super.onBindViewHolder(items, position, holder, payloads)
}
}
Thumbnail Card Adapter Delegate
class ThumbnailCardAdapterDelegate() : AbstractCardAdapterDelegate() {
override fun onCreateViewHolder(parent: ViewGroup): RecyclerView.ViewHolder {
return CardViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.card_thumbnail, parent, false))
}
override fun isForViewType(items: List<FeedItem>, position: Int): Boolean {
return items[position].layoutKey == "thumbnail"
}
override fun onBindViewHolder(
items: List<FeedItem>,
position: Int,
holder: RecyclerView.ViewHolder,
payloads: MutableList<Any>
) {
super.onBindViewHolder(items, position, holder, payloads)
}
}
Visual Card Adapter Delegate
class VisualCardAdapterDelegate() : AbstractCardAdapterDelegate() {
override fun onCreateViewHolder(parent: ViewGroup): RecyclerView.ViewHolder {
return CardViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.card_visual, parent, false))
}
override fun isForViewType(items: List<FeedItem>, position: Int): Boolean {
return items[position].layoutKey == "visual"
}
override fun onBindViewHolder(
items: List<FeedItem>,
position: Int,
holder: RecyclerView.ViewHolder,
payloads: MutableList<Any>
) {
super.onBindViewHolder(items, position, holder, payloads)
}
}
Adapter Delegate Manager
class FeedAdapterDelegatesManager() : ListDelegationAdapter<List<FeedItem>>() {
companion object {
const val VIEW_TYPE_MATERIAL_CARD = 1
const val VIEW_TYPE_THUMBNAIL_CARD = 2
const val VIEW_TYPE_VISUAL_CARD = 3
}
init {
delegatesManager.addDelegate(VIEW_TYPE_MATERIAL_CARD,
MaterialCardAdapterDelegate()
)
delegatesManager.addDelegate(VIEW_TYPE_THUMBNAIL_CARD,
ThumbnailCardAdapterDelegate()
)
delegatesManager.addDelegate(VIEW_TYPE_VISUAL_CARD,
VisualCardAdapterDelegate()
)
delegatesManager.fallbackDelegate =
MaterialCardAdapterDelegate()
}
}
Performance Optimiziations towards 60 FPS
By using CardViewHolder
and resetting its default values, we can even reuse inflated views across multiple View Types (thumbnail vs. visual) to achieve faster scroll performance.
Separating Layout, Style, and Text Style
By separating layout, styles, and text styles across three dimensions; it is possible to create 15 card variants with just three RecyclerView Adapter Delegates.
Layout
Layout is best conceptualized as the abstract positioning of views in a container. Our layouts are concerned with what views go where without knowing what our final card will look like.
- Material Card Layout
- Thumbnail Card Layout
- Visual Card Layout
Material Card Layout
- 3:2 Image
- Overline Text View
- Title Text View
- Body Text View
Thumbnail Card Layout
- 1:1 Image
- Overline Text View
- Title Text View
- Body Text View
Visual Card Layout
- 4:2 Image
- Overlay Gradient
- Overlay Title Text View
Styles
The styles are concerned with the relationship between views in a layout; i.e. margin, padding, or line height properties. By keep text styles in separate dimension, styles can be simplified and reused across many layouts easily.
<style name="CustomComponent.Overline">
<item name="android:layout_marginTop">@dimen/material_component_vertical_padding</item>
</style>
<style name="CustomComponent.Headline">
<item name="android:layout_marginTop">@dimen/material_component_vertical_padding</item>
</style>
<style name="CustomComponent.Headline.Overlay">
<item name="android:layout_marginBottom">16dp</item>
</style>
<style name="CustomComponent.Body">
<item name="android:layout_marginTop">@dimen/material_component_vertical_padding</item>
<item name="lastBaselineToBottomHeight">20dp</item>
</style>
Text Styles
The text styles make up our base Typography stylesheet and override Android's TextAppearance attributes.
<style name="Body" parent="TextAppearance.MaterialComponents.Body1">
<item name="android:textColor">?android:textColorSecondary</item>
</style>
<style name="Body.Inverse" parent="Body">
<item name="android:textColor">@android:color/white</item>
</style>
<style name="Body.Sans" parent="Body">
<item name="fontFamily">@font/quattrocentosans_regular</item>
</style>
<style name="Body.Serif" parent="Body">
<item name="fontFamily">@font/merriweather_regular</item>
</style>
Composite Text Styles
Using our text styles and typography style sheet, we can also define a set of composite text styles (pairings of multiple fonts, colors, ect.).
Material
Header
Italic
Light
Typeset
Visual
Composition with a JSON Model
FeedItem.json
Using a layoutKey
and a textStyleKey
, we can compose our cards on the fly with a combination layout and composite text style.
{
"id": 1,
"layoutKey": "material",
"textStyleKey": "italic",
"title": "Lorem ipsum",
"body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"overline": "Birds of Paradise"
}
Layout: AdapterDelegate#isForViewType
The isForViewType
method defines the condition when we would like to use a specific card layout.
override fun isForViewType(items: List<FeedItem>, position: Int): Boolean {
return items[position].layoutKey == "visual"
}
Text Style: CardViewHolder#setCompositeTextAppearance
fun setCompositeTextAppearance(bodyTextView: TextView?, titleTextView: TextView, textStyleKey: String) {
when (textStyleKey) {
"material" -> {
TextViewCompat.setTextAppearance(titleTextView, R.style.H5)
bodyTextView?.let { TextViewCompat.setTextAppearance(it, R.style.Body) }
}
"light" -> {
TextViewCompat.setTextAppearance(titleTextView, R.style.H5_Serif_Light)
bodyTextView?.let { TextViewCompat.setTextAppearance(it, R.style.Body_Sans) }
}
"visual" -> {
TextViewCompat.setTextAppearance(titleTextView, R.style.H6_Sans_Bold_Inverse)
bodyTextView?.let { TextViewCompat.setTextAppearance(it, R.style.Body_Sans) }
}
"typeset" -> {
TextViewCompat.setTextAppearance(titleTextView, R.style.H5_Serif)
bodyTextView?.let { TextViewCompat.setTextAppearance(it, R.style.Body_Serif) }
}
"header" -> {
TextViewCompat.setTextAppearance(titleTextView, R.style.H5_Sans_Bold)
bodyTextView?.let { TextViewCompat.setTextAppearance(it, R.style.Body_Sans) }
}
"italic" -> {
TextViewCompat.setTextAppearance(titleTextView, R.style.H5_SerifItalic)
bodyTextView?.let { TextViewCompat.setTextAppearance(it, R.style.Body_Serif) }
}
else -> {
TextViewCompat.setTextAppearance(titleTextView, R.style.H5)
bodyTextView?.let { TextViewCompat.setTextAppearance(it, R.style.Body) }
}
}
}