Age Calculator with Recycler view in Android Kotlin.
3 min readOct 24, 2021
Many times we create an age calculator but if we need an age calculator in list format so in that time we use recycler view.
First of all, we need to add dependency in the build.Gradle(:app) file
//size dp/sp
implementation 'com.intuit.sdp:sdp-android:1.0.6'
implementation 'com.intuit.ssp:ssp-android:1.0.6'
//cardview
implementation "androidx.cardview:cardview:1.0.0"
//RecyclerView
implementation 'androidx.recyclerview:recyclerview:1.2.1'Now we will design our layout first.
activity_main.xml
<?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"
tools:context=".MainActivity">
<TextView
android:id="@+id/txt_cal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="36dp"
android:layout_marginTop="36dp"
android:text="Age Calculator: "
android:textSize="@dimen/_16ssp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/iv_plus"
android:layout_width="@dimen/_24sdp"
android:layout_height="@dimen/_24sdp"
android:layout_marginEnd="19dp"
android:layout_marginBottom="11dp"
android:backgroundTint="#4CAF50"
android:src="@drawable/ic_baseline_add_circle_24"
app:layout_constraintBottom_toTopOf="@+id/view"
app:layout_constraintEnd_toStartOf="@+id/iv_minus"
app:layout_constraintTop_toBottomOf="@+id/txt_cal" />
<ImageView
android:id="@+id/iv_minus"
android:layout_width="@dimen/_24sdp"
android:layout_height="@dimen/_24sdp"
android:layout_marginEnd="15dp"
android:backgroundTint="#DF3333"
android:src="@drawable/ic_baseline_do_not_disturb_on_24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/iv_plus" />
<TextView
android:id="@+id/txt_person"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
android:text="Total Person:"
android:textSize="@dimen/_12ssp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/txt_cal" />
<TextView
android:id="@+id/txt_total_person"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:text="1"
android:textSize="@dimen/_12ssp"
app:layout_constraintBottom_toBottomOf="@+id/txt_person"
app:layout_constraintStart_toEndOf="@+id/txt_person"
app:layout_constraintTop_toTopOf="@+id/txt_person" />
<View
android:id="@+id/view"
android:layout_width="370dp"
android:layout_height="@dimen/_1sdp"
android:layout_marginStart="25dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="16dp"
android:background="@color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/txt_total_person"
app:layout_constraintWidth_percent="0.9" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_recyclerView"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/view"
tools:listitem="@layout/item_recycler" />
</androidx.constraintlayout.widget.ConstraintLayout>Now we will create an item design for recycler view
item_recycler.xml
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
app:cardCornerRadius="5dp"
app:cardElevation="5dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="16dp">
<!-- Title, secondary and supporting text -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Person: "
android:textAppearance="?attr/textAppearanceHeadline6" />
<TextView
android:id="@+id/personsr_no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textAppearance="?attr/textAppearanceHeadline6" />
</LinearLayout>
<!-- Buttons -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:orientation="horizontal">
<EditText
android:id="@+id/dob"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Date Of Birth"
/>
<TextView
android:id="@+id/default_date"
style="?attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Today's Date" />
<Button
android:id="@+id/btn_cal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="calculate"
android:textSize="@dimen/_8ssp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="16dp">
<!-- Title, secondary and supporting text -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your age is : "
android:textSize="@dimen/_14ssp" />
<TextView
android:id="@+id/txt_age"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="@dimen/_14ssp"
android:textStyle="bold"
/>
</LinearLayout>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>For creating recycler view I need a data class.
User. kt
package com.example.agecalculator
data class User(val id:Int,val age:Int,val year:Int)Now, let's start building our adapter class.
UserAdapter.kt
package com.example.agecalculator
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.item_recycler.view.*
import java.text.SimpleDateFormat
import java.util.*
class UserAadpter(var listUser: MutableList<User>) : RecyclerView.Adapter<UserAadpter.UserHolder>() {
class UserHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
fun bindData(user: User, pos: Int) {
itemView.personsr_no.text =user.id.toString()
itemView.dob.setText(user.year.toString())
itemView.txt_age.setText(user.age.toString())
itemView.btn_cal.setOnClickListener {
if(itemView.dob.text.toString().trim().length==0){
itemView.dob.setError("Enter Correct Year")
}else{
itemView.txt_age.text = calcAge(itemView.dob.text.toString())
}
}
itemView.default_date.text=currentDate()
}
private fun currentDate():String{
val simpleDateFormat = SimpleDateFormat("dd.MM.yyyy")
val currentDateAndTime: String = simpleDateFormat.format(Date())
return currentDateAndTime
}
private fun calcAge(input: String): String {
val year = input.toInt()
val currentYear = Calendar.getInstance().get(Calendar.YEAR)
return "You are ${currentYear - year} year(s) old"
}
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): UserHolder {
//here layout inflation will resides
val view = LayoutInflater.from(parent.context)
.inflate(R.layout.item_recycler, parent, false) //line will be as it is
return UserHolder(view)
}
override fun onBindViewHolder(holder: UserHolder, position: Int) {
holder.bindData(
listUser.get(position),
position
) //create method in viewholder and call that method here
}
override fun getItemCount(): Int {
return listUser.size //always list.size will be there
}
}At last, we need to code for the main activity.
MainActivity.kt
package com.example.agecalculator
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
private lateinit var recyclerView: RecyclerView
private lateinit var recyclerAdapter: UserAadpter
private var dataList = mutableListOf<User>()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
recyclerView = findViewById(R.id.rv_recyclerView)
//grid layout manager
recyclerView.layoutManager = LinearLayoutManager(applicationContext)
dataList.add(User(dataList.size+1,0,0))
recyclerAdapter = UserAadpter(dataList)
recyclerView.adapter = recyclerAdapter
iv_plus.setOnClickListener {
dataList.add(User(dataList.size+1,0,0))
recyclerAdapter.notifyItemInserted(dataList.size-1)
txt_total_person.text=dataList.size.toString()
}
iv_minus.setOnClickListener {
if(dataList.size>1) {
dataList.removeAt(dataList.size - 1)
recyclerAdapter.notifyItemRemoved(dataList.size + 1)
txt_total_person.text = dataList.size.toString()
}else if(dataList.size==1) {
dataList.clear()
dataList.add(User(dataList.size+1,0,0))
recyclerAdapter.notifyDataSetChanged()
txt_total_person.text = dataList.size.toString()
}
}
}
}
here is the source code.
That’s it. Happy Coding!!
