The Open Event Android app shows a list of organizer social links in the Event Details section. The API fetches the type of social link and the link to the page. For example, if a facebook icon based link is clicked, the default browser will open the facebook page of the Organizer. Our aim was to open the page in the app itself so that the user won’t have to juggle between two different apps. This blog will thus illustrate about how the implementation of a CustomTab is done.

We will move onto the SocialLinkViewHolder file. There we will remove the code for which an explicit intent used to be fired everytime a SocialLink was clicked. We initially add the dependency to the app.gradle file.

implementation “com.android.support:customtabs:27.1.1”

We can clearly observe that custom tabs is supported by the Support library of Android.

We add another field in SocialLinksViewHolder model class. This field will be a Context type field. context will be required in future steps.

class SocialLinksViewHolder(itemView: View, private var context: Context) : RecyclerView.ViewHolder(itemView) { … }

Our next step is to change the overridden function  onCreateViewHolder in the the SocialLinks RecyclerAdapter class. We will now return both the view and the parent context in the method. We return parent context, as it is required in the ViewHolder.

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): SocialLinksViewHolder {   val view = LayoutInflater.from(parent.context).inflate(R.layout.item_social_link, parent, false)   return SocialLinksViewHolder(view, parent.context) }

We now declare the function showCustomTab() in the bind function of the SocialLinkViewHolder class. Error will be resolved as we still haven’t initialised the function showCustomTab(). This function will be fired only when the link is clicked. That’s why we are firing the function in the onClickListener of itemView

fun bind(socialLink: SocialLink) {  …  …   itemView.setOnClickListener{       setUpCustomTab(context, socialLink.link)   } }

Heading onto initialising the function showCustomTab(). The below code represents the function.

private fun setUpCustomTab(context: Context, url: String) {   var finalUrl = url   if (!url.startsWith(“http://”) && !url.startsWith(“https://”)) {       finalUrl = “http://$url“   }   CustomTabsIntent.Builder()           .setToolbarColor(ContextCompat.getColor(context, R.color.colorPrimaryDark))           .setCloseButtonIcon(BitmapFactory.decodeResource(context.resources, R.drawable.ic_arrow_back_white_cct_24dp))           .setStartAnimations(context, R.anim.slide_in_right, R.anim.slide_out_left)           .setExitAnimations(context, R.anim.slide_in_left, R.anim.slide_out_right)           .build()           .launchUrl(context, Uri.parse(finalUrl)) }

Breaking the function into two parts. Firstly, we are verifying the validity of the Url. We are appending http:// to the Url if the Url is not present like that. We skip it, if it is indeed a valid Url

var finalUrl = url   if (!url.startsWith(“http://”) && !url.startsWith(“https://”)) {       finalUrl = “http://$url“   }

Then, comes the actual part of the CustomTabsIntent builder. We create a Chrome CustomTab by setting properties regarding toolbar colour, close-button icon, starting and ending animations!

CustomTabsIntent.Builder()           .setToolbarColor(ContextCompat.getColor(context, R.color.colorPrimaryDark))           .setCloseButtonIcon(BitmapFactory.decodeResource(context.resources, R.drawable.ic_arrow_back_white_cct_24dp))           .setStartAnimations(context, R.anim.slide_in_right, R.anim.slide_out_left)           .setExitAnimations(context, R.anim.slide_in_left, R.anim.slide_out_right)           .build()           .launchUrl(context, Uri.parse(finalUrl))

setToolbarColor is used to set the toolbar colour of the intent. In this case it was our colourPrimaryDark. setCloseButtonIcon() takes a close icon Bitmap as input. setStartAnimations() takes care of the animation which will occur when the Tab is opened.

build will build the CustomTabIntent and launchUrl will launch the TabIntent with the url being finalUrl.

Thus, we can are clearly able to achieve the feat of showing the web page in the app itself using a CustomTab.

Additional Resources

• Sascha Peilicke (2017) – Chrome Custom Tabs for Android    
• SEGUN (2016) – Chrome Custom Tabs in Android    

Tags: GSoC18, FOSSASIA, Open Event, Android, CustomTabsIntent