In this tutorial we’ll learn an easy way to implement 3D touch or instagram 3d touch pop. I’ll be implementing it on touch of a list item of Recycler View.
You can do similar process for other views also.
First we will discuss the easiest way to implement it. Check out this awesome library on github. This library is super easy to use. Everything is well explained in README.
You may have already checked it and still want to implement this feature on your own(just like me ;) ).
So let’s see the second method:
CUSTOM IMPLEMENTATION: 😎
Here is this demo app in working:
Contribute to 3dTouchDemo development by creating an account on GitHub.
Here is a link to a simple demo of this feature. This is only a demo specifically designed to give you a idea about how to implement it. Do the same thing with your app and you will be good to go.
Now open the repository and keep on opening the files that i will tell you to open. just STAY WITH ME !
and ignore anything related to transition,animation.(They are for Part 2)
I’ll explain this method in two parts. In first part you will have this feature running on your device but with a bonus bug..!! So don’t forget to check out the second part to correct that bug and then we will also apply some really cool transitions(everyone loves transitions).
Throughout this 2-part blog post, I’ll assume that you know about:
- Recycler View
- make a Custom recycler view adapter
- making layout files
- Handler.postDelayed (if you don’t then google it, it’s a easy concept)
It’s really important that you know about these concepts because I’ll not be explaining about them in detail.
Let’s get started
Start of by creating a peek_dialog.xml. This is the dialog that you want to pop up. It can be as simple as TextView or a group of views or maybe a cardView.
making peek_dialog.xml depends on your app design.
so make peek_dialog.xml in layout directory
We have these files in our project(open repo):
- It’s corresponding layout file activity_main.xml
- activity_main_row.xml is the layout for each row of recylcer view
- MyAdapter.java is our custom adapter
- RowData is the class which will be used to fill recycler view
- peek_dialog.xml is the custom layout for dialog
- anim directory in resource directory(For PART 2)
activity_main.xml has FrameLayout as root and in this Frame Layout you will have two child views.
- ImageView(Here we will set the blurred background)
- RecyclerView(for displaying data…OfCourse..!)
Now in MainActivity.java we have added recyclerView and instantiated some variables.
Don’t worry about listener variable yet…. It’s for the second Part.
So for now ignore recyclerView.addOnItemTouchListener(listener) and all of the code related to touch and listeners.
Here are three new methods for you:
- void blurBackground():This method will save a snapshot of your mobile screen and pass on this bitmap to the blurBitmap method. Once Blurred image is returned then we will hide the recycler view and set this image to the image view of our xml file.
- Bitmap blurBitmap(Bitmap bitmap):It will take the bitmap image as parameter and apply some operations to blur it and then return it to the blurBackground method
- void removeBlur(): It will set the visibility of recycler view to VISIBLE again.
We are almost done, now we just need to add listener to views in recycler view and call these methods.
Brace yourself, This is the major Part.
Now open MyAdapter.java file. I will assume that you know everything about binding and creating view holder. In RecyclerView.viewHolder class inside your adapter class, along with instantiating the views, also add listener on whole of the view(or some component of view,whatever you want)
main thing to understand in this piece of code is about OnTouchListener object. Here we are making a Runnable object in which we are making our dialog and inflating it with our custom peek_dialog.xml and setting other attributes. We are also setting the values inside the dialog from the list item that is long pressed on the recycler view and then we are blurring the background. In overrided onTouch method, we are showing/hiding the dialog as required.
ACTION_DOWN means that we touched the screen
ACTION_UP means that we lifted it off.
whenever out ActionEvent is ACTION_DOWN , we will call postDelayed method of handler. It’ll start if user presses the screen for 250 millisecond. If the user lifts his finger up before 250 millisecond then our ActionEvent will be ACTION_UP and all callbacks of handler will be removed.
And now run your app. You should see the dialog appearing+blur background if you hold for more than 250 millisec(but no animation) and when you lift your finger off…VOILA the dialog is gone.
Now try to do this:
when the dialog appears on the screen move your finger and then lift it off…NOTHING HAPPENS ..!(this was the bug that I was talking about)
This is not what we want….right? 😅
If you want this behavior then you can skip some of the code of second part of this series.
continue to the second part 😄