DEV Community: Tomo

How to make a horizontal layout list with Recyclerview

Tomo — Sat, 15 May 2021 03:21:47 +0000

You often encounter situations where you need to handle lists of items in mobile app development. One of the approaches you could go with is utilising ListView and ArrayAdapter(if your data is stored in an ArrayList) as I explained in my previous article. This is not a bad approach but it turns out it only caters for a vertical layout.
As I was looking for a way to display my list items horizontally and scrollable, utilizing Recyclerview appears to be one of the best approaches.

What is RecyclerView?

If you are familiar with ListView, RecyclerView is an improved version of it. It allows us to implement the layout more flexibly as well as to handle a larger amount of data even more efficiently. To understand RecyclerView better, let's look at some of the features and requirements when you use RecyclerView.

In order to utilise RecyclerView, you need to work with RecyclerView.Adapter, ViewHolder and LayoutManager. RecyclerView.Adapter is an adapter that populates the child items of the RecyclerView just like ArrayAdapter. However, it requires ViewHolder which acts as a kind of template of the child item (ViewHolder pattern). ViewHolder is handy for the adapter as it contains the details of views within a row. Furthermore, by defining this ViewHolder pattern first, it eliminates the repetitive use of the findViewById() method. This saves us a lot from slowing down the app performance while scrolling the items. When we utilise ArrayAdapter, the process of recycling view was good but we still need to call the findViewById() method multiple times to look up the elements to update the view data. Compare to this, using the ViewHolder approach is definitely more efficient.

Now let's talk about another key player for this topic, LayoutManager. As mentioned above, one of the benefits of using RecyclerView is horizontal list layout and this is thanks to LayoutManager. LayoutManager is basically in charge of positioning child items as well as for deciding when to reuse old views. RecyclerView offers flexible layouts and there are 3 different LayoutManagers, which are:

LinearLayoutManager : displaying items vertically or horizontally
GridLayoutManager : displaying items in a grid vertically or horizontally
StaggeredGridLayoutManager : displaying items in a staggered grid (different width/height are allowed)

By utilising these mentioned key players together, RecyclerView can successfully create child items in an efficient way. Now let's look at a detailed example of how to use RecyclerView.

How to use RecyclerView

In this article, we assume that we want to showcase a list of subjects in a horizontal layout. Each item includes the name of the subject, image and the number of likes. First, let's start with considering the high-level view of what we need to do:

Define a model class called Subject to store all of your field types (subject name, image and number of likes)
Populate your subject's data and store it in an ArrayList
Define the layout of each list item (2 TextViews and 1 ImageView)
Create a custom RecyclerView and ViewHolder to showcase list items
Set up the custom RecyclerView with a LayoutManager and adapter

Let's tackle one by one. We first need to define a class called Subject to store required fields and set up getter methods.



// Subject.java

public class Subject {
    private String subject;
    private int imageId;
    private int numOfLikes;

    // Constructor
    public Subject(String subject, int imageId, int numOfLikes){
        this.subject = subject;
        this.imageId = imageId;
        this.numOfLikes = numOfLikes;
    }

    //Setting up the getter methods
    public String getSubject() {
        return subject;
    }

    public int getImageId() {
        return imageId;
    }

    public int getNumOfLikes() {
        return numOfLikes;
    }
}

Once we have the data model class, let's populate our ArrayList to contain subjects details.



// MainActivity.java

ArrayList<Subject> subjectArrayList = new ArrayList<>();
subjectArrayList.add(new Subject("English", R.drawable.english, 27));
subjectArrayList.add(new Subject("Math", R.drawable.math, 13));
subjectArrayList.add(new Subject("P.E", R.drawable.pe, 45));
subjectArrayList.add(new Subject("Science", R.drawable.science, 41));
subjectArrayList.add(new Subject("Art", R.drawable.art, 36));
....etc

Next, we will quickly set up the layout of the individual item. As mentioned, we will have 2 TextViews and 1 ImageView for the example in this article. Just a side note that if you want your layout to be VERTICAL, be careful with the height of the row (root view of the list) as it needs to be wrap_content to show your items correctly.



// list_item.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content" 
    android:layout_margin="16dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/subject_image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/subject_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal" />

    <TextView
        android:id="@+id/likes_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal" />

</LinearLayout>

Now we will move on to our custom SubjectAdapter that extends the RecyclerView.Adapter. Please note here that we need to define a custom ViewHolder to specify and give access to all of the Views. This is because we will use this custom ViewHolder later to bind the data. It also prevents us from calling findById() methods multiple times when the adapter assigns data to respective views.



// SubjectAdapter.java

public class SubjectAdapter extends RecyclerView.Adapter<SubjectAdapter.ViewHolder> {
    // This is a template - give a direct reference to each view
    public class ViewHolder extends RecyclerView.ViewHolder{
        public ImageView subjectImageView;
        public TextView subjectTextView;
        public TextView numOfLikesTextView;

        // Constructor - accepts entire row item
        public ViewHolder(@NonNull View itemView) {
            super(itemView);

            // Find each view by id you set up in the list_item.xml
            subjectImageView = itemView.findViewById(R.id.subject_image_view);
            subjectTextView = itemView.findViewById(R.id.subject_text_view);
            numOfLikesTextView = itemView.findViewById(R.id.likes_text_view);
        }
    }
}

After setting up ViewHolder, let's start working on the adapter now. There are 4 major things to do here: setting up a constructor and overriding 3 different methods, which are onCreateViewHolder(), onBindViewHolder() and getItemCount().



// SubjectAdapter.java

public class SubjectAdapter extends RecyclerView.Adapter<SubjectAdapter.ViewHolder> {

    // ... ViewHolder class and its constructor as per above


    ArrayList<Subject> list;

    // Constructor
    public SubjectAdapter(ArrayList<Subject> list){
        this.list = list;
    }

    // Creating a viewHolder
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // Inflate the layout
        View contactView = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.list_item, parent, false);

        // Return a new holder instance
        ViewHolder viewHolder = new ViewHolder(contactView);

        return viewHolder;
    }

    // Assigning respective data for the views based on the position of the current item
    @Override
    public void onBindViewHolder(@NonNull SubjectAdapter.ViewHolder holder, int position) {
        // Get the Subject based on the current position
        Subject currentItem = list.get(position);

        // Setting views with the corresponding data
        ImageView imageView = holder.subjectImageView;
        imageView.setImageResource(currentItem.getImageId());

        TextView subjectTextView = holder.subjectTextView;
        subjectTextView.setText(currentItem.getSubject());

        TextView likesTextView = holder.numOfLikesTextView;
        likesTextView.setText(currentItem.getSubject());
    }

    // Indicating how long your data is
    @Override
    public int getItemCount() {
        return list.size();
    }
}

Here we start off by setting up a constructor for the adapter. Simply passing the list of data so that our adapter can utilise it to populate items. Next, let's look at the onCreateViewHolder() method. This method is called by theLayoutManager and it handles layout inflation when needed. Returning the ViewHolder with all of the necessary details is its role as well. Moving onto the next, the onBindViewHolder() method plays a critical role to bind data to corresponding views. By utilising the predefined view details from the ViewHolder, it manages to replace the content efficiently. Finally getItemCount() method is a way to inform the adapter about the size of your data, which is the total number of items to showcase.

After going through the above process, all you need to do is to set up Recyclerview with your custom adapter and LayoutManager.



// MainActivity.java

// Find RecyclerView by Id (from the activity_main.xml)
RecyclerView recyclerView = findViewById(R.id.recycler_view);
// Instantiate SubjectAdapter with the data
SubjectAdapter adapter = new SubjectAdapter(subjectsList);
// Set adapter with RecyclerView
recyclerView.setAdapter(adapter);
// Set LayoutManager
recyclerView.setLayoutManager(new LinearLayoutManager(this, RecyclerView.HORIZONTAL, false));

One thing to note here is that we chose to implement LinearLayoutManage with a horizontal layout this time. Luckily it sets to be scrollable automatically if there are many items. But if you wish to implement other styles, you could do so here by instantiating different LayoutManager with your chosen dimension.

Summary

We have gone through how to utilise RecyclerView with custom RecyclerView.Adapter and LayoutManager. This is one of the best approaches to efficiently display a list of items. I found it quite useful and it has actually more to offer such as item animation. (I will write about this when I know it better!)

Please feel free to leave a comment and your inputs are more than welcome and appreciated! Thanks for reading 😄

Utilising ListView and ArrayAdapter in Java

Tomo — Sat, 17 Apr 2021 01:52:49 +0000

As an Android developer, it's quite critical to figure out how you can develop your app as efficient as possible. When it comes to showcasing a series of items on the screen, it would be too expensive to inflate them in a regular way as it would significantly impact the data usage. As such, using AdapterView such as ListView, GridView or Spinner, and Adapter such as ArrayAdapter will help us to reduce the usage of the resource.

Why AdapterView and Adapter?

When you have a series of items to display on the screen, there are multiple ways to achieve it. One way is to use LinearLayout and populate the child Views by using a loop. However, this approach is not preferable as it consumes quite a lot of memory. Imagine if your list has heaps of items to showcase like a timeline for social media or a feed of articles or news. It's quite simple that your App would take so much resource to build all these lists of items. But what if there is a better way so that your app does not use a huge amount of resources when populating these Views? That's when using the combination of AdapterView and Adapter comes in handy as you can recycle the Views.

What is View Recycling?

View recycling is a very powerful and important concept to understand. What it does is that the View gets recycled as the name suggests. Probably you could guess it, however, what exactly is happening behind the scenes? To understand that let's take a look at it closely.

In this article, we assume that we want our list of items to appear in a simple list layout by utilising ListView as one of the AdapterView and the list of data is stored in ArrayList hence we choose to work with ArrayAdapter as our Adapter.

Let's start with a high-level view. When ListView is connected with ArrayAdapter, the ArrayAdapter start populating the children/list items of the ListView until it has enough items to fill up the entire height of the screen. Here, please note that there is no extra View created. So if 5 items can take up the screen, only 5 rows are created at this point. Then as the user scrolls the screen to go through the list, the item goes off the screen gets kept in memory so that it could be reused later. I would think of this as being sent to a place like a scrap pile. In terms of the new item that comes into the screen, it is created by reusing the old row from the scrap pile (the data will be updated to suit the new item).

By repeating this process, you can successfully save the usage of the resource because the number of rows that needs to be instantiated is small (probably up to less than 10) even if your list happens to be super long.

How to use ListView with a basic ArrayAdapter

Let's start looking at how we can set up the recycling views with an example situation. Say you want to display the names of students on a screen of your app with minimal styling. This means you need a single TextView as your list item. In that case, all you need to do is to initialise the ArrayAdapter and connect it to your ListView.

// Instantiate an ArrayAdapter
ArrayAdapter studentNameAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, students);
// Getting an ID of ListView
ListView listView = (ListView) findViewById(R.id.list);
// Connect ListView and Adapter
listView.setAdapter(studentNameAdapter);

First, we instantiate the ArrayAdapter by passing 3 arguments: context, layout and the array of data. We passed this for the Context as it represents the current activity. We chose simple_list_item_1 for the layout, which just contains a single TextView. And here we assume that there is an ArrayList called students containing a series of student names, which was passed as our 3rd argument.

With all these details provided, ArrayAdapter knows what to do. So all that is left to do is to set an Adapter with your ListView. I'd say the ArrayAdapter is quite handy to work with!

Please note that by default ArrayAdapter only returns a single View. This is a key point when you would like to display more than just the names of students.

Showcasing more details in your list

Up until now, our list contains only one details, the student name. But what if you want to display more details like student level and profile image in the list. However, ArrayList is expected to return a single View... It seems like we need to make some adjustments to cater for our new data.

Here is the list of things to do:

Create a new object to store all of the data types (2 TextViews and 1 ImageView)
Adjust ArrayList to hold the newly created object (contains names, levels and profile images)
Create a custom ArrayAdapter to update the default behaviour of the getView() method so that it can return the View containing multiple data

Let's go through it one by one. The first step is to create a new object so that we can store the data we want. Remember, the fields we want to set up are for name, level and profile image. To create a new class with the fields required is as follows:

// Student.java
public class Student {
    private String mName;
    private String mLevel;
    private int mImageResourceId;

    public Student(String name, String level, int imageResourceId) {
        mName = name;
        mLevel = level;
        mImageResourceId = imageResourceId;
    }

    public String getName() { 
        return mName;
    }

    public String getLevel() {
        return mLevel;
    }

    public int getImageResourceId() {
        return mImageResourceId;
    }
}

We have created a new public class called Student. Make sure to set your variable private so that it won't be updated by someone accidentally. Also, set getter methods to be public so that we can access the details later.
After setting up this object, make sure to update your list of data to cater for these 3 details. Your ArrayList now should look like this:

// Create an ArrayList with Student obj
ArrayList<Student> studentList = new ArrayList<Student>();
// Assign each details
studentList.add(new Student("Jane", "Beginner", R.drawable.jane));
studentList.add(new Student("Bob", "Intermediate", R.drawable.bob));
studentList.add(new Student("Lisa", "Advanced", R.drawable.lisa));
...etc

Next, we need to create a custom Adapter by extending ArrayAdapter. You can name it whatever it's suitable but in this example, we call it StudentAdapter.

// Creating a custom adapter by extending ArrayAdapter with Student data 
public class StudentAdapter extends ArrayAdapter<Student> {
    // Set a custom constructer
    public StudentAdapter(Activity context, ArrayList<Word> studentList) {
    // The second parameter is 0 as we won't use constructer to inflate the views.
        super(context, 0, studentList);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // Check if the existing view is being reused, otherwise inflate the view manually
        View listItemView = convertView;
        if(listItemView == null) {
            listItemView = LayoutInflater.from(getContext()).inflate(
                    R.layout.list_item, parent, false);
        }

        // Get the Student object located at the given position
        Student currentStudent = getItem(position);

        // Set up one of the TextViews with the name text obtained from the Student object
        TextView studentName = (TextView) listItemView.findViewById(R.id.name);
        studentName.setText(currentStudent.getName());

        // Set up the other TextView with the level text obtained from the Student object
        TextView studentLevel = (TextView) listItemView.findViewById(R.id.level);
        studentLevel.setText(currentStudent.getLevel());


        // Set up the ImageView with the resource ID obtained from the Student object
        ImageView imageView = (ImageView) listItemView.findViewById(R.id.image);
        imageView.setImageResource(currentStudent.getImageResourceId());


        // Return the list item layout (containing 2 TextViews and an ImageView)
        return listItemView;
    }
}

Here we have created a custom adapter called StudentAdapter by extending an ArrayAdapter<Student>. We have also specified what data we use for the adapter by adding <Student>. Inside of that, we have set super constructor (inherited from ArrayAdapter) - one thing to note here is we did not specify the layout. This is because we want getView() method to take care of that.

Moving on to the overring getView() method, we first check if the convertView has something in it, meaning that whether or not there are any old rows in the scrap pile. If not, we need to inflate the views manually. In most cases, this is needed when the activity has just stated (e.g. A user just opened the screen).

If it contains rows, then we can specify what needs to be done before returning a single View. In our case, we have set the name and level texts (obtained from the Student object) on the TextView's respectively and 1 image resource ID on the ImageView. We identified which student data to handle is by using getItem() method with position info that is originally coming from ListView.

After finishing all of the above, we just need to set a listView with an instantiated StudentAdapter as our final step.

// Instantiate the custom ArrayAdapter called StudentAdapter
StudentAdapter adapter = new StudentAdapter(this, studentList);

// Getting an ID for the ListView
ListView listView = (ListView) findViewById(R.id.list);

// Set an adapter
listView.setAdapter(adapter)

Summary

We have gone through from basic to custom usage of ListView and ArrayAdapter. This is one of the ways that I have recently learnt to display a list of items. I'm pretty sure I will encounter alternatives in the near future. When I do, I will write other articles to evaluate them!

If you know the alternatives or any suggestions to improve my approach, please feel free to leave a comment. I just started learning Java 2 weeks ago and am willing to absorb as much as I can throughout my journey! Thanks for reading 😄