Category

RecyclerView

Category

horizontal recyclerview android example
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

Horizontal RecyclerView Android Example

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 your friends, family and co-workers.