RecyclerView Day 3: Invoicing app

Built with Android Studio and Kotlin.

Build an invoicing app with Android Studio and Kotlin. Let's get started!. Open Android Studio, select the following.

Be sure to use Kotlin and androidx.

Android Studio should open content_main.xml, and it should look like this. If not, switch from Design mode to Text mode using the bottom tab.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

We can delete the TextView and replace it with this.

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="0dp"
        android:layout_height="0dp" />

Because we're using ConstraintLayout we need to specify 0dp for both the layout_width and layout_height. Then we should constraint it.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Now we're nearly done with this RecycleView. Let's give it an id.

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/listOfInvoices"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Next, let's create a data class. Right click on com.example.myinvoicing (or whatever you named it) and choose New Kotlin File/Class.

Name it Invoice and set it's Kind to Class.

Replace it with the following data class.

package com.example.myinvoicing

data class Invoice(
    val id: Int,
    val title: String,
    val text: String,
    val author: String
)

Open MainActivity.kt and remove everything except this.

package com.example.myinvoicing

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setSupportActionBar(toolbar)
    }
}

Inside onCreate, add this line.

        val invoices = listOf(
            Invoice(0, "Pool Repair", "Invoice for repairing your pool.", "Daniel Malone")
        )

The entire file should now look like this.

package com.example.myinvoicing

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setSupportActionBar(toolbar)

        val invoices = listOf(
            Invoice(0, "Pool Repair", "Invoice for repairing your pool.", "Daniel Malone")
        )
    }
}

Now we need to connect the RecyclerView from our XML to our Kotlin code. Add this below the above code.

        listOfInvoices.apply {
            layoutManager = LinearLayoutManager(this@MainActivity)
            adapter = InvoicesAdapter(invoices)
        }

Note that InvoicesAdapter might be red, indicating there is a coding error. We'll fix that now. Create a new Kotlin class the same way we created it before, by right clicking on com.example.myinvoicing on the left side of the screen.