Table Layout with Recycler View in Kotlin
2 min readOct 22, 2020
Hi, this article is about how to use table layout with recycler view. Our final outcome would look like this:
First, create a table_row_layout.xml for the rows of the table.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableLayout
android:id="@+id/table_heading_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/table_border"
>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv_user_name"
style="@style/table_row_item"
android:layout_width="0dp"
android:layout_column="0"
android:layout_margin="1dp"
android:layout_weight="1"
android:background="@color/white"
android:textAlignment="center" />
<TextView
android:id="@+id/tv_user_age"
style="@style/table_row_item"
android:layout_width="0dp"
android:layout_column="1"
android:layout_margin="1dp"
android:layout_weight="1"
android:background="@color/white"
android:textAlignment="center" />
<TextView
android:id="@+id/tv_user_designation"
style="@style/table_row_item"
android:layout_width="0dp"
android:layout_column="2"
android:layout_margin="1dp"
android:layout_weight="1"
android:background="@color/white"
android:baselineAligned="false"
android:textAlignment="center" />
</TableRow>
</TableLayout>
</LinearLayout>Create table_row_item style in styles.xml
<style name="table_row_item" parent="@android:style/TextAppearance.Small">
<item name="android:gravity">center_vertical</item>
<item name="android:textSize">@dimen/_10ssp</item>
<item name="android:background">@color/white</item>
<item name="android:layout_marginRight">@dimen/_1sdp</item>
<item name="android:layout_marginEnd">@dimen/_1sdp</item>
<item name="android:paddingStart">@dimen/_10sdp</item>
<item name="android:paddingLeft">@dimen/_10sdp</item>
<item name="android:layout_height">@dimen/_30sdp</item>
</style>Now create a TableRowAdapter.kt for the row.
class TableRowAdapter(private var userArrayList: ArrayList<User>) :
RecyclerView.Adapter<TableRowAdapter.ViewHolder>() {
override fun onCreateViewHolder(viewGroup: ViewGroup, i: Int): ViewHolder {
val v: View = LayoutInflater.from(viewGroup.context)
.inflate(R.layout.table_row_layout, viewGroup, false)
return ViewHolder(v)
}
override fun onBindViewHolder(viewHolder: ViewHolder, i: Int) {
viewHolder.tvUserName.text = userArrayList[i].name
viewHolder.tvAge.text = userArrayList[i].age.toString()
viewHolder.tvDesignation.text = userArrayList[i].designation
}
override fun getItemCount(): Int {
return userArrayList.size
}
class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
val tvUserName: TextView = itemView.findViewById(R.id.tv_user_name)
val tvAge: TextView = itemView.findViewById(R.id.tv_user_age)
val tvDesignation: TextView = itemView.findViewById(R.id.tv_user_designation)
}
}Create a User.kt data class
data class User(
var name: String,
var age: Int,
var designation: String
)Add the following dependencies in build.gradle
implementation 'com.intuit.ssp:ssp-android:1.0.6'
implementation 'com.intuit.sdp:sdp-android:1.0.6'
implementation 'androidx.recyclerview:recyclerview:1.1.0'Now create a header for the table and add recycler view in your activity_main.xml
<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">
<TableLayout
android:id="@+id/table_heading_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_5sdp"
android:layout_marginTop="@dimen/_20sdp"
android:layout_marginEnd="@dimen/_4sdp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TableRow>
<TextView
style="@style/table_header"
android:layout_width="0dp"
android:layout_height="@dimen/_30sdp"
android:layout_column="0"
android:layout_weight="1"
android:textAlignment="center"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:text="@string/name"/>
<TextView
android:layout_height="@dimen/_30sdp"
android:layout_width="0dp"
android:layout_column="1"
android:layout_weight="1"
android:text="@string/age"
style="@style/table_header"
android:paddingEnd="@dimen/_5sdp"
android:textAlignment="center"
android:layout_gravity="center_horizontal"
android:gravity="center"/>
<TextView
android:layout_height="@dimen/_30sdp"
android:layout_width="0dp"
android:layout_column="2"
android:layout_weight="1"
android:text="@string/designation"
style="@style/table_header"
android:paddingEnd="@dimen/_5sdp"
android:textAlignment="center"
android:layout_gravity="center_horizontal"
android:gravity="center"/>
</TableRow>
</TableLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/table_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_5sdp"
android:layout_marginEnd="@dimen/_5sdp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/table_heading_layout">
</androidx.recyclerview.widget.RecyclerView>
</androidx.constraintlayout.widget.ConstraintLayout>Add table_header style in styles.xml
<style name="table_header" parent="@android:style/TextAppearance.Small">
<item name="android:textStyle">bold</item>
<item name="android:layout_gravity">center_vertical</item>
<item name="android:textColor">@color/white</item>
<item name="android:gravity">center_vertical</item>
<item name="android:textSize">@dimen/_11ssp</item>
<item name="android:background">#FF0000</item>
<item name="android:layout_marginRight">@dimen/_1sdp</item>
<item name="android:layout_marginEnd">@dimen/_1sdp</item>
<item name="android:paddingStart">@dimen/_10sdp</item>
<item name="android:paddingLeft">@dimen/_10sdp</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">@dimen/_40sdp</item>
</style>Add the following code to your MainActivity.kt
class MainActivity : AppCompatActivity() {
private lateinit var tableRecyclerView : RecyclerView
private var userList = ArrayList<User>()
private lateinit var tableRowAdapter: TableRowAdapter
private lateinit var user : User
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
userList.add(User("John", 24, "Software Engineer"))
userList.add(User("Mark", 29, "Data Analyst"))
userList.add(User("Charlie", 26, "Senior Software Engineer"))
userList.add(User("Amy", 24, "Quality Assurance Engineer"))
userList.add(User("Elizabeth", 32, "Project Manager"))
tableRecyclerView = findViewById(R.id.table_recycler_view)
tableRowAdapter = TableRowAdapter(userList)
tableRecyclerView.layoutManager = LinearLayoutManager(this)
tableRecyclerView.adapter = tableRowAdapter
}
}Find the code here
https://github.com/MustafaImran/TableViewWithRecyclerView
Tadaaaa. It was that simple. Enjoy!