All of you must have encountered share buttons bottom bar that pops out while we scroll on some websites or in some cases an android application containing Webview. In this post, we will discuss the implementation of this bottom bar that can be added at the bottom of any activity with webview. This bottom bar contains social links on which you can share your content.
For this particular implementation involving scroll on webview, we will make use of Bottom Sheet introduced in Android Support Library some time ago. We will capture the scroll event on webview and based on down or up scroll, Bottom Sheet containing share layout will slide in or slide out from the bottom of activity. For better understanding what we are going to design, you can go through the video given above.
Now lets start writing code for above implementation.
- First of all create a new project in Android Studio or go with your already created project.
- Then, create a new layout file under app -> res -> layout folder and selecting New -> Layout resource file and name it as you wish, in my case, I named it activity_share_layout.xml. This file contains the layout of activity containing webview and bottom sheet. Copy the code given below in the layout file created above.
- You must be getting errors after copying above code. That is because I have created a custom webview class named ObservableWebview that will listen to scroll events. Next, we will create this java class, after which this error will be gone.
- You could also be getting one more error possibly because you had not added Design Support Library dependency in gradle file. Add the following line ” compile ‘com.android.support:design:23.4.0‘ ” in dependencies in grade file.
- Now we create a new java file for the custom webview class. Select app -> java -> Your Package Name and right click on your package and select New -> Java Class and name it ObservableWebview.java. Copy the code given below in above-created file.
- Now we will create the main java file for loading the activity_share_layout.xml and handling the logic for creating bottomsheet with social share buttons. Select app -> java -> Your Package Name and right click on your package and select New -> Java Class and name it ActivityShare.java. Copy the code given below in above-created file.
- Now let’s understand what we are doing in code given below.
- First of all, we load the activity_share_layout with defining some settings on Webview (which are not important in this context but are done to improve the UI). Then we call the setOnScrollChangedCallback() on webview which is defined in ObservableWebview class which listens for scroll changes and execute the logic written in onScroll() method.
- Then we call the findIntents() method. What this method does involve the real logic, it takes care that only those social share buttons appear whose app is installed on user’s mobile. This method access a list which contains the name of social apps available out of given choices (computed outside method itself, when an activity starts) and inflates the buttons in bottom sheet layout with respective properties of social apps in starting off the list.
- If less than three apps are available, then the bottom sheet layout changes accordingly dividing the space equally.
- The fourth button in bottom sheet always launches a default android share chooser.
- Add colors given below to your color.xml file.
1. I have not provided the social icons in this post. You can download them from materialdesignicons.
If you find this post relevant please share and like my facebook page and subscribe to our newsletter.