Sticky headers in Android Kotlin

Introduction

Sticky headers help keep section titles visible while you scroll through a list. This makes it easier to know which group of items you are looking at.

When showing a long list of contacts grouped by the first letter.

When displaying a list of messages grouped by date.

When presenting a menu with categories that should stay visible while scrolling.

When organizing items in a shopping app by category.

Syntax

Android Kotlin

class MyAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder { /* create view holder */ }
    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) { /* bind data */ }
    override fun getItemCount(): Int { /* return item count */ }

    // Implement sticky header logic using ItemDecoration or libraries
}

Sticky headers are usually implemented with RecyclerView and ItemDecoration.

You can also use third-party libraries to simplify sticky header creation.

Examples

Add an ItemDecoration to RecyclerView to enable sticky headers.

Android Kotlin

val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
recyclerView.adapter = MyAdapter()
recyclerView.addItemDecoration(StickyHeaderDecoration())

Custom ItemDecoration can be used to draw sticky headers on top of list items.

Android Kotlin

class StickyHeaderDecoration : RecyclerView.ItemDecoration() {
    override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        // Draw header that sticks at top
    }
}

Sample App

This example shows a simple list of fruits grouped by their first letter. The sticky header stays visible at the top as you scroll through the list.

Android Kotlin

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
        recyclerView.layoutManager = LinearLayoutManager(this)
        recyclerView.adapter = SimpleAdapter(getSampleData())
        recyclerView.addItemDecoration(SimpleStickyHeaderDecoration(recyclerView.adapter as SimpleAdapter))
    }

    private fun getSampleData(): List<Pair<String, String>> {
        return listOf(
            "A" to "Apple",
            "A" to "Avocado",
            "B" to "Banana",
            "B" to "Blueberry",
            "C" to "Cherry",
            "C" to "Coconut"
        )
    }
}

class SimpleAdapter(private val items: List<Pair<String, String>>) : RecyclerView.Adapter<SimpleAdapter.ViewHolder>() {
    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val textView: TextView = view.findViewById(android.R.id.text1)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(android.R.layout.simple_list_item_1, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.textView.text = items[position].second
    }

    override fun getItemCount(): Int = items.size

    fun getHeaderForPosition(position: Int): String = items[position].first
}

class SimpleStickyHeaderDecoration(private val adapter: SimpleAdapter) : RecyclerView.ItemDecoration() {
    private val paint = Paint().apply {
        color = Color.LTGRAY
        textSize = 48f
        isAntiAlias = true
    }

    override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        val left = parent.paddingLeft.toFloat()
        val right = (parent.width - parent.paddingRight).toFloat()

        if (parent.childCount == 0) return

        val child = parent.getChildAt(0)
        val position = parent.getChildAdapterPosition(child)
        if (position == RecyclerView.NO_POSITION) return

        val header = adapter.getHeaderForPosition(position)
        val top = parent.paddingTop.toFloat()

        paint.color = Color.LTGRAY
        c.drawRect(left, top, right, top + 60f, paint)
        paint.color = Color.BLACK
        c.drawText(header, left + 20f, top + 45f, paint)
    }
}

Important Notes

Sticky headers improve user experience by showing context while scrolling.

Implementing sticky headers requires careful drawing on RecyclerView's canvas.

Test on different screen sizes to ensure headers display correctly.

Summary

Sticky headers keep section titles visible during scrolling.

Use RecyclerView with ItemDecoration to create sticky headers.

Custom drawing is needed to show headers that stick at the top.

Practice

1. What is the main purpose of sticky headers in an Android RecyclerView?

easy

A. To keep section titles visible while scrolling

B. To add animations to list items

C. To load images asynchronously

D. To sort the list alphabetically

Solution

1. Step 1: Understand sticky header behavior

   Sticky headers keep section titles visible at the top as you scroll through grouped list items.

2. Step 2: Compare with other options

   Animations, image loading, and sorting are unrelated to sticky headers.

3. Final Answer:

   To keep section titles visible while scrolling -> Option A

4. Quick Check:

   Sticky headers = visible section titles [OK]

Hint: Sticky headers keep titles visible on scroll [OK]

Common Mistakes:

• Confusing sticky headers with animations
• Thinking sticky headers sort the list
• Assuming sticky headers load images

2. Which Android component is commonly used to implement sticky headers in Kotlin?

easy

A. RecyclerView with ItemDecoration

B. ListView with Adapter

C. ScrollView with LinearLayout

D. ViewPager with FragmentStateAdapter

Solution

1. Step 1: Identify components for sticky headers

   RecyclerView supports ItemDecoration which allows custom drawing for sticky headers.

2. Step 2: Eliminate other options

   ListView and ScrollView do not support sticky headers natively; ViewPager is for paging, not lists.

3. Final Answer:

   RecyclerView with ItemDecoration -> Option A

4. Quick Check:

   Sticky headers use RecyclerView + ItemDecoration [OK]

Hint: Sticky headers need RecyclerView + ItemDecoration [OK]

Common Mistakes:

• Choosing ListView instead of RecyclerView
• Using ScrollView which lacks sticky header support
• Confusing ViewPager with list components

3. Given this Kotlin code snippet for a RecyclerView ItemDecoration:

override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
  val child = parent.getChildAt(0) ?: return
  val position = parent.getChildAdapterPosition(child)
  val header = getHeaderViewForItem(position)
  c.save()
  c.translate(0f, 0f)
  header.draw(c)
  c.restore()
}

What is the visible effect of this code when scrolling?

medium

A. The header blinks on every scroll event

B. The header stays fixed at the top while list scrolls underneath

C. The header appears at the bottom of the list

D. The header scrolls away with the list items

Solution

1. Step 1: Analyze onDrawOver behavior

   onDrawOver draws the header on top of the RecyclerView content, fixed at the top (0f, 0f).

2. Step 2: Understand scrolling effect

   Since header is drawn at fixed position, it stays visible while list scrolls underneath.

3. Final Answer:

   The header stays fixed at the top while list scrolls underneath -> Option B

4. Quick Check:

   onDrawOver + translate(0,0) = sticky header visible [OK]

Hint: onDrawOver draws sticky header at fixed top position [OK]

Common Mistakes:

• Thinking header scrolls away with items
• Assuming header appears at bottom
• Believing header blinks on scroll

4. You implemented sticky headers using ItemDecoration but headers flicker or disappear during fast scroll. What is the likely cause?

medium

A. Using LinearLayoutManager instead of GridLayoutManager

B. Setting RecyclerView height to wrap_content

C. Forgetting to call super.onDrawOver() in override

D. Not caching header views causing repeated layout calls

Solution

1. Step 1: Identify flicker cause in sticky headers

   Repeatedly creating and measuring header views without caching causes flicker during fast scroll.

2. Step 2: Check other options

   Layout manager type or calling super.onDrawOver() usually don't cause flicker; wrap_content affects layout size but not flicker.

3. Final Answer:

   Not caching header views causing repeated layout calls -> Option D

4. Quick Check:

   Missing header caching = flicker [OK]

Hint: Cache header views to avoid flicker [OK]

Common Mistakes:

• Ignoring header view caching
• Blaming layout manager type
• Forgetting super call but unrelated to flicker

5. You want to implement sticky headers that change smoothly when scrolling between sections in a RecyclerView. Which approach best achieves this effect?

hard

A. Use a separate fixed TextView outside RecyclerView for headers

B. Replace header view completely on every scroll event

C. Draw the current header at top and translate it up as next header approaches

D. Disable RecyclerView animations to prevent flicker

Solution

1. Step 1: Understand smooth sticky header transition

   Drawing current header at top and moving it up as next header scrolls in creates smooth push effect.

2. Step 2: Evaluate other options

   Replacing header fully causes flicker; separate TextView won't sync scrolling; disabling animations doesn't create smooth transition.

3. Final Answer:

   Draw the current header at top and translate it up as next header approaches -> Option C

4. Quick Check:

   Smooth sticky header = translate current header up [OK]

Hint: Translate header up for smooth sticky effect [OK]

Common Mistakes:

• Replacing header view causing flicker
• Using fixed TextView outside RecyclerView
• Disabling animations instead of translating header