Android recyclerview item decorator

Android recyclerview item decorator

RecyclerView ItemDecoration

May 09, 2017 by Srinivas

To make item’s separation visible or enhance the look and feel of items when items in RecyclerView are displayed on the screen, items in the list needs to be decorated.

RecyclerView allows you to plug-in decoration for items in RecyclerView. Itemdecoration is a separate component which needs to be defined and added to recycler view.

You can create itemdecoration object by extending RecyclerView ItemDecoration class. RecyclerView uses provided itemdecoration while items are laid out.

There are three methods in RecyclerView.ItemDecoration class, method getItemOffsets provides offset data, onDraw method draws decoration before items are drawn and onDrawOver method draws decoration after items are drawn.

ItemDecoration can be added to recycler view by calling addItemDecoration. Multiple itemdecorations can be added to recycler view; they are executed in the order added to recycler view.

In this post, I’ll show how to create RecyclerView ItemDecoration object for various recycler view layouts and orientations. If you want to know how to use recycler view, you can refer to recycler view example and recycler view and grid layout manager posts.

RecyclerView ItemDecoration Divider

Divider ItemDecoration draws divider separating two items in RecyclerView. It works for both horizontal and vertical orientations with LinearLayoutManager. Divider ItemDecoration draws a line between items using Paint.

You need to pass context, divider color and line width as parameter to the constructor of the item decoration. Divider ItemDecoration detects layout orientation automatically and draws horizontal or vertical divider depending upon layout orientation.

ItemDecoration Divider overrides method getItemOffsets to add space for divider, for horizontal orientation add inset to right and for vertical orientation add inset to bottom of item.

ItemDecoration Divider overrides method onDraw to draw divider to convas.

RecyclerView ItemDecoration Divider Code

RecyclerView ItemDecoration Divider Output

RecyclerView ItemDecoration Item Border

Below item decoration draws border for each item in recycler view. Border item decoration also overrides getItemOffsets and onDraw, and uses paint to draw border around item. Below is the code.

RecyclerView ItemDecoration Item Border Output

RecyclerView ItemDecoration for GridLayoutManager

You need to adjust item decorations provided in this post to suit your item layout.

About

Android app development tutorials and web app development tutorials with programming examples and code samples.

Источник

Part 4- Item Decorations in RecyclerView

Jan 31, 2019 · 7 min read

Hi, if you’re joining from this tutorial, you should check out my first one: Understanding RecyclerView. A high-level Insight. Part -1. Today I am attempting to explain the Item Decorations in RecyclerView in very simple way so that all the developers new to Android World can fully understand how the RecyclerView Works.

Before we begin, I would love for you to try my latest gaming application that implements all of the features that I am going to talking in this series. Any feedback is appreciated. Open this link in your mobile, if possible.
Try it: Gamezop

This has been a long journey and I have received much positive feedback on the previous articles. The fact that the articles procures information for the new and coming developers, is the reason why they have succeeded. So following the same pattern, today I am bringing this tutorial that highlights Item Decoration in Recyclerviews.

I have always felt that while learning somethi n g new, if I get to build a beautiful interfaces, why not? And as a beginner, I have always wondered how everything was built. Such beautiful things! And after much hard work, I have brought you this article that will not only help you learn about the Item Decoration but also build a beautiful app which is very similar to Starbucks Coffee Application. Okay, practically it’s a clone.

And this what we’re building today:

Questions we’re going to ask and see the answers to:

1. What is Item Decoration?
2. Why do we use them?
3. What if we use a view or a drawable on our own instead of Item Decoration?
4. Can we build something good?

Let’s try and answer those questions one by one. What we’re going to do is, we’re going to tackle each question and then code a little bit and then tackle another question and then code a little bit more to just keeps things a little more interesting. Not that I am saying that Item Decorations are boring. Okay, they’re easy. So guess what!

What are Item Decorations?

Item Decorations allow us to draw on all 4 sides of the item in an Adapter based data-set. What I mean is, when you need to add dividers or spaces or any special effects to the children of Recyclerview, you delegate your work to Item Decorations. They will beautifully handle all the work for you. Obviously you need to code a few lines. DUH.

Coding Task 1:

As I said, here’s some coding task. Head over to this GitHub link and download or fork the repo. If you don’t know how to, head over to this link first for cloning and this link for forking. (Do not forget to star the repository)

You can also start with a new repository with a clean slate.

After you’re done with this, checkout the state2 branch in the terminal in Android Studio. Though the project starts with the branch state1 but that merely creates a set up for a recyclerview. This is how you do this if you don’t know, just type in this in your terminal:
`git checkout state2` and hit enter.

I am not going to start from scratch because I have covered that out in my previous tutorials.

L et’s start with coding. Create a class named DividerItemDecoration that extends RecyclerView.ItemDecoration. We need to implement the two methods namely, getItemOffsets and onDraw.

Let’s start with onDraw.
This method runs once per drawing on the screen. I will tell you what this means later while we debug the application. But keep in mind for now.
So, item Decoration is not merely drawing dividers, we can draw anything. It helps us drawing on all 4 sides of the item view. So dividers which we thought would go just below each item, we can draw them on all four sides if you like it. But that would be one damn ugly app.

After so much waiting and setting up the project, let’s start.
For starters, were trying to draw dividers under each item. For that, declare 2 variables named anything you’d like but I would name them dividerLeft and dividerRight.
DividerLeft is the point where I want my divider to start from and DividerRight is the point where I want my divider to stop.

32 is an arbitrary integer I chose for margin. See the below image for a better uderstanding. You could even set the integer to the margin from the parent’s layout (if any).

Now that the left and right ends are done for the divider, let’s start with the top and bottom of it.
We know that recyclerview can have different type of views at different positions. We need to know them before-hand and draw dividers for them accordingly (only for the ones which are currently displayed on the screen right now).

If you don’t get the code now, just read the explanation below.

We’ll loop over every child that can be displayed over the screen and set a divider for them.
We need to know the params of the recyclerview like the margins, if any. For that we’ll get the Layout Params. Then at the bottom of the view, we want to draw a divider, so we’ll calculate the location at which we want to draw. We want to draw at the bottom of each item (so that’s why, child.getBottom()). We also want to draw after the margin we’ve set for each view while defining in the list_item.xml (and that’s why, params.bottomMargin).
Then tell the drawable that we’ve declared where you want this drawable to be and set the bounds of the drawable like in the code above. (I haven’t told you about drawable, so just assume that it’s what we want to be as our divider). And then finally call
mDivider.draw(c) (where c is canvas).

The if statement is so that the drawable in not drawn for the last child.

The onDraw method is called only for the children that are visible and for the views it keeps for recycling.

Why do we use them?

Oh, I guess I answered your question in the code task above. It’s easy and helps us with custom decorations and fast.

Источник

Кастомный ItemDecoration для RecyclerView

Предисловие переводчика:

Оригинальная статья содержит GIF-анимации с демонстрацией работы кода (т. е. результат). К сожалению, мне не удалось вставить их в статью, т. к. я использовал новый редактор от Хабра, а он очень криво работает с изображениями 🙂 Для просмотра анимаций, вы можете перейти к оригинальной статье

Как-то раз мне нужно было создать собственный ItemDecoration, и я обнаружил, что в Интернете. почти нет ответов на этот вопрос. Надеюсь, что эта статья будет кому-нибудь полезна.

Простой ItemDecoration

Кастомный ItemDecoration

ItemDecoration основанный на позиции

ItemDecoration без отрисовки после последнего списка

ItemDecoration основанный на типе View

1. Простой ItemDecoration : DividerItemDecoration

Основной вариант использования может быть реализован с помощью DividerItemDecoration предоставляемый Android-ом.

Создает разделитель RecyclerView.ItemDecoration который можно использовать с LinearLayoutManager.

@param context […] будет использоваться для доступа к ресурсам.

@param orientation […] должен быть #HORIZONTAL или #VERTICAL.

Что вам нужно, так это установить правильную ориентацию, а затем предоставить drawable-ресурс, используемый для разделения каждого элемента.

Преимущества

Предоставляется самим Android

Прост в использовании

Недостатки

Как было упомянуто: ограниченные варианты использования — в качестве разделителя пустым пространством или линией.

Ограничение при использовании и «бесконечной» прокруткой (или пагинацией): декоратор будет отрисован для каждого элемента, в том числе и последнего. В большинстве случаев мы этого не хотим.

2. Custom ItemDecoration

Для лучшего контроля и более сложных вещей мы расширим RecyclerView.ItemDecoration.

Нам доступны 3 метода:

getItemOffsets используется для определения расстояния между элементами.

onDraw используется для отрисовки в пространстве между элементами.

onDrawOver то же, что и onDraw, только вызывается после того, как сам элемент отрисован.

? Cм. официальную документацию: getItemOffsets , onDraw , onDrawOver .

? Обратите внимание, что в примерах используется горизонтальная ориентация, но то же самое можно сделать и с вертикальной.

2.1. Меняем ItemDecoration в зависимости позиции элемента

Для начала простой пример: давайте украсим элементы с нечетной позицией в адаптере.

Кастомный ItemDecoration на основе позиции View

Главный метод здесь здесь parent.getChildAdapterPosition (view)

Он возвращает позицию переданной View в адаптере. См. полную документацию.

⚠️ Не путать с дочерними позициями родителей ( parent.children — это элементы, отображаемые на экране).

⚠️ Не забудьте обработать случай с RecyclerView.NO_POSITION , т. к. getChildAdapterPosition может вернуть -1.

2.2. Удаляем ItemDecoration в конце списка

Это наиболее распространенный вариант использования на StackOverflow, о котором вы спрашиваете. Это кастомный ItemDecoration , основанный на позиции элемента в адаптере.

Пользовательское оформление DividerItemDecoration, за исключением последнего элемента

Исключим последний элемент, добавив if (childAdapterPosition == adapter.itemCount-1) .

⚠️ Нужно помнить, что parent.adapter может быть null.

? Обратите внимание, что в большинстве случаев вам, вероятно, нужен только интервал между вашими элементами (за исключением последнего). Нет необходимости переопределять метод onDraw , достаточно установить правильный размер Rect в методе getItemsOffsets.

Пользовательский DividerItemDecoration, с добавлением интервала между элементами, за исключением последнего

2.3. Оформление в зависимости от типа View

В этом примере у нас есть 2 типа элементов, показанных черным и серым. Мы оформляем элементы синими и красными Drawable в зависимости от типа View (объявленных в Adapter-е ).

Пользовательский ItemDecoration в зависимости от типа View

Главная строчка кода здесь здесь — adapter.getItemViewType(childAdapterPosition) . Нам нужно переопределить метод getItemViewType в нашем адаптере.

Он возвращает тип View элемента по позиции для повторного использования View. […] Подумайте над тем, чтобы использовать id-ресурсы для уникальной идентификации типов View.

Как только вы сможете определить тип вашего элемента, вы можете установить правильный интервал и украсить его по своему желанию ?.

Вы можете найти полный код в моём GitHub репозитории.

Источник