Android recycler view grid

Using lists and grids in Android with RecyclerView — Tutorial

This tutorial describes how to use the RecyclerView widget in Android applications.

1. Android and list or grids

1.1. Using lists or grids in Android

The display of elements in a list or grids is a very common pattern in mobile applications. The user sees a collection of items and can scroll through them. The collection of items can be a list, a grid or another structured representations of data. Such an activity is depicted in the following picture.

The user interacts with the collection of items via touch events or the toolbar. Individual items can be selected. This selection may update the toolbar or may trigger a detailed screen based on the selection. The following graphic sketches that.

1.2. Using RecyclerView

The RecyclerView class supports the display of a collection of data.

It is a modernized version of the ListView and the GridView classes provided by the Android framework. Recycler view addresses several issues that the existing widgets have. It enforced a programming style that results in good performance. It also comes with default animations for removing and adding elements.

RecyclerView allow to use different layout managers for positioning items.

Recycler view uses a ViewHolder to store references to the views for one entry in the recycler view. A ViewHolder class is a static inner class in your adapter which holds references to the relevant views. With these references your code can avoid the time-consuming findViewById() method to update the widgets with new data.

1.3. Adapters

An adapter manages the data model and adapts it to the individual entries in the widget. It extends the RecyclerView.Adapter class and is assigned to the recycler view via the RecyclerView.setAdapter method. The input to the adapter of an recycler view can be any arbitrary Java objects. Based on this input the adapter must return the total number of items via its getItemCount() method.

The adapter prepares the layout of the items by inflating the correct layout for the individual data elements. This work is done in the onCreateViewHolder method. It returns an object of type ViewHolder per visual entry in the recycler view.

This instance is used to access the views in the inflated layout. The onCreateViewHolder method is only called then a new view must be created.

Every visible entry in a recycler view is filled with the correct data model item by the adapter. Once a data item becomes visible, the adapter assigns this data to the individual widgets which he inflated earlier. This work in done in the onBindViewHolder method.

For example, an entry in a list may have an image on the left side and two text lines in the middle as depicted in the following graphic.

A layout file for a such a line might look like the following.

1.4. Gradle dependency to use recycler view

The RecyclerView widget is delivered as library and can be used as of API 7 level or higher. Add the a dependency to the latest version of this library to your Gradle build file to use it.

1.5. Default layout manager

The layout manager decides how the data in the RecyclerView is displayed. The recycler view library provides the following build-in layout managers.

LinearLayoutManager shows items in a vertical or horizontal scrolling list.

GridLayoutManager shows items in a grid.

StaggeredGridLayoutManager shows items in a staggered grid.

1.6. Relevant implementation classes to use RecyclerView

The implementation of RecyclerView requires a few classes to be implemented. The most important classes are listed in the following table

Table 1. Important classes of the RecyclerView API

Provides the data and responsible for creating the views for the individual entry

Contains references for all views that are filled by the data of the entry

Contains references for all views that are filled by the data of the entry

Required, but default implementations available

Responsible for drawing decorations around or on top of the view container of an entry

Default behavior, but can be overridden

Responsible to define the animation if entries are added, removed or reordered

Default behavior, but can be overridden

You can also provide your custom implementations for the layout managers and animations.

1.7. Handling click events in recycler view

Touch events, like clicking should be handled by the views in the recycler view. If the view should trigger something in the object in which it is used (activity or fragment), you can pass via the constructor of the adapter to it. This allows the adapter to store a reference to the object and call its methods for feedback.

1.8. Layouts in recycler view

The adapter needs to provide the view hierarchy for each entry. Typical this is done by inflating an XML layout file.

Use wrap_content or ?android:attr/listPreferredItemHeight for the height of the view container for the row.

This root of the layout is typically a ViewGroup (layout manager) and contains several other views. The following graphic shows a list with different layouts for odd and even rows.

Within the getItemViewType method the recycler view determines which type should be used for data. The framework calls automatically the onCreateViewHolder method if needed for this type. In this method you inflate the correct layout for the type and return a fitting view holder.

1.9. Custom animations

To customize the animations in the RecyclerView , implement your own animation by extending the RecyclerView.ItemAnimator class and use the RecyclerView.setItemAnimator() method to assign it to your widget.

1.10. Filtering and sorting

Filtering and sorting of the data is handled by the adapter. You need to implement the logic in your custom adapter implementation.

1.11. Data updates in the adapter

The notifyItemInserted(position) method on the adapter can be used to notify the view that a new entry has been inserted at a certain position.

The notifyItemRemoved(position); method can be used to notify the view that a entry has been deleted in a certain position.

1.12. Swipe support for RecyclerView

The ItemTouchHelper class that makes swipe-to-dismiss and drag-and-drop simple to implement. Implement the onMove method for drag and drop and the onSwiped for swip support.

2. Exercise: Using RecyclerView in a new Android application

In this exercise you create a project which uses the RecyclerView class to display a list.

2.1. Create project and add the Gradle dependency

Create a new Android project using the com.vogella.android.recyclerview top level package name.

Add the following dependency to your Gradle build file.

2.2. Create layout files

Create or update the layout file called activity_main.xml so that it contains the RecyclerView

Note: The ImageView has the android:elevation attribute set, this instructs Android to draw a shadow for it.

Also create a layout called row_layout to use in each item.

Create the following adapter class.

Now you can configure the RecyclerView in your activity.

Источник

Part 4: Android RecyclerView: Grid

• 

Diep Nguyen

RecyclerView: Grid

Using RecyclerView, we are free to use a predefined LayoutManager, or create our own manager to place and layout each item inside on screen. In this post, we want to talk about an alternative version of GridView on Android: RecyclerView: Grid. The result should look like this:

[

To make our RecyclerView display a grid, we create and setup the Recycler as normal ListView:

Main Layout

Item Layout

In our activity, we use simple holder and adapter for demonstration:

Back to our activity, in our onCreate() method, we give the RecyclerView a layout manager, and here we come: a GridLayoutManager will make our RecyclerView display a grid:

Note the second parameter in GridLayoutManager constructor. That number will be our column count. So we will have three column in our grid. Now you can run the application and see the grid in action.

Auto-Column Span

You can note that the GridLayoutManager requires us to provide absolute column. That means, the RecyclerView will always keep that column count even if our device is larger, or we rotate it to landscape. We will want a layout that automatically maintains the column count based on screen width and item width, which auto value of GridView give us. To do that, we will extend the GridLayoutManager and manually calculate suitable column count for current device:

Our setup for RecyclerView will become:

Run the app and see the result with device in portrait and landscape modes:

You can visit current project with reference to GridLayoutManager auto-column here.

Sign up for more like this.

The Journey of A System

It has been a long time since my last blog, the world has seen lots of changes, including technology innovation, pandemic and especially the way we communicate with each other and with digital product. This post is brief to the journey for one of our product which we involved a

• 

Can’t run app on device when it installed from debug apk file

It has been a long time since I last post, today I want to share for you an occurred problem recently when I start a new Android project. First, let us examine the outline what i do before find solution for problem. I create a new Android project with AndroidStudio

Transforming a weird WordPress instance into a Ghost one

Hello 2017, hope everyone will have an interesting year ahead. It has been a long time since last post of us, due to several personal stuffs. So today, I would like to come back, and with a very first news about CodenTrick: We have transformed our WordPress instance into a

Источник

RecyclerView using GridLayoutManager in Android With Example

RecyclerView is the improvised version of a ListView in Android. It was first introduced in Marshmallow. Recycler view in Android is the class that extends ViewGroup and implements Scrolling Interface. It can be used either in the form of ListView or in the form of Grid View.

How to use RecyclerView as GridView?

While implementing Recycler view in Android we generally have to set layout manager to display our Recycler View. There are two types of layout managers for Recycler View to implement.

1. Linear Layout Manager: In linear layout manager, we can align our recycler view in a horizontal or vertical scrolling manner by specifying its orientation as vertical or horizontal.
2. Grid Layout Manager: In Grid Layout manager we can align our recycler in the form of a grid. Here we have to mention the number of columns that are to be displayed in the Grid of Recycler View.

Difference Between RecyclerView and GridView

1. View Holder Implementation

In GridView it was not mandatory to use View holder implementation but in RecyclerView it is mandatory to use View Holder implementation for Recycler View. It makes the code complex but many difficulties that are faced in GridView are solved in RecyclerView.

2. Performance of Recycler View

RecyclerView is an improvised version of ListView. The performance of Recycler View has been improvised. In RecyclerView the items are ahead and behind the visible entries.

Example of GridLayoutManager in RecyclerView

A sample image is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Project just refer to this article on How to Create new Project in Android Studio and make sure that the language is Java. To implement Recycler View three sub-parts are needed which are helpful to control RecyclerView. These three subparts include:

• Card Layout: The card layout is an XML file that will represent each individual grid item inside your Recycler view.
• View Holder: View Holder Class is the java class that stores the reference to the UI Elements in the Card Layout and they can be modified dynamically during the execution of the program by the list of data.
• Data Class: Data Class is an object class that holds information to be displayed in each recycler view item that is to be displayed in Recycler View.

Step 2: Add google repository in the build.gradle file of the application project.

All Jetpack components are available in the Google Maven repository, include them in the build.gradle file

Step 3: Create a Card Layout for Recycler View Card Items

Источник

Class	Purpose	Optional