Have friends? RecyclerView to the rescue!
Let's create a RecyclerView
that will display a list of your friends. In this app, we will be able to scroll through a list of all of your friends. In this tutorial, we'll use Kotlin and Android Studio 3.3.2 (although any version of Android Studio will work).
First, we need to create a new Android Studio project. Make sure to enable Kotlin support in the setup dialog wizard. When you press Finish, Android Studio takes you to the default editor, with two open tabs: MainActivity.kt
and content_main.xml
. If you open MainActivity.kt, you should see the following code.
package com.example.listoffriends
import android.os.Bundle
import com.google.android.material.snackbar.Snackbar
import androidx.appcompat.app.AppCompatActivity;
import android.view.Menu
import android.view.MenuItem
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)
fab.setOnClickListener { view ->
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show()
}
}
override fun onCreateOptionsMenu(menu: Menu): Boolean {
// Inflate the menu; this adds items to the action bar if it is present.
menuInflater.inflate(R.menu.menu_main, menu)
return true
}
override fun onOptionsItemSelected(item: MenuItem): Boolean {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
return when (item.itemId) {
R.id.action_settings -> true
else -> super.onOptionsItemSelected(item)
}
}
}
This class contains unnecessary code. Let's modify MainActivity.kt to the following.
package com.example.listoffriends
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)
}
}
Next, we need to create a class that will contains our friend's information. To create a new Kotlin class open the Project pane on the left side of Android Studio. Make sure that the Project pane indicates that the "Android" drop-down is selected. Then open app, java, then the first folder inside of java. Right click on the com.example.listooffriends (or whatever package you gave it when you created the project) and select New, Kotlin File/Class.
Android Studio then creates the following file. Give it a name of Friend and select Class from the drop-down that appears just below the name. The file is created and should look like this:
package com.example.listoffriends
class Friend {
}
No we need to convert this into a data class. To do this, modify the file to the following.
package com.example.listoffriends
data class Friend()
We now need to add some fields to this Kotlin data class. Add a firstName, lastName and age, as follows.
package com.example.listoffriends
data class Friend(
val firstName: String,
val lastName: String,
val age: Int
)
Back in MainActivity.kt, add the following code to the bottom of the onCreate method.
val friends = mutableListOf<Friend>()
for (i in 1..100) {
friends.add(Friend("Daniel", "Malone", 25))
}
Our Adapter will handle the displaying of our friends. Create a new Kotlin class named FriendsAdapter
.
package com.example.listoffriends
class FriendsAdapter {
}
This needs to extend RecyclerView.Adapter and end with FriendsAdapter.ViewHolder
.
package com.example.listoffriends
import androidx.recyclerview.widget.RecyclerView
class FriendsAdapter : RecyclerView.Adapter<FriendsAdapter.ViewHolder>() {
}
package com.example.listoffriends
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
class FriendsAdapter : RecyclerView.Adapter<FriendsAdapter.ViewHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FriendsAdapter.ViewHolder {
}
override fun getItemCount(): Int {
}
override fun onBindViewHolder(holder: FriendsAdapter.ViewHolder, position: Int) {
}
}
This class needs to receive the list of friends from MainActivity.kt
. Modify the constructor to add the friends list.
class FriendsAdapter(val friends: List<Friend>) : RecyclerView.Adapter<FriendsAdapter.ViewHolder>() {
The first we'll update is getItemCount()
, because it's easy. Add friends.size.
override fun getItemCount() = friends.size
Next, let's work on onCreateViewHolder
, where we need to setup our view. This should give you an error; we'll fix it later.
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FriendsAdapter.ViewHolder {
val view = LayoutInflater.from(parent.context).inflate(R.layout.friend_row, parent, false)
return ViewHolder(view)
}
Next, let's create our friend_row.xml
layout file. When creating the file, set Root Element to ConstraintLayout
.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/firstName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
In the above code, we setup our firstName
TextView
widget, and constrain it to the top and left.
RecyclerView Day 2: List of Emails
Alert tutorial.
Material Design.
Stroke it.
Create beautiful buttons in XML.
Built with Android Studio and Kotlin.
Getting started is sometimes the hardest part.
Add a click listener in Kotlin.
Let users sign in.
It always begins with registration.