Sticky headers in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Sticky Header Behavior in RecyclerView

What will happen when you scroll the RecyclerView with this sticky header implementation?

Android Kotlin

class StickyHeaderDecoration : RecyclerView.ItemDecoration() {
  override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
    val topChild = parent.getChildAt(0) ?: return
    val topChildPosition = parent.getChildAdapterPosition(topChild)
    if (topChildPosition == RecyclerView.NO_POSITION) return
    val header = getHeaderViewForItem(topChildPosition, parent)
    fixLayoutSize(header, parent)
    c.save()
    c.translate(0f, 0f)
    header.draw(c)
    c.restore()
  }
  private fun getHeaderViewForItem(position: Int, parent: RecyclerView): View {
    // returns header view for the item at position
    TODO()
  }
  private fun fixLayoutSize(view: View, parent: RecyclerView) {
    val widthSpec = View.MeasureSpec.makeMeasureSpec(parent.width, View.MeasureSpec.EXACTLY)
    val heightSpec = View.MeasureSpec.makeMeasureSpec(parent.height, View.MeasureSpec.UNSPECIFIED)
    view.measure(widthSpec, heightSpec)
    view.layout(0, 0, view.measuredWidth, view.measuredHeight)
  }
}

A The header stays fixed at the top while scrolling the list items underneath it.

B The header scrolls away with the list items and does not stay visible.

C The header flickers and disappears intermittently during scrolling.

D The header overlaps list items and blocks touch events on them.

💡 Hint

Think about what onDrawOver does in RecyclerView.ItemDecoration.

The onDrawOver method draws the header view on top of the RecyclerView's children, making it appear fixed at the top while the list scrolls underneath.

🧠 Conceptual

intermediate

Purpose of fixLayoutSize in Sticky Header

Why is the fixLayoutSize method necessary when drawing sticky headers in RecyclerView?

A To measure and layout the header view so it draws correctly with proper size.

B To handle touch events on the header view.

C To animate the header view when it appears or disappears.

D To recycle the header view for better memory usage.

💡 Hint

Think about what happens if a view is drawn without measuring and layout.

Views must be measured and laid out before drawing to ensure they have correct width and height. fixLayoutSize does this for the header view.

❓ lifecycle

advanced

Handling Header Changes on Scroll

In a sticky header implementation, which RecyclerView callback is best to detect when the header should change as the user scrolls?

A RecyclerView.LayoutManager's onLayoutChildren method

B RecyclerView.ItemDecoration's onDrawOver method

C RecyclerView.OnScrollListener's onScrolled method

D RecyclerView.Adapter's onBindViewHolder method

💡 Hint

Consider where you get notified about scroll position changes.

OnScrollListener's onScrolled method is called whenever the RecyclerView scrolls, allowing you to check the current position and update the sticky header accordingly.

🔧 Debug

advanced

Sticky Header Overlapping Issue

You implemented sticky headers but notice the header overlaps the first list item partially. What is the most likely cause?

A The RecyclerView's layout manager is not set to LinearLayoutManager.

B The RecyclerView's adapter is not notifying data changes properly.

C The header view is not being recycled correctly causing layout glitches.

D The header view's height is not accounted for in item offsets, so list items start under the header.

💡 Hint

Think about spacing between items and header.

If item offsets are not adjusted to leave space for the sticky header, the first item will be drawn under the header causing overlap.

❓ navigation

expert

Sticky Header with Section Navigation

You want to add fast section navigation (like an index on the side) that scrolls the RecyclerView to the correct sticky header section. Which approach is best?

A Manually scroll the RecyclerView by pixel offset to the header's Y position.

B Use RecyclerView's scrollToPosition with the section's first item position.

C Replace the RecyclerView adapter with a filtered list for the section.

D Use a separate RecyclerView for the index and sync scroll positions.

💡 Hint

Think about how RecyclerView scrolls to items by position.

scrollToPosition scrolls the list so the item at the given position is visible, which works well to jump to a section's start and show its sticky header.