Explore

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.