Kata03 RecyclerView and Cards - mitchwongho/GDS-Material-Kata GitHub Wiki

Introduction

RecyclerView and CardView are two widgets that were added in Android Lollipop 🍭to provide a more advance and flexible alternative to ListView.

Reference

Goal

The goal of this kata is to apply a RecyclerView to our main layout and add cards to that RecyclerView. [Source reference]

Exercise

Begin by adding a RecyclerView to res/layout/activity_main.xml between our header Toolbar and footer Toolbar:

...
<android.support.v7.widget.RecyclerView
    android:id="@+id/main_recyclerview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical"
    android:paddingTop="@dimen/normal_padding"
    android:paddingBottom="@dimen/normal_padding"
    android:clipToPadding="false"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
...
<!-- Header Toolbar -->
...
<!-- Footer Toolbar -->
...

Next, create simple_cardview.xml, a CardView layout using the compatibility support version android.support.v7.widget.CardView in res/layout/:

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="match_parent"
    android:layout_height="@dimen/simple_card_height"
    android:layout_marginLeft="@dimen/large_padding"
    android:layout_marginRight="@dimen/large_padding"
    android:layout_marginTop="@dimen/normal_padding"
    android:layout_marginBottom="@dimen/normal_padding"
    card_view:contentPadding="@dimen/normal_padding"
    android:clickable="true"
    android:foreground="?attr/selectableItemBackground">
    <TextView
        android:id="@+id/card_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/AppTheme.TextAppearance.Medium"
        tools:text="Title text"/>
</android.support.v7.widget.CardView>

Finally, create a RecyclerView.Adapter that can apply your simple_cardview.xml layout to the RecyclerView. The RecyclerView then can be initialised in your MainActivity:

protected void onCreate(Bundle savedInstanceState) {
    ...
    // Initialise RecyclerView and apply String-array
    final String[] dow = getResources().getStringArray(R.array.days_of_week);
    final SimpleAdapter adapter = new SimpleAdapter(dow);
    final RecyclerView recyclerView = (RecyclerView)findViewById(R.id.main_recyclerview);
    recyclerView.setHasFixedSize(true);
    recyclerView.setLayoutManager(new LinearLayoutManager(this));
    recyclerView.setAdapter(adapter);
    ...
}