[Task 1 Walkthrough]: Load a RecyclerView with test data

Detailed Walkthrough. Only consult this page if you are having difficulty completing the task or wish to check your work.

0. Stick to portrait-mode.

For this project, let's stick to portrait mode. Add android:screenOrientation="portrait" under MainActivity in AndroidManifest.xml.

1. Create an item_produce.xml layout that shows name and type of produce underneath in the recycler view. Something like this:

This is how my item_produce.xml looks:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@android:color/white"
    android:id="@+id/browseItemView">

        <TextView
            android:id="@+id/tvName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginStart="8dp"
            android:layout_marginTop="18dp"
            android:letterSpacing="0.05"
            tools:text="Apples"
            android:textColor="@color/colorPrimary"
            android:textSize="20sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tvType"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignStart="@+id/tvName"
            android:layout_below="@+id/tvName"
            android:letterSpacing="0.08"
            tools:text="Fruit"
            android:textColor="@android:color/darker_gray"
            android:textSize="16sp" />
    </RelativeLayout>

2. Create a RecyclerView layout.

Remember to add the RecyclerView support library to your project by adding the following to your app module's build.gradle file:

dependencies { implementation 'com.android.support:recyclerview-v7:27.1.1' }

Add the RecyclerView in your activity layout XML:

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvProduce"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

3. Create a data model for ProduceItem with name, type, and description. You will be needing this to populate a list of ProduceItems into the recyclerview.

Use Kotlin's data class to define the model for ProduceItem:

data class ProduceItem(
        val name: String,
        val type: String,
        val description: String
)

4. Use bindView/Kotterknife for binding views using KotterKnife at https://github.com/JakeWharton/kotterknife

You can just copy ButterKnife.kt into your project: ButterKnife.kt

In your MainActivity, make sure you use it to bind to the RecyclerView:

private val recyclerView: RecyclerView by bindView(R.id.rvProduce)

5. Use a RecyclerView/adapter for loading data

Create the adapter for loading a list of ProduceItems.

class SeasonalAdapter(private var items: List<ProduceItem>) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {

    init {
        notifyDataSetChanged()
    }

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

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        val name = items[position].name
        val type = items[position].type

        val viewHolder = holder as ViewHolder
        viewHolder.tvName.text = name
        viewHolder.tvType.text = type

    }

    override fun getItemCount(): Int {
        return items.size
    }

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val tvName: TextView = itemView.findViewById(R.id.tvName)
        val tvType: TextView = itemView.findViewById(R.id.tvType)

    }
}

We'll need to inflate view in our adapter, and it seems useful to create as an extension function if we'll be reusing it. Try creating an extension function for Context.inflate for the situation where you need to use LayoutInflater.from(this).inflate(resource, root, attachToRoot) in your adapter.

fun Context.inflate(@LayoutRes resource: Int, root: ViewGroup?, attachToRoot: Boolean): View =
        LayoutInflater.from(this).inflate(resource, root, attachToRoot)

6. Create a list of fake ProduceItems and populate into the recycler view.

Set up MainActivity to populate your RecyclerView, and add some fake data through the adapter. In onCreate(),

//set up LLM and add to RV
val linearLayoutManager = LinearLayoutManager(this)
recyclerView.layoutManager = linearLayoutManager

//set up test data
val items = listOf(ProduceItem("Apples", "Fruit", "Apples are red."),
        ProduceItem("Bananas", "Fruit", "Bananas are tasty."),
        ProduceItem("Broccoli", "Vegetable", "Broccoli looks like little trees."),
        ProduceItem("Carrot", "Vegetable", "Bunnies like carrots."))

//create adapter
val adapter = SeasonalAdapter(items)

//add adapter to RV
recyclerView.adapter = adapter

You should now have an app that loads these basic items in a recyclerview. Something that looks like:

Oh, you can remove the FAB. You won't need it.

---

You can checkout the solution branch at solutions/task1-setupRecyclerView