In last blog, we discussed how to make items in your recycler view swipeable , now we are going to discuss how to make this happen partially and display some other thing say (png file) in place of the displayed view.
A perfect example for this would be deleting the item from recycler view list with the permission of the user.
If you have followed the last blog then implementing this is pretty easy as there is nothing new this time.
First create a simple callback of the ItemTouchHelper class, override its onSwiped and onChildDraw method, and attach it to your recycler view and its done .
Now lets have a look at the code :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
ItemTouchHelper.SimpleCallback simpleCallback = new ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT) { @Override public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) { return false; } @Override public void onSwiped(final RecyclerView.ViewHolder viewHolder, int direction) { final int position = viewHolder.getAdapterPosition(); if (direction == ItemTouchHelper.LEFT) { adapter.removeItem(position); } } @Override public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) { try { Bitmap icon; if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) { View itemView = viewHolder.itemView; float height = (float) itemView.getBottom() - (float) itemView.getTop(); float width = height / 5; viewHolder.itemView.setTranslationX(dX / 5); paint.setColor(Color.parseColor("#D32F2F")); RectF background = new RectF((float) itemView.getRight() + dX / 5, (float) itemView.getTop(), (float) itemView.getRight(), (float) itemView.getBottom()); c.drawRect(background, paint); icon = BitmapFactory.decodeResource(getResources(), R.drawable.ic_delete); RectF icon_dest = new RectF((float) (itemView.getRight() + dX /7), (float) itemView.getTop()+width, (float) itemView.getRight()+dX/20, (float) itemView.getBottom()-width); c.drawBitmap(icon, null, icon_dest, paint); } else { super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive); } } catch (Exception e) { e.printStackTrace(); } } }; |
Explanation :
This time there is nothing new except that we have set the TranslationX value to dX/5 .
The dX value tells you about the direction in which your item has moved and it ranges from 0 (not moved) to 1(fully swiped) . And the sign before the dX value tells you about the direction (-ve means item has moved left and +ve means item has moved right).
This being said i have used the dx/5 value as it suited my case, you can choose any value depending on your use case.
Now the second important change that you will notice is in the line where “icon” is initialized , here we have decoded a png file into corresponding bitmap and then displayed it in a rectangle with name “icon_dest” and when you will see the “icon_dest” initialization line , you will notice the bounds that i have made, these are just to make the icon appear in center and good looking with my recycler view item.
Now you just need to attach this code to your recycler view,
For this you just need to add two lines in your piece of code :
|
1 2 |
ItemTouchHelper itemTouchHelper = new ItemTouchHelper(simpleCallback); itemTouchHelper.attachToRecyclerView(myRecyclerView); |
And all is done , build your project and see how it looks and change the calculaltions as per your need 🙂
Keep coding and Keep sharing 🙂
Be the first to comment.