How to change number of columns in a RecyclerView when orientation or screen size(Tablet) changed

1 Support Orientation Changes

In my previous blog, I tried to explain how to support orientation changes in your Android Application. You need to define a configuration changes list to your activity. Defining this configuration changes lists means that the activity will handle these itself. When any of these changes in that defined list occur at runtime, the activity will not be restarted again. Instead, onConfigurationChanged() method will be called. Please check that post if you do not have knowledge about this.

2 Use GridlayoutManager instead of LinearLayoutManager

There could be unbalanced items in landscape orientation if you are using a linear list instead of grids. RecyclerView is using LayoutManager to place items. Most of the cases LinearLayoutManager have been used to represent vertical or horizontal scrolling lists. GridLayoutManager is displaying items in a grid rather than a list. GridlayoutManager takes spanCount as a constructor parameter. "spanCount" is number of columns in our RecyclerView. When the spanCount is 1 then GridLayoutManager will behave like LinearLayoutManager. You can change spanCount by accessing its property yourGridLayoutManager.spanCount = yourNewSpanCount .

private var gridLayoutManager: GridLayoutManager ?=null
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    gridLayoutManager = GridLayoutManager(requireContext(), ${yourSpanCount})
    ${yourRecyclerView}.layoutManager = gridLayoutManager
    ...
}

3 Create integers.xml for portrait and landSpace spanCounts

3.1.Create a resource file under values resource folder. Right click "values" folder and select New > Values resource file. Name the file integers and click OK.

3.2 Write the portrait span count between <resources> tags. Lets name it grid_column_count with value 1.

<resources>
    <integer name="grid_column_count">1</integer>
</resources>

3.3 Create another resource file under values resource folder. Name it with the as first file. But now before clicking OK, select Orientation in the Available qualifiers pane, and press the >> symbol in the middle of the dialog to assign this qualifier. Select Landscape from orientations. Then after clicking OK you will see that you have two integers.xml. One of them has (land) suffix.

3.4 Write the landscape span count between <resources> tags inside integers.xml (land). Lets name it grid_column_count with value 2.

<resources> <integer name="grid_column_count">2</integer> </resources>

3.5 Finally just override onConfigurationChanged and set span count of GridLayoutManager.

private var gridLayoutManager: GridLayoutManager ?=null
override fun onConfigurationChanged(newConfig: Configuration) {
    super.onConfigurationChanged(newConfig)
    gridLayoutManager?.spanCount = resources.getInteger(R.integer.grid_column_count)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    gridLayoutManager = GridLayoutManager(requireContext(), resources.getInteger(R.integer.grid_column_count))
    ${yourRecyclerView}.run {
        layoutManager = gridLayoutManager
        ...
    }
    ...
}

These are results.

4 Going further -> Lets adapt our RecyclerView to tablets

I used Smallest Screen Width qualifier. This qualifier is used most frequently to select for tablets. Anything with a smallest width of at least 600dp is considered a tablet.

4.1 Create another resource file under values resource folder. Name it with the as first file integers.xml. Select Smallest Screen Width in the Available qualifiers pane, and press the >> symbol in the middle of the dialog to assign this qualifier. Set value to 600. Then after clicking OK you will see that you have third integers.xml. One of them has (sw600dp) suffix.

4.2 Write the portrait span count between <resources> tags inside integers.xml (sw600dp). Lets name it grid_column_count with value 2.

<resources> <integer name="grid_column_count">2</integer> </resources>

4.3 Create another resource file under values resource folder. Name it with the as first file integers.xml. Select Smallest Screen Width in the Available qualifiers pane, and press the >> symbol in the middle of the dialog to assign this qualifier. Set value to 600. Then select Orientation in the Available qualifiers pane, and press the >> symbol in the middle of the dialog to assign this qualifier. Select Landscape from orientations. Then after clicking OK you will see that you have forth integers.xml. It has (sw600dp-land) suffix.

4.4 Write the landscape span count between <resources> tags inside integers.xml (sw600dp-land). Lets name it grid_column_count with value 3.

<resources> <integer name="grid_column_count">3</integer> </resources>

4.5 If you have implemented code in 3.5 then you have completed implementation.

These are tablet results.

Thank you for reading. See you on next posts. You can also check implementation from https://github.com/b-basoglu/NewsApp this Github project.