How to make Recyclerview + GridLayoutManager automatically fit entire screen?

Question

This activity has a RecyclerView that is displayed as a 3x3 grid.

MainActivity.kt

class MainActivity : AppCompatActivity() {

    lateinit var home_btn_grid: RecyclerView
    lateinit var uiBinding: ActivityMainBinding
    lateinit var btn_grid_adapter: MainButtonAdapter


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        uiBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(uiBinding.root)

        home_btn_grid = uiBinding.homeButtonGrid

        val homeMenuList = arrayListOf<HomeMenuItem>(
            HomeMenuItem(R.drawable.ic_home, "HOME"),
            HomeMenuItem(R.drawable.ic_home, "HOME"),
            HomeMenuItem(R.drawable.ic_home, "HOME"),
            HomeMenuItem(R.drawable.ic_home, "HOME"),
            HomeMenuItem(R.drawable.ic_home, "HOME"),
            HomeMenuItem(R.drawable.ic_home, "HOME"),
            HomeMenuItem(R.drawable.ic_home, "HOME"),
            HomeMenuItem(R.drawable.ic_home, "HOME"),
            HomeMenuItem(R.drawable.ic_home, "HOME")
        )

        btn_grid_adapter = MainButtonAdapter(homeMenuList)
        home_btn_grid.adapter = btn_grid_adapter
        
        // 3 columns
        home_btn_grid.layoutManager = GridLayoutManager(applicationContext, 3)

    }
}

MainButtonAdapter.kt

class MainButtonAdapter(val dataSet:ArrayList<HomeMenuItem>): 

    RecyclerView.Adapter<MainButtonAdapter.ViewHolder>() {
    
        class ViewHolder(val view:View): RecyclerView.ViewHolder(view) {
            val img: ImageView = itemView.findViewById(R.id.main_img)
            val text: TextView = itemView.findViewById(R.id.tvMenuName)
    
        }
    
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
            val theView = LayoutInflater.from(parent.context)
                .inflate(R.layout.item_main_button, parent, false)
    
            return MainButtonAdapter.ViewHolder(theView)
        }
    
        override fun onBindViewHolder(holder: ViewHolder, position: Int) {
            holder.img.setBackgroundResource(dataSet.get(position).image)
            holder.text.text = dataSet.get(position).text
        }
    
        override fun getItemCount(): Int {
           if (dataSet == null) return 0
           else return dataSet.size
        }
    
    }

item_main_button.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="5dp"
    app:cardCornerRadius="5dp"
    app:cardElevation="5dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/main_img"
            android:layout_centerInParent="true"
            android:layout_width="24dp"
            android:layout_height="24dp"
            />

        <TextView
            android:id="@+id/tvMenuName"
            android:gravity="center_horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/main_img"
             />

    </RelativeLayout>

</androidx.cardview.widget.CardView>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/home_button_grid"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</RelativeLayout>

I tested this on a device with very small display: 240x320. Screen width-wise, yes it's nicely divided into 3 columns. Screen height-wise, unfortunately it roughly occupied only the half. How to make it fit the entire screen?

Answer 1

Use GridView , I think resolve this problem

https://abhiandroid.com/ui/gridview