This codelab is part of the Android Kotlin Fundamentals course. You'll get the most value out of this course if you work through the codelabs in sequence. All the course codelabs are listed on the Android Kotlin Fundamentals codelabs landing page.
One of the main strengths of RecyclerView
is that it lets you use layout managers to control and modify your layout strategy. A LayoutManager
manages how the items in the RecyclerView
are arranged.
RecyclerView
comes with out-of-the-box layout managers for common use cases. For example, you can use LinearLayout
for horizontal and vertical lists, or GridLayout
for grids. For more complicated use cases, you need to implement a custom LayoutManager
.
In this codelab, you learn how to display data using a grid layout instead of a list, building on the sleep-tracker app from the previous codelab. (If you don't have the app from the previous codelab, you can download starter code for this codelab.)
You should be familiar with:
Activity
, Fragments
, and Views
safeArgs
to pass data between fragmentsLiveData
and their observersRoom
database, create a DAO, and define entitiesRecyclerView
with an Adapter
, ViewHolder
, and item layoutRecyclerView
LayoutManager
to change how your data is displayed in the RecyclerView
RecyclerView
in the app with a grid of sleep data.The sleep-tracker app has two screens, represented by fragments, as shown in the figure below.
The first screen, shown on the left, has buttons for starting and stopping tracking. The screen shows some of the user's sleep data. The Clear button permanently deletes all the data that the app has collected for the user. The second screen, shown on the right, is for selecting a sleep-quality rating.
This app uses a simplified architecture with a UI controller, view model and LiveData
, and a Room
database to persist sleep data.
The sleep data is displayed in a RecyclerView
. In this codelab, you change the app to use a GridLayout
. The final screen will look like the screenshot below.
In a previous codelab, when you added the RecyclerView
to fragment_sleep_tracker.xml
, you added a LinearLayoutManager
without any customizations. This code displays the data as a vertical list.
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
LinearLayoutManager
is the most common and straightforward layout manager for RecyclerView
, and it supports both horizontal and vertical placement of child views. For example, you could use LinearLayoutManager
to create a carousel of images that the user scrolls horizontally.
Another common use case is needing to show a lot of data to the user, which you can do using GridLayout
. The GridLayoutManager
for RecyclerView
lays out the data as a scrollable grid, as shown below.
From a design perspective, GridLayout
is best for lists that can be represented as icons or images, such as lists within a photo browsing app. In the sleep-tracker app, you could show each night of sleep as a grid of large icons. This design would give the user an overview of their sleep quality at a glance.
GridLayout
arranges items in a grid of rows and columns. Assuming vertical scrolling, by default, each item in a row takes up one "span." (In this case, one span is equivalent to the width of one column.)
In the first two examples shown below, each row is made up of three spans. By default, the GridLayoutManager
lays out each item in one span until the span count, which you specify. When it reaches the span count, it wraps to the next line.
By default, each item takes up one span, but you can make an item wider by specifying how many spans it is to occupy. For example, the top item in the rightmost screen (shown below) takes up three spans.
In this task, you take the RecyclerView
that you finished in the last exercise and update it to display data using a GridLayoutManager
. You can continue using the sleep-tracker app from the previous codelab, or you can download the RecyclerViewGridLayout-Starter app from GitHub.
fragment_sleep_tracker.xml
layout file.sleep_list
RecyclerView
definition.Code to delete:
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager
SleepTrackerFragment.kt
.OnCreateView()
, just before the return
statement, create a new vertical, top-to-bottom GridLayoutManager
with 3 spans.GridLayoutManager
constructor takes up to four arguments: a context, which is the activity
, the number spans (columns, in the default vertical layout), an orientation (default is vertical), and whether it's a reverse layout (default is false
). val manager = GridLayoutManager(activity, 3)
RecyclerView
to use this GridLayoutManager
. The RecyclerView
is in the binding object and is called sleepList
. (See fragment_sleep_tracker.xml
.)binding.sleepList.layoutManager = manager
The current layout in list_item_sleep_night.xml
displays the data by using a whole row per night. In this step, you define a more compact square item layout for the grid.
list_item_sleep_night.xml
.sleep_length
TextView
, because the new design doesn't need it.quality_string
TextView
so that it displays beneath the ImageView
. To do that, you have to update quite a few things. Here is the final layout for the quality_string
TextView
:<TextView
android:id="@+id/quality_string"
android:layout_width="0dp"
android:layout_height="20dp"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/quality_image"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/quality_image"
app:layout_constraintTop_toBottomOf="@+id/quality_image"
tools:text="Excellent!!!"
app:sleepQualityString="@{sleep}" />
quality_string
TextView
is positioned below the ImageView
. Because you used data binding, you don't need to change anything in the Adapter
. The code should just work, and your list should display as a grid.
ConstraintLayout
still takes the entire width. The GridLayoutManager
gives your view a fixed width, based on its span. GridLayoutManager
does its best to meet all constraints when laying out the grid, adding whitespace or clipping items.SleepTrackerFragment
, in the code that creates the GridLayoutManager
, change the number of spans for GridLayoutManger
to 1. Run the app, and you get a list.val manager = GridLayoutManager(activity, 1)
GridLayoutManager
to 10 and run the app. Notice that the GridLayoutManager
will fit 10 items in a row, but the items are now clipped. GridLayoutManager.VERTICAL
. Run the app and notice how you can scroll horizontally. You would need a different layout to make this look good.val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)
Android Studio project: RecyclerViewGridLayout
RecyclerView
are arranged. RecyclerView
comes with out-of-the-box layout managers for common use cases such as LinearLayout
for horizontal and vertical lists, and GridLayout
for grids. LayoutManager
.GridLayout
is best used for lists of items that can be represented as icons or images.GridLayout
arranges items in a grid of rows and columns. Assuming vertical scrolling, each item in a row takes up what's called a "span." LayoutManager
for the RecyclerView
either in the XML layout file that contains the <RecyclerView>
element, or programmatically. Udacity courses:
Android developer documentation:
This section lists possible homework assignments for students who are working through this codelab as part of a course led by an instructor. It's up to the instructor to do the following:
Instructors can use these suggestions as little or as much as they want, and should feel free to assign any other homework they feel is appropriate.
If you're working through this codelab on your own, feel free to use these homework assignments to test your knowledge.
Which of the following are layout managers provided by Android? Select all that apply.
▢ LinearLayouManager
▢ GridLayoutManager
▢ CircularLayoutManager
▢ StaggeredGridLayoutManager
What is a "span"?
▢ The size of a grid created by GridLayoutManager
.
▢ The width of a column in the grid.
▢ The dimensions of an item in a grid.
▢ The number of columns in a grid that has a vertical orientation.
Start the next lesson: