Do you want to make Horizontal RecyclerView?
Before jumping into tutorial, I would recommend reading RecyclerView In Android : The Ultimate Guide.
In this post, I will teach you how to make Horizontal RecyclerView In Android with 4 ideas. In the end, we will create a Horizontal RecyclerView project too.
Okay… Let’s start.
RecyclerView uses LayoutManager class to arrange its items, so below we are going to use the LayoutManager class to make it work.
1. Horizontal RecyclerView Using LinearLayoutManager
This is the first and most commonly used option to make Horizontal RecyclerView. LinearLayoutManager provides a constructor that we can change the orientation of RecyclerView.
LinearLayoutManager(Context context, int orientation, boolean reverseLayout)
val layoutManager = LinearLayoutManager(this@MainActivity,LinearLayoutManager.HORIZONTAL,false) recyclerview.layoutManager = layoutManager
- Here, we use “this” because RecyclerView uses in MainActivity. If you are using RecyclerView in fragment, you can use getActivity()
- false : Do not reverse the layout.
2.Horizontal RecyclerView Using app:LayoutManager attribute
- app:layoutManager=”androidx.recyclerview.widget.LinearLayoutManager”: sets LayoutManger for RecyclerView.
- android:orientation=”horizontal” : Render RecyclerView in Horizontal.
- For support library users, Use this app:layoutManager=”android.support.v7.widget.LinearLayoutManager”.
3. Horizontal RecyclerView Using GridLayoutManager
In this part, we use GridLayoutManager for creating horizontal RecyclerView. Use the below one.
GridLayoutManager(Context context, int spanCount, int orientation, boolean reverseLayout)
spanCount: Number of rows or columns based on orientation.
val gridLayoutManager = GridLayoutManager(this@MainActivity,1,GridLayoutManager.HORIZONTAL,false)
recyclerview.layoutManager = gridLayoutManager
You can use XML way, just like below:
app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
android:orientation="horizontal"
app:spanCount="1"
- For support library users, app:layoutManager=”android.support.v7.widget.GridLayoutManager”
4. Horizontal Recyclerview Using StaggeredGridLayoutManager
In this section we can use StaggeredGridLayoutManager constructor, shown below:
StaggeredGridLayoutManager(int spanCount, int orientation)
val staggeredGridLayoutManager = StaggeredGridLayoutManager(1,StaggeredGridLayoutManager.HORIZONTAL)
recyclerview.layoutManager = staggeredGridLayoutManager
In XML way
app:layoutManager="androidx.recyclerview.widget.StaggeredGridLayoutManager" android:orientation="horizontal" app:spanCount="1"
- For support library users, Use app:layoutManager=”android.support.v7.widget.StaggeredGridLayoutManager”/li>
.
Horizontal RecyclerView In Android – Main Example
Let’s create a horizontal RecyclerView…
Just like below
Open Android Studio and start a new Android Studio project.
Application name : Horizontal RecyclerView Android Example.
Company domain: androidride.com
Check to include Kotlin support.
Select minimum SDK:API 15 – Android 4.0.3 (Ice Cream Sandwich) and click Next.
Next dialog, Select Empty Activity and click Next.
Activity Name: MainActivity
Check Generate layout file
Layout Name: activity_main
If you are using the latest Android Studio versions, there will be a CheckBox with the text “Use androidx.* artifacts”. Make sure that’s checked, which creates our project with androidx library.
Click Finish.
build.gradle
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'
android {
compileSdkVersion 28
buildToolsVersion "29.0.0"
defaultConfig {
applicationId "com.androidride.horizontalrecyclerviewandroidexample"
minSdkVersion 15
targetSdkVersion 28
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'androidx.core:core-ktx:1.1.0'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test:runner:1.2.0'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
implementation 'androidx.recyclerview:recyclerview:1.1.0'
}
colors.xml
#008577
#00574B
#D81B60
strings.xml
Horizontal RecyclerView Android Example
styles.xml
activity_main.xml
MainActivity.kt
class MainActivity : AppCompatActivity()
{
val dataList = ArrayList()
lateinit var adapter : RecyclerViewAdapter
override fun onCreate(savedInstanceState: Bundle?)
{
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setupdata()
adapter = RecyclerViewAdapter(dataList)
//Using LinearLayoutManager
val layoutManager = LinearLayoutManager(this@MainActivity,LinearLayoutManager.HORIZONTAL,false)
recyclerview.layoutManager = layoutManager
/*Horizontal RecyclerView using GridLayoutManager
val gridLayoutManager = GridLayoutManager(this@MainActivity,1,GridLayoutManager.HORIZONTAL,false)
recyclerview.layoutManager = gridLayoutManager
*/
/*
Horizontal RecyclerView using StaggeredGridLayoutManager
val staggeredGridLayoutManager = StaggeredGridLayoutManager(1,StaggeredGridLayoutManager.HORIZONTAL)
recyclerview.layoutManager = staggeredGridLayoutManager
*/
recyclerview.adapter = adapter
}
private fun setupdata()
{
dataList.add("ONE")
dataList.add("TWO")
dataList.add("THREE")
dataList.add("FOUR")
dataList.add("FIVE")
dataList.add("SIX")
dataList.add("SEVEN")
dataList.add("EIGHT")
dataList.add("NINE")
dataList.add("TEN")
}
}
item.xml
RecyclerViewAdapter.kt
class RecyclerViewAdapter(val dataList: ArrayList):RecyclerView.Adapter()
{
inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
{
val textview = itemView.textview
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder
{
val inflater = LayoutInflater.from(parent.context)
val view = inflater.inflate(R.layout.item,parent,false)
return ViewHolder(view)
}
override fun getItemCount(): Int
{
return dataList.size
}
override fun onBindViewHolder(holder: ViewHolder, position: Int)
{
holder.textview.text = dataList.get(position)
}
}
Let’s run it and please share it with your friends, family, and co-workers.
