Android recyclerview horizontal and vertical

Horizontal and Vertical Scroll in RecyclerView — Android

Jun 9, 2019 · 3 min read

Enable horizontal scroll in vertical oriented recyclerview.

We loved RecyclerView. It was great invention in android application development. Overall every app in play store have RecyclerView.

Here we are going to implement vertical recyclerview than make it scroll horizontally with help of horizontal scroll view.

And, Here’s a link to nested recyclerview. If you are searching for vertical & horizontal scroll recyclerview.

Ok, lets get started…

The output of what we are going to make is shown below.

The android:configChanges will helps to remain in activity state while the screen is rotated.

The and r oid:launchMode will help to create your activity instance only one. other activity instance will be destroyed.

The tricky part is making UI that fits with the orientation of other element alignment.

FIRST, Put your RecyclerView inside horizontal HorizontalScrollView.

AND, Recycler View will contains two types of view TYPE_HEADER & TYPE_ITEM.

Make header and other item view same as possible for contents to be in a straight line otherwise, your view will look distorted.

Here’s how i did setup work.. too tired to truncate code. see what’s necessary and do implement. 🙂

This activity contents recyclerview and horizontal scroll view.

Источник

Implement Horizontal and Vertical scrolls in RecyclerView

With the RecyclerView in Android you can either implement horizontal scroll or vertical scrolls. But its a tricky to implement both horizontal and Vertical scrolls at the same time in the RecyclerView. When RecyclerView items are to be implemented in table format with columns and rows, the items may completely not fit the size of the screen. In this article we are going to discuss how to implement both Horizontal and Vertical scrolls in a RecyclerView at the same time.

Table of Contents

Design XML Layouts

First we need to design XML layout of the activity with RecyclerView along with HorizontalScrollView widget. In order to make RecyclerView scroll both Horizontal and vertical, we place the RecyclerView as child view of the HorizontalScroll widget. Further, to make the content more readable we are going to place header for the RecyclerView.

activity_main.xml

And here is the xml code for header that we have included as child view in the HorizontalScrollView.

header_layout.xml

Finally here is the layout for RecyclerView items. These items are implemented extending Adapter class, we will discuss further about them in detail.

recyclerview_item_layout.xml

So, we have completed implementing XML layouts for our discussion. As well as, next we are going discuss about implementation part of this tutorial.

Implementing Horizontal and Vertical scrolls in RecyclerView

Define StudentDetails Model class

Whereas in the implementation, we create an activity and setContentView layout as activity_main.xml. Also we create content that we need to insert into the RecyclerView using Adapter. Subsequently, we define a model class called StudentDetails with the fields that we need to display in the RecyclerView.

Later on create a list for the RecyclerView items.

Define Adapter class

Implement the adapter class for the recyclerview. Take view of the code for RecyclerviewAdapter class.

After all we need to define adapter class in the activity class. Here is the code snippet for it.

Источник

Android Horizontal RecyclerView CardView And Images Example

Android Horizontal RecyclerView CardView And Images Example Tutorial is written here.

Generally, we create vertical recyclerview to show the data in tabular manner.

In this tutorial, we will implement a recyclerview with the horizontal variant instead of vertical.

By default, recyclerview is vertical but android provides a built in method to make recyclerview horizontal.

While we do not have any such method in ListView. So it is easier to make horizontal recyclerview than horizontal listview.

Of course we get same functionality if we make horizontal listview but it is little complex task.

Web Host Recommendation

If you are planning to buy best web hosting at an affordable prize then we recommend bluehost.

(Disclaimer : If you sign up using the above link we may receive small commission without any addition cost to you)

Look of horizontal Recyclerview

If you want to create a horizontal listview then

Follow all the below steps to make horizontal recyclerview.

Step 1. Making Dependencies

To implement recyclerview and cardview, we need to add dependencies separately.

Write the following lines in build.gradle(Module: app)

These lines will fetch required classes to use recyclerview and cardview in your android app.

Step 2. Special Layout File

In recyclerview, we need to create additional layout xml file.

This file will create a view for every single row item. Adapter class will inflate this file while generating the recyclerview row items.

Make a new file res->layout structure. Give it a name as recycler_item.xml

Copy the following source code in recycler_item.xml

As we want to make a cardview, here I have set it in the above file.

Cardview is the parent of all the other views.

Then inside cardview, I have taken one Linearlayout with vertical orientation.

Inside this linearlayout, one imageview and one textview is present. Imageview will be above the textview.

Downloading Images

We will set fruit images in our horizontal recyclerview.

You can download the required fruit images by clicking the below link.

After downloading the images, copy them into the res->drawable directory.

Step 3. Fruit Model

Now let us create a model class. This class is useful to maintain proper data structure.

Create a new class named “FruitModel.java” and add the following code in it.

This class includes the getter ans setter methods for all the UI widgets which are present in the every row of the recyclerview.

In this example, we have one imageview and textview each, so this model have methods for image and text as you can show in the above code.

Step 4. Fruit Adapter

Adapter class will use the data and will create a recyclerview.

Prepare a new class named “FruitAdapter.java”

Write down the below coding lines in “FruitAdapter.java”

Looking Heavily At Adapter

Let us understand the below code

Above is the constructor of FruitAdapter class. It has two parameters.

First parameter will get context and second will get arraylist (imageModelArraList) of the objects of the FruitModel class.

This arraylist imageModelArraList will provide appropriate data to the adapter class.

onBindViewHolder() method

Below is the code for onBindViewHolder() method.

This method will set text in textview and image in the imageview.

It will use that arraylist (imageModelArraList ) to fetch the data.

Compiler will call this method for number of time which is equal to the number of rows in the recyclerview.

Step 5. Last Modifications

Last but not least, make changes in the activity_main.xml and MainActivity.java file.

Copy the following code snippet in activity_main.xml

In the main layout file, I have write only recyclerview code.

Code snippet for MainActivity.java will be as below

How does MainActivity.java works ?

Consider the following source code

Line one is creating an object of the RecyclerView class.

Second line is making an arraylist with the objects of the FruitModel class.

Third will create an object of FruitAdapter class.

Fourth line will create one integer array named myImageList. This myImageList contains as integer reference of the fruit images present in the drawable folder.

Fifth line makes a string array myImageNameList.

myImageNameList holds the names of the fruits.

Attend the following code

Above line is populating an arraylist using the eatFruits method.

Below is the code for eatFruits() methods.

This method will rotate a for loop with seven iterations.

During every iterations, compiler will create an object of the FruitModel class.

Then it will set the image integer reference and image name to that object.

After that compiler will add this object in to the arraylist and this process continues for seven times.

Read the following coding lines

Compiler will create an object of FruitAdapter class with required parameters during first line.

By reading the second line, system will set the adapter with the recyclerview.

Now third line is the most important for us.

It will set the layout to the recyclerview. We are telling compiler to make our recyclerview horizontal in this line.

So, now if you run your project, you should get the output like the video you watched at the starting of the tutorial.

Web Host Recommendation

If you are planning to buy best web hosting at an affordable prize then we recommend bluehost.

(Disclaimer : If you sign up using the above link we may receive small commission without any addition cost to you)

Источник

Tutorialwing

In this tutorial, we will talk about different android RecyclerView LayoutManagers in android application. We will see how to create different types of user interface like Simple List, GridView or Staggered Grid using various android recyclerView layoutManagers in the application.

We have already discussed about RecyclerView Widget in detail. Here, we have already covered how to use RecyclerView, how to create adapter for RecyclerView, how to customise UI for single item in RecyclerView, how to set ItemClickListener in RecyclerView etc. Moreover, we will use code of previous post into this post 😉

Let’s see a brief introduction about RecyclerView –

Android RecyclerView is more advanced, flexible and efficient version of ListView. UIs like lists and grids can be created very easily using RecyclerView. This widget is a container for displaying large data sets that can be scrolled very efficiently by maintaining a limited number of views. Use RecyclerView when you have large data collections whose elements change at run time based on user actions like click button, or some network operations like get requests, post requests, delete requests etc.

Video Output

Source Code

1. Getting Started

Show list of animals in Linear(Vertical and Horizontal), GridView(Vertical and Horizontal) and Staggered GridView(Vertical and Horizontal). Basically, we will cover all basic android recyclerView layoutManagers used in any application.

1.1. What is LayoutManagers?

As the name suggests, it’s main work is to manage the layout for the large data-set provided by adapter. It positions each item views into it’s appropriate position in the RecycleView. Also, It re-uses the views that are no longer visible to the user. During this, It may ask the adapter to replace the contents of that view with a different element from data-set. Recycling(or Re-using) views in this manners improves performance a lot since there is no need to create extra views and perform costly operations like findViewById() etc. in it now. Due to this feature, This widget is named as RecyclerView (Means a widget that re-uses the views).

1.2 Types Of Android RecyclerView LayoutManagers.

Although you can create your own custom LayoutManagers, There are three types of built-in recyclerView LayoutManagers. They are LinearLayoutManager, GridLayoutManager and StaggeredGridLayoutManager.

Now, we will go through each type one by one –

Android RecyclerView LinearLayoutManager

Use this LayoutManager when you want to show item in a vertical or horizontal scrolling list.
To show vertical scrolling list

To show horizontal scrolling list

Android RecyclerView GridLayoutManager

Use this LayoutManger when you want to show item in Grid i.e. Gallery etc. You can show Grid view which scrolls either vertically or horizontally.
To show Vertically scrolling Grid View

To show Horizontally scrolling Grid View

Android RecyclerView StaggeredGridLayoutManager

Use this LayoutManager when you want to show items in Staggered Grid.
To Show Vertically Scrolling StaggeredGrid View

To Show Horizontally Scrolling StaggeredGrid View

2. Using Different Android RecyclerView LayoutManagers

To show different types of LayoutManagers, We will use Menu options (Shown at top-right corner of the screen).
At First, we sill see how to create these menus. Then, we will show different views, created using different layoutManagers, on click of these menu options.

Note: We will use code of previous post into this post. So, get the source code of previous post first.

2.1 Create Option Menus

Follow below steps to create menus.
a. Create menu folder in res/layout.
b. Then, create menu_main.xml in res/layout/menu folder.
After creating menu_main.xml file, copy/paste below code into it.

c. Copy paste below code into MainActivity.java

It will create menu in app. You will see menus if you run the app at this point.

2.2 Create Layout for Horizontal Views

To show horizontal scrollable view, create an xml file list_item_horizontal.xml in res/layout. Then, Add following code into it.

2.3 Show views using different android recyclerView LayoutManagers

Write code to show different views on menu item click. Add below code into onOptionsItemSelected method in MainActivity.java file.

Final MainActivity.java class code

Below is final MainActivity.java class code

Output

If you run the app, you will get vertical scrollable list. You can change the view type as well. You just need to select the options from menu (right-top corner of the screen). For more details, check the output shown as above.

Final Folder Structure

Tutorialwing – RecyclerView Folder structure

Tutorialwing – RecyclerView Folder structure

Note: We have used code of Android RecyclerView tutorial into this post to show example. Please go through previous post as well to understand this post clearly.

Conclusion

RecyclerView is very useful widget when you want to display large data-set. It can be used to display views like Simple List, Grid or Staggered Grid. It can be used to create horizontal as well as vertical scrollable list using different layoutManagers. Here, we have shown example for each LayoutManagers on menu item click.

Источник