Hey Guys, I’m back with one more post. As the name of the post suggests, in this post tutorial we are going to build a custom browser activity just like facebook. If you have facebook app installed on your phone, you must have seen that Facebook opens any post or link in separate browser activity and thus, does not send user out of its app. We are going to replicate the same experience in this post tutorial.
1. I’m taking Webview as initial launcher activity layout, as we will need links to start custom browser activity, but you can implement custom browser activity at any place with a web link. So, the layout of launcher activity and webview settings of launcher activity are not important to you, you can focus on other parts of the code.
2. I have also included slide-in and slide-out animation just like Facebook and also the share menu item in the toolbar.
3. And one more thing, I’m using parent theme “Theme.AppCompat.Light.NoActionBar”, so that there is no default ActionBar in any activity, instead I will use ToolBar from Android Support Design library. You can also change theme styles.xml .
How we will proceed!
First of all, create a new project or continue with your already created project.
1. Then create the layout file and java file of launcher activity (or you can skip this if you have an activity with web links where you want to call custom browser activity).
2. Creating layout file and java file for custom browser activity and write all the logic.
3. Adding colors to colors.xml, strings to strings.xml, adding animation files for slide-in and slide-out animation, also including some icons to drawables and updating AndroidManifest.xml .
Now, let’s start with the tutorial. Here I’m expecting that you know how to create a project in Android Studio and create all the layouts and Java classes.
- First of all, we will create a layout file for launcher activity. So, create a new layout file under app -> res -> layout folder and select New -> Layout resource file and name it activity_main.xml. Copy the code given below in the layout file created above.
- Now we create a new java file for the launcher activity. Select app -> java -> Your Package Name and right click on your package and select New -> Java Class and name it MainActivity.java. Copy the code given below in above-created file.
In this step, we are going write code for the main purpose of this post i.e custom browser activity.
- Now create a new layout file under app -> res -> layout folder and select New -> Layout resource file and name it activity_browser.xml. Copy the code given below in the layout file created above.
- Now we create a new java file for custom browser activity. Select app -> java -> Your Package Name and right click on your package and select New -> Java Class and name it BrowserActivity.java. Copy the code given below in above-created file.
I think you will not feel any difficulty in understanding code as I have written comments at required places. But to be safe, I am explaining above code.
- I have fetched data from coming intent and shown the URL and title(which is constant, but you can make it dynamic with your logic).
- I have initialized WebView with different settings and in DisPlayWebPageActivityClient() I have to Override a method to open links in the current activity only.
- I have also taken care of Horizontal ProgressBar progress with different methods as you can see in above code.
- I have also included share menu item in the toolbar which shares current page link in Webview and also included onKeyDown() method which loads the previous page in WebView from Webview stack.
You must be gettings errors in above code. That’s because we have not updated many other files in our projects. Let’s do them one by one.
- Update colors.xml file with below code.
- Add below file to menu folder.
- Create four files with respective names in anim folder under res directory. (These are animation files.)
- I have not included ic_close_activity and ic_share_gray icons in this post, you can easily find them on MaterialDesignIcons .
With this, we have written all the code that is needed to replicate the scenario as shown in the video attached to this post. You can take look at that video, if not already, to better understand this post.
If you find this post relevant, please do share and like my FaceBook page and subscribe to our newsletter.