Android RecyclerView: Swipeable Items
Note: You may want to skip the background section where I describe what I wanted to do, comparing what was already out there and then what I tried before finding the final solution.
Background
Recently I had been having difficulty finding a nice solution to implementing a swipeable layout for my RecyclerView list items which when swiped, would show a secondary layout below it. In my case, I was looking to include frequently used actions buttons underneath the item.
This is different from, two other more commonly found features in Android apps:
- Swipe to remove item
- Drag to reorder list
If you want to do either of these, I fully recommend checking out the blog below.
Initially I thought that this feature could be implemented using ItemTouchHelper, which was used by Paul Burke in the blog I have just linked. I could get the swipe working fine and get it to stick so it didn’t disappear off the screen but I found it impossible to trigger clicks on a layout beneath the top layout. Furthermore, whenever I tried to click, the top layer would reset it’s position.
After that frustrating experience, I began looking on GitHub for a quick and easy solution.
1. Swipe-Controller-Demo
This was the first solution I had found however after testing it out, I struggled to be able to add native Android components such as Buttons / ImageButtons and it just didn’t seem to me that flexible.
2. SwipeRevealLayout
This solution was the best but felt there was too many features included which I didn’t need or want such as: Swiping from top or bottom of the item, restoring the opened / closed state of items, etc. It had the functionality I needed, I just didn’t want all the extras. I fully recommend checking out that library if you want any of those features!
My solution was to strip everything out from SwipeRevealLayout and just leave the bare minimum for me to successfully implement a swipeable layout for my RecyclerView items and in the next section I’ll list the steps you need to take to add this functionality to your project.
How to implement
- Add the following class to your project: SwipeRevealLayout.java
- Adjust your layout code for your RecyclerView ViewHolder and add the SwipeRevealLayout component as the container for both the top and bottom layer of your RecyclerView Item. For an example of how to set it up: list_item_main.xml
- Ensure the bottom layer is the first layout component within the SwipeRevealLayout container.
- Make sure to use ‘wrap_content’ or a predefined width for your bottom layer. I tested out using ‘match_parent’ and the top layer did a good magic trick and disappeared.
- If you are adding a clickable function on the bottom layer, ensure the top layer has android:clickable=”true” otherwise clicks for the bottom layer components will still trigger when you click on the top layer.
- Optional: You can define what edge you want to drag from. By default, it will drag from the left, in the example project I defined it to drag from the right. Specify it with ‘app:dragFromEdge=”<edge to drag from>”’ when specifying the attributes for the SwipeRevealLayout component.
That’s it! You’ve got yourself a RecyclerView where you can swipe the items partially away to reveal cool stuff underneath! What’s next? Well that’s for you to decide.
If you want to test a demo project feel free to clone my example that I’ve uploaded to GitHub: https://github.com/MarkOSullivan94/SwipeRevealLayoutExample
I hope you found this post useful and end up producing some cool stuff with what I have shared today. Thanks for reading!
