A Step-by-Step Guide to Using FlexboxLayout with RecyclerView in Android

Using FlexboxLayout with RecyclerView in Android can be a powerful way to create flexible and dynamic user interfaces.

FlexboxLayout is a library that makes it easy to create responsive UI components, and when combined with RecyclerView, it enables you to create lists or grids that adapt to different screen sizes and orientations.

In this tutorial, I am focusing on creating a flexbox layout with recyclerview. To learn more about flexbox layout check the below tutorial.

Create flexible layouts with FlexboxLayout In Android

Below is a step-by-step guide to using FlexboxLayout with RecyclerView in Android:

Step 1: Set up your project

Ensure you have the necessary tools and libraries installed in your Android development environment. In your project’s build.gradle file, add the following dependencies:

implementation 'com.google.android.flexbox:flexbox:3.0.0'

Step 2: Create your item layout

Design the layout for a single item in your RecyclerView. For this example, let’s create a simple layout with a Button.

adapter_item.xml

<?xml version="1.0" encoding="utf-8"?>
    <androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        xmlns:tools="http://schemas.android.com/tools"
        android:orientation="vertical">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnItem"
            android:layout_margin="4dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingHorizontal="12dp"
            android:paddingVertical="8dp"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            tools:text="@tools:sample/full_names"/>

    </androidx.appcompat.widget.LinearLayoutCompat>

Step 3: Create the RecyclerView adapter

Create an adapter for your RecyclerView. In this adapter, you’ll inflate the item layout from Step 2 and bind data to it. For simplicity, we’ll use a list of strings as data.

AdapterItems.kt

class AdapterItems(private var items : MutableList<String>) : RecyclerView.Adapter<AdapterItems.AdapterItemViewHolder>() {

        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): AdapterItemViewHolder {
            val view = LayoutInflater.from(parent.context).inflate(R.layout.adapter_item, parent, false)
            return AdapterItemViewHolder(view)
        }

        override fun getItemCount(): Int {
          return items.size
        }

        override fun onBindViewHolder(holder: AdapterItemViewHolder, position: Int) {
            holder.bind(items[position])
        }

        fun addNewItem(itemName: String) {
            this.items.add(itemName)
            notifyItemInserted(items.size)
        }

        inner class AdapterItemViewHolder(view: View): ViewHolder(view) {

            private val tvItem = view.findViewById<Button>(R.id.btnItem)
            fun bind(item: String){
                tvItem.text = item
            }

        }
    }

Step 4: Set up RecyclerView

In your activity/fragment In your activity or fragment layout, add a RecyclerView.

<?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">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerviewItems"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_margin="8dp"
            app:layoutManager="com.google.android.flexbox.FlexboxLayoutManager"
            app:layout_constraintBottom_toTopOf="@+id/addItem"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:itemCount="5"
            tools:listitem="@layout/adapter_item" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/addItem"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:text="Add Item"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

Step 5: Initialize RecyclerView and set the adapter

In your activity or fragment, initialize the RecyclerView, set the flexboxLayoutManager, and attach the adapter.

class MainActivity : AppCompatActivity() {

        lateinit var recyclerviewitems: RecyclerView
        lateinit var adapterItems: AdapterItems
        lateinit var btnAddItem: MaterialButton

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            recyclerviewitems = findViewById(R.id.recyclerviewItems)
            btnAddItem = findViewById(R.id.addItem)

            val flexboxLayoutManager = FlexboxLayoutManager(this)
            flexboxLayoutManager.apply {
                flexDirection = FlexDirection.ROW
                flexWrap = FlexWrap.WRAP
            }
            val items =
                listOf("Android", "Jetpack compose", "Material Design", "Firebase", "AWS", "Retrofit")

            adapterItems = AdapterItems(items.toMutableList())

            recyclerviewitems.apply {
                layoutManager = flexboxLayoutManager
                adapter = adapterItems
            }

            btnAddItem.setOnClickListener {
                adapterItems.addNewItem(items.random())
            }
        }

    }

The FlexboxLayout provides various properties to customize its behavior, such as **flexDirection**, **flexWrap**, **alignItems**, **alignContent**, and **justifyContent**. You can adjust these properties in the layout manager to achieve the desired layout.

Output:

That’s it! You’ve successfully set up a RecyclerView with FlexboxLayout in Android, allowing you to create flexible and responsive UI components. The items will wrap automatically based on the available width, making them suitable for different screen sizes and orientations.