https://github.com/google-developers-sohag/simplerecyclerviewapp
RecyclerView Application example using kotlin and viewbinding.
https://github.com/google-developers-sohag/simplerecyclerviewapp
android koltin-android recyclerview recyclerview-adapter view-binding
Last synced: about 2 months ago
JSON representation
RecyclerView Application example using kotlin and viewbinding.
- Host: GitHub
- URL: https://github.com/google-developers-sohag/simplerecyclerviewapp
- Owner: Google-Developers-Sohag
- License: bsd-3-clause
- Created: 2022-03-17T20:13:44.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-03-28T07:27:37.000Z (about 4 years ago)
- Last Synced: 2025-02-25T17:47:43.763Z (over 1 year ago)
- Topics: android, koltin-android, recyclerview, recyclerview-adapter, view-binding
- Language: Kotlin
- Homepage:
- Size: 378 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SimpleRecyclerViewApp
Shows how to display some items in a simple list using the `RecyclerView` and `RecycleView.Adapter`.
The `RecycleView` is the entity that displays the list to the user on the layout of your Ui.
The `RecyclerView.Adapter` is the entity that adapts and manipulates to the recycler to be displayed on the user interface later when
rendering the android view, it also updates the data with their respective views.
## Prepare your Ui :
- Create a MainActivity class :
```kt
package com.example.session2
import android.content.Intent
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
}
}
```
- Define the activity inside the `AndroidManifest.xml` :
```xml
```
- Define an Action main intent filter with a launcher category (build a launcher activity when the user clicks the app icon in the
app drawer) :
```xml
```
- Define the binding framework from the jetpack compose (shortcut to accessing views with their IDs directly and their root easily) :
**In app/gradle.build android block :**
```groovy
android {
...
buildFeatures {
viewBinding true
}
}
```
- Naviagte to `app/src/main/res/layout/activity_main.xml` and add the context to the root layout :
```xml
tools:context=".MainActivity"
```
- Add a recyclerview to your xml file with an id.
- The final `activity_main.xml` file should look like that :
```xml
```
- Navigate to the `onCreate(onSavedInstance: Bundle)` method, and set your xml file using `setContentView()` and the inflated layout :
```kotlin
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
```
- Now a `RecyclerView` instance is predefined and the ready to be accessed using its binding reference which returns a recycler view instance.
- Now setup your recycler `LayoutManager` and `Adapter`.
- `LayoutManager` : controls how the items are getting viewed to the user (Linear or Grid).
- `RecyclerView.Adapter` : holds the data to be adapted later on the user interface.
- The `RecyclerView.Adapter` accepts an array of any type as a parameter -- the array is the data that would be adapted onto the ui later when
instantiating the android view.
- The `LayoutManager` can be a `LinearLayoutManager` for displaying items underneath each other, or `GridLayoutManager` for displaying items in
a grid fashion.
- The final setup so far :
```kt
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
supportActionBar?.title = "First App"
val array = ArrayList()
array.add(ItemModel(R.drawable.ic_launcher_background, "Ahmed"))
array.add(ItemModel(R.drawable.ic_launcher_background, "Abdo"))
array.add(ItemModel(R.drawable.ic_launcher_background, "Eman"))
val adapter = Adapter(array)
binding.recycler.layoutManager = LinearLayoutManager(this)
binding.recycler.adapter = adapter
}
}
```
## Bind data to the Ui :
- Create a DataModel class and this class would hold the data for each position to be rendered on its respective android views :
```kt
data class ItemModel(val photo: Int, val name: String)
```
- Create a `RecyclerView.ViewHolder` that holds the definition of each children views on each position with the recycler list :
```kt
import androidx.recyclerview.widget.RecyclerView
class ViewHolder(binding: ItemModelBinding) : RecyclerView.ViewHolder(binding.root) {
val photo = binding.image
val name = binding.textView
}
```
- Create a `RecyclerView.Adapter` that would return an instance of a ViewHolder and adapters data onto the children views on each position :
```kt
import android.view.LayoutInflater
import android.view.ViewGroup
import android.widget.Toast
import androidx.recyclerview.widget.RecyclerView
import com.example.session2.databinding.ItemModelBinding
class Adapter(private val list: ArrayList) : RecyclerView.Adapter() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val inflatedView = ItemModelBinding.inflate(LayoutInflater.from(parent.context))
return ViewHolder(inflatedView, parent, false))
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
val item = list[position]
holder.name.text = item.name
holder.photo.setOnClickListener {
Toast.makeText(it.context, position.toString(), Toast.LENGTH_SHORT).show()
}
}
override fun getItemCount(): Int {
return list.size
}
}
```