I've implemented an nested ReyclerView (horizontal into vertical) and I wan't to add an click listener for the entire row which is wrapped in a CardView element.
The issue I'm having is that the inside RecyclerView captures all the touch events and the root CardView does not respond to the onClick event.
I've also tried to make the CardView intercept the touch events, but with this approach the ripple effect (in fact any feedback) wasn't working.
Can someone recommend an solution for how to implement a click listener on a row while having nested RecyclerView?
Thank you.
--LE--
This is the current implementation:
fragment layout
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/list"
android:name=".NestedRecyclerViewsFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutManager="LinearLayoutManager"
tools:context=".NestedRecyclerViewsFragment"
tools:listitem="@layout/fragment_nested_recyclerview_item"
/>
Fragment onCreateView() implementation
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_nested_recyclerview_list, container, false);
// Set the adapter
if (view instanceof RecyclerView) {
Context context = view.getContext();
RecyclerView recyclerView = (RecyclerView) view;
recyclerView.setLayoutManager(new LinearLayoutManager(context, LinearLayoutManager.VERTICAL, false));
recyclerView.setHasFixedSize(true); // Improves performance - as we know the size doesn't change
//Initialize and set the adapter
mAdapter = new RootAdapter(context, mListener);
recyclerView.setAdapter(mAdapter);
final GestureDetector mGestureDetector =
new GestureDetector(view.getContext(), new GestureDetector.SimpleOnGestureListener() {
@Override
public boolean onSingleTapUp(MotionEvent e) {
return true;
}
});
recyclerView.addOnItemTouchListener(new RecyclerView.SimpleOnItemTouchListener() {
//TODO: intercept simple gestures like onClick and/or onLongClick
@Override
public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {
View child = rv.findChildViewUnder(e.getX(), e.getY());
if (child != null && mGestureDetector.onTouchEvent(e)) {
//TODO: handle the intercept??
child.callOnClick();
return true;
}
return super.onInterceptTouchEvent(rv, e);
}
});
recyclerView.setNestedScrollingEnabled(true);
}
return view;
}
**Root Adapter layout **
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="@dimen/row_height"
android:layout_gravity="center_horizontal"
android:layout_margin="@dimen/none"
android:padding="@dimen/none"
app:cardCornerRadius="@dimen/none"
tools:context=".NestedRecyclerViewActivity"
<!-- Simple selector for API < 21 and ripple effect for APi >= 21 -->
android:foreground="@drawable/selector_default"
android:clickable="true"
android:focusable="true"
>
<!-- Horizontal image gallery inside row item -->
<android.support.v7.widget.RecyclerView
android:id="@+id/child_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
...
</android.support.v7.widget.CardView>
Root Adapter onBindView() implementation:
...
holder.childRecyclerView.setLayoutManager(new LinearLayoutManager(holder.mView.getContext(),
LinearLayoutManager.HORIZONTAL, false));
holder.childRecyclerView.setHasFixedSize(true); // We know the image don't change size
holder.childRecyclerView.setAdapter(new ChildAdapter(items));
...
Root Adapter ViewHolder implementation:
public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
private ItemClickListener mClickListener;
/**
* The whole view - useful if you need to place some touch listener on the entire row.
*/
public final View mView;
/**
* The model associated with this view. - will be updated on bind method
*/
public Object mItem;
@Bind(R.id.child_recycler_view)
RecyclerView childRecyclerView;
...
public ViewHolder(View view) {
super(view);
ButterKnife.bind(this, view);
mView = view;
mView.setOnClickListener(this);
// Set the click listener bound to the fragment or activity
mClickListener = RootAdapter.this;
}
@Override
public void onClick(View v) {
if (null != mClickListener) {
mClickListener.onClick(v, getAdapterPosition());
}
}
}
The inner RecyclerView (the child) is a very simple and standar implementation without any listener set to it.
Although this solution works and I get the click event and the inner RecyclerView scroll works, I encountered the issue where the feedback of the click is not shown.
LE: Solution
My requirements changed a little since I posted this Issue, having to replace the inner RecyclerView with an PagerAdapter, but the solution I implemented should work with the nested RecyclerView also.
Basically I use an custom ItemClickSupport class which will pass the click events back to the parent as soon as they are intercepted:
/**
* Utility class which adds the ability to add Click Support for RecyclerViews without the need to implement click
* listeners into the adapter or in the ViewHolder's implementation.
* <p>
* Use it by simply binding an click listener to the desired RecyclerView.
* <pre><code>
* ItemClickSupport.addTo(mRecyclerView).setOnItemClickListener(new ItemClickSupport.OnItemClickListener() {
* {@literal@}Override
* public void onItemClicked(RecyclerView recyclerView, int position, View v) {
* // Handle the clicked item
* }
* });
* </code></pre>
* </p>
* Based on <a href="http://www.littlerobots.nl/blog/Handle-Android-RecyclerView-Clicks/">Handle-Android-RecyclerView
* -Clicks</a>, <br/><b>Hugo Visser</b>. Which is very similar with the implementation from <a
* href="https://github.com/lucasr/twoway-view">TwoWay-View</a>.
* <p/>
* Created by ionut on 22.03.2016.
*/
public class ItemClickSupport {
private final RecyclerView mRecyclerView;
private OnItemClickListener mOnItemClickListener;
private OnItemLongClickListener mOnItemLongClickListener;
private View.OnClickListener mOnClickListener = new View.OnClickListener() {
@Override
public void onClick(View v) {
if (mOnItemClickListener != null) {
RecyclerView.ViewHolder holder = mRecyclerView.getChildViewHolder(v);
mOnItemClickListener.onItemClicked(mRecyclerView, holder.getAdapterPosition(), v);
}
}
};
private View.OnLongClickListener mOnLongClickListener = new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
if (mOnItemLongClickListener != null) {
RecyclerView.ViewHolder holder = mRecyclerView.getChildViewHolder(v);
return mOnItemLongClickListener.onItemLongClicked(mRecyclerView, holder.getAdapterPosition(), v);
}
return false;
}
};
private RecyclerView.OnChildAttachStateChangeListener mAttachListener =
new RecyclerView.OnChildAttachStateChangeListener() {
@Override
public void onChildViewAttachedToWindow(View view) {
if (mOnItemClickListener != null) {
view.setOnClickListener(mOnClickListener);
}
if (mOnItemLongClickListener != null) {
view.setOnLongClickListener(mOnLongClickListener);
}
}
@Override
public void onChildViewDetachedFromWindow(View view) {
}
};
private ItemClickSupport(RecyclerView recyclerView) {
mRecyclerView = recyclerView;
mRecyclerView.setTag(R.id.item_click_support, this);
mRecyclerView.addOnChildAttachStateChangeListener(mAttachListener);
}
public static ItemClickSupport addTo(RecyclerView view) {
ItemClickSupport support = (ItemClickSupport) view.getTag(R.id.item_click_support);
if (support == null) {
support = new ItemClickSupport(view);
}
return support;
}
public static ItemClickSupport removeFrom(RecyclerView view) {
ItemClickSupport support = (ItemClickSupport) view.getTag(R.id.item_click_support);
if (support != null) {
support.detach(view);
}
return support;
}
public ItemClickSupport setOnItemClickListener(OnItemClickListener listener) {
mOnItemClickListener = listener;
return this;
}
public ItemClickSupport setOnItemLongClickListener(OnItemLongClickListener listener) {
mOnItemLongClickListener = listener;
return this;
}
private void detach(RecyclerView view) {
view.removeOnChildAttachStateChangeListener(mAttachListener);
view.setTag(R.id.item_click_support, null);
}
public interface OnItemClickListener {
void onItemClicked(RecyclerView recyclerView, int position, View v);
void onItemClicked(int position);
}
public interface OnItemLongClickListener {
boolean onItemLongClicked(RecyclerView recyclerView, int position, View v);
}
public static class SimpleOnItemClickListener implements OnItemClickListener {
@Override
public void onItemClicked(int position) {
}
@Override
public void onItemClicked(RecyclerView recyclerView, int position, View v) {
}
}
}
When creating the root adapter, I set the item click listener for it, like this:
ItemClickSupport.addTo(mRecyclerView).setOnItemClickListener(this);
And I also send this listener for the inner adapter through an setter method, like this:
rootAdapter.setOnItemClickListener(this);
rootAdapter is the root adapter, and this is the current fragment I'm in, which implements the ItemClickSupportListener.
In the root adapter, when binding the items and creating the inner adapter, I pass on the item click support listener to the inner adapter, like this:
innerAdapter.setOnItemClickListener(new ItemClickSupport.SimpleOnItemClickListener() {
@Override
public void onItemClicked(int position) {
// Here we pass the click to the parent provided click listener.
// We modify the position with the one of the ViewHolder so that we don't get the
// position of the horizontal RecyclerView adapter - we are interested on the
// vertical item actually.
if (null != mItemClickListener) {
mItemClickListener.onItemClicked(holder.getAdapterPosition());
}
}
});
mItemClickListener is actually the listener set by the fragment through the setter method, described above.
In the inner adapter, when creating the views, I set an click listener on the root of the layout which I inflated and pass that event back to my custom click listener:
// Detect the click events and pass them to any listeners
itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (null != mOnItemClickListener) {
mOnItemClickListener.onItemClicked(position);
}
}
});
mOnItemClickListener is actually the item click support which was passed by adapter described above.
Another important thing is to use an FrameLayout for the content of the adapter item views, like this:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:addStatesFromChildren="true"
android:foreground="@drawable/selector_default"
>
The important thing here is the foreground which will use an selector and the flag android:addStatesFromChildren. This is set for the root adapter items.
The inner adapter items should also use an FrameLayout as content view so that we can also set it's selector using foreground attribute:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:foreground="@drawable/selector_default"
>
This is needed, because when the inner adapter item will capture the click event, the selector to be activated, otherwise the parent should react to the click event and activate it's selector.