Swipe to show another hidden layout in android reseller view

I have a recycler view in which I want to show another layout to view the swiping that is hidden behind the current layout. In short, I want to achieve something like the image below.

enter image description here

The problem with my code is that the whole view scrolls, but I want to use only the width of the hidden layout.

Code in action

final ItemTouchHelper.Callback simpleItemTouchCallback = new ItemTouchHelper.Callback() { @Override public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) { if (viewHolder.getAdapterPosition() < target.getAdapterPosition()) { for (int i = viewHolder.getAdapterPosition(); i < target.getAdapterPosition(); i++) { Collections.swap(myDataset, i, i + 1); } } else { for (int i = viewHolder.getAdapterPosition(); i > target.getAdapterPosition(); i--) { Collections.swap(myDataset, i, i - 1); } } mAdapter.notifyItemMoved(viewHolder.getAdapterPosition(), target.getAdapterPosition()); return true; } @Override public boolean isLongPressDragEnabled() { return true; } @Override public boolean isItemViewSwipeEnabled() { return true; } @Override public void onSwiped(final RecyclerView.ViewHolder viewHolder, final int swipeDir) { } @Override public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) { View itemView = viewHolder.itemView; ImageView delete_image=(ImageView) itemView.findViewById(R.id.delete_image); delete_image.setY(itemView.getTop()); if(isCurrentlyActive) { delete_image.setVisibility(View.VISIBLE); }else{ delete_image.setVisibility(View.GONE); } super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive); } @Override public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN; int swipeFlags = ItemTouchHelper.START | ItemTouchHelper.END; return makeMovementFlags(dragFlags, swipeFlags); } }; ItemTouchHelper itemTouchHelper = new ItemTouchHelper(simpleItemTouchCallback); itemTouchHelper.attachToRecyclerView(mRecyclerView); 

Custom layout for recylerview element

 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:fresco="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:paddingBottom="@dimen/padding_xsmall"> <LinearLayout android:id="@+id/top_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:background="@color/very_light_grey" android:orientation="horizontal" android:paddingBottom="@dimen/padding_xlarge" android:paddingEnd="@dimen/padding_small" android:paddingLeft="@dimen/padding_xlarge" android:paddingRight="@dimen/padding_small" android:paddingStart="@dimen/padding_xlarge" android:paddingTop="@dimen/padding_xlarge"> <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/friend_image" android:layout_width="50dp" android:layout_height="50dp" android:layout_gravity="center_vertical" fresco:placeholderImage="@drawable/user_placeholder" fresco:roundAsCircle="true" fresco:roundedCornerRadius="50dp" fresco:roundingBorderColor="@android:color/white" fresco:roundingBorderWidth="2dp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginEnd="@dimen/margin_small" android:layout_marginLeft="@dimen/margin_small" android:layout_marginRight="@dimen/margin_small" android:layout_marginStart="@dimen/margin_small" android:orientation="vertical"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <bi.it.com.bio.textview.CustomTextView android:id="@+id/friend_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_toLeftOf="@+id/badge_text" android:text="John" android:textSize="@dimen/text_size_medium" /> <bi.it.com.bio.textview.CustomTextView android:id="@+id/badge_text" android:layout_width="16dp" android:layout_height="16dp" android:layout_alignParentRight="true" android:background="@drawable/badgeicon" android:gravity="center" android:text="24" android:textColor="@android:color/white" android:textSize="@dimen/text_size_xxsmall" /> </RelativeLayout> <bi.it.com.bio.textview.CustomTextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="this is message from john" android:textSize="@dimen/text_size_xsmall" /> </LinearLayout> </LinearLayout> <ImageView android:id="@+id/delete_image" android:paddingLeft="@dimen/padding_large" android:paddingStart="@dimen/padding_large" android:paddingEnd="@dimen/padding_large" android:paddingRight="@dimen/padding_large" android:paddingTop="@dimen/padding_small" android:paddingBottom="@dimen/padding_small" android:layout_width="wrap_content" android:layout_height="match_parent" android:background="@color/red_color_list" android:src="@drawable/ic_delete_frd" android:layout_gravity="end|right" android:visibility="gone"/> </FrameLayout> 

I do not want to use any library. Any help is really appreciated. Thanks in advance.

+6
source share
2 answers

You can do this with ViewPager and PagerAdapter . Your PagerAdapter will have two pages: your "main" full-size view and the second view, which has your control buttons.

The key is to override getPageWidth() in your adapter and return 1.0 for your main view and some share for your second view. The fraction is calculated by dividing the desired view width by the width of the ViewPager .

When the user performs a search, the second view cannot display the entire screen, so the first view is partially shown, as in your animated image.

With the ViewHolder to the ViewPager and the ViewPager to the ViewPager link, you can even redesign adapters directly with ViewPager s.

+2
source

There is actually a hidden useful class in Android sdk called ViewDragHelper

You can implement swipe to show the button easily with a little code. However, ViewDragHelper is poorly documented, but I found that this link contains a very useful tutorial for its implementation: http://fedepaol.imtqy.com/blog/2014/09/01/dragging-with-viewdraghelper/

+1
source

All Articles