Gallery
Share
Explore

Kotlin Android Project: RecyclerView showcasing National Parks

Kotlin Android Project: RecyclerView showcasing National Parks

In this lab, you will create an Android project using Kotlin, where you will learn how to implement a RecyclerView to showcase information about 3 fictional national parks. We'll hardcode the park data into the app for this exercise.

Prerequisites

Android Studio installed on your computer
Basic knowledge of Kotlin programming language
Familiarity with Android Studio and XML layouts

Instructions

Step 1: Create a new Android Studio project

Open Android Studio and click on "Start a new Android Studio project."
Choose "Empty Activity" and click "Next."
Name your project "NationalParksRecyclerView," select "Kotlin" as the programming language, and choose a minimum API level of 21. Click "Finish."

Step 2: Add dependencies to build.gradle

Open the build.gradle (Module: app) file in your project.
Add the following dependencies inside the dependencies block:

implementation 'androidx.recyclerview:recyclerview:1.2.1'
implementation 'com.google.android.material:material:1.4.0'
Click "Sync Now" to sync the dependencies with your project.

Step 3: Create a data class for a National Park

In the src/main/java folder, right-click on your package name and select "New -> Kotlin File/Class." Name it "NationalPark" and choose "Class" as the kind.
Define the NationalPark data class with the following properties: name, location, and description.
kotlin
Copy code
data class NationalPark(
val name: String,
val location: String,
val description: String
)

Step 4: Create a RecyclerView adapter

Create a new Kotlin class named "ParkAdapter" in the same package as your NationalPark class.
Make the class inherit from RecyclerView.Adapter<ParkAdapter.ViewHolder>.
Create a ViewHolder inner class that extends RecyclerView.ViewHolder and pass a View in its constructor.
package com.example.nationalparksrecyclerview

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView

class ParkAdapter(private val parkList: List<NationalPark>) : RecyclerView.Adapter<ParkAdapter.ViewHolder>() {

inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
// UI components to be set later
}

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

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
val park = parkList[position]
holder.itemView.tv_name.text = park.name
holder.itemView.tv_location.text = park.location
holder.itemView.tv_description.text = park.description
}

override fun getItemCount(): Int {
return parkList.size
}
}
Create a new XML layout file called item_park.xml in the res/layout folder. Define the layout for each park item in the RecyclerView.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">

<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Park Name"
android:textSize="18sp"
android:textStyle="bold" />

<TextView
android:id="@+id/tv_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Park Location"
android:textSize="16sp" />

<TextView
android:id="@+id/tv_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Park Description"
android:textSize="14sp" />

</LinearLayout>
Implement the onCreateViewHolder, onBindViewHolder, and getItemCount methods in the ParkAdapter class.
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val view = LayoutInflater.from(parent.context).inflate(R.layout.item_park, parent, false)
return ViewHolder(view)
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
val park = parkList[position]
holder.itemView.tv_name.text = park.name
holder.itemView.tv_location.text = park.location
holder.itemView.tv_description.text = park.description
}
override fun getItemCount(): Int {
return parkList.size
}

Step 5: Set up the RecyclerView in MainActivity

done: Open the activity_main.xml file and replace the default TextView with a RecyclerView.
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_parks"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
done: In the MainActivity.kt file, create a list of 3 fictional national parks and set up the RecyclerView with the ParkAdapter
class MainActivity : AppCompatActivity() {
private lateinit var parkAdapter: ParkAdapter
private lateinit var rvParks: RecyclerView

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

val parks = listOf(
NationalPark("Fictional Park 1", "Location 1", "Description of Fictional Park 1."),
NationalPark("Fictional Park 2", "Location 2", "Description of Fictional Park 2."),
NationalPark("Fictional Park 3", "Location 3", "Description of Fictional Park 3.")
)

rvParks = findViewById(R.id.rv_parks)
parkAdapter = ParkAdapter(parks)
rvParks.adapter = parkAdapter
rvParks.layoutManager = LinearLayoutManager(this)
}
}
Run the app on an emulator or a physical device to see the RecyclerView with the 3 fictional national parks.
Congratulations! You have successfully created a Kotlin Android project showcasing a RecyclerView with hardcoded national park data.

Kotlin Android Project: RecyclerView showcasing National Parks
Prerequisites
Instructions
Step 1: Create a new Android Studio project
Step 2: Add dependencies to build.gradle
Step 3: Create a data class for a National Park
Step 4: Create a RecyclerView adapter
Step 5: Set up the RecyclerView in MainActivity
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.