{
  "$type": "site.standard.document",
  "canonicalUrl": "https://segunfamisa.com/posts/chrome-custom-tabs",
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreierxqymgbkxc5ze6q7lpfgh443665rdmaoz5rqau7k3arm2rv6aqy"
    },
    "mimeType": "image/png",
    "size": 29230
  },
  "description": "Tutorial on how to use chrome custom tabs in Android.",
  "path": "/posts/chrome-custom-tabs",
  "publishedAt": "2016-06-04T06:05:30.000Z",
  "site": "at://did:plc:a5mekodp4afxadlpr4hp2wci/site.standard.publication/3mm2oa7vz5327",
  "tags": [
    "android",
    "chrome",
    "custom tabs",
    "chrome custom tabs"
  ],
  "textContent": "Introduction\n\nI have been seeing a behaviour in some apps for a while, and I've always wanted\nto know how it was done. I noticed some apps that allow to view urls within the app, used\nsomething that is \"Powered by Chrome\". I first noticed this on the Twitter for Android app, then on\nMedium, then Feedly.\n\nI was interested in knowing how these worked, but I didn't know what to search for.\nFinally, a few weeks ago, I stumbled on \"Chrome Custom Tabs\". Alas, that was what I was looking for.\n\nIn this post, I'm going to explain why, when and how to use \"Chrome Custom Tabs\" in your Android\napplications.\n\nWhy use Chrome Custom tabs?\n\nWhen building apps, developers are usually faced with difficult tradeoffs to make when\nwe have to show web content in our Android apps. Very common and easy solution is to open links externally.\nIf you do this, then these lines of code will look familiar:\n\nThis typically results in a heavy-weight transition between the app and web.\nLaunching a browser from your app to view web content results in a huge context switch\nwhich isn't customizable, and hence could lead to a terrible experience.\n\nAn improvement on this experience will be to use a WebView which is essentially\nan Android view that displays web pages. However, this options requires technical work to implement and delivers\na browsing experience that the users aren't used to.\n\nTo solve this problem, the Google Chrome team introduced a new feature last September, called custom tabs.\nThis allows to load a chrome tab within your app, and also allows you customize the look and feel of Chrome thereby making\nthe transition between your app and the web content fast & seamless for your users.\n\nThis is Chrome Custom tab in action on Twitter for Android app:\n\n<p align=\"center\">\n\t<img src=\"/images/chrome-tab-twitter.gif\">\n</p>\n\nChrome Custom tab allows you customize the experience of Chrome. It allows you customize:  \n\n   Toolbar color  \n   Enter and exit animations  \n   Add custom actions to the Chrome toolbar, overflow menu and bottom toolbar\n\nHow to use Chrome Custom tabs\n\n1. Add Chrome Custom tabs to your app\nFirst thing to do, is to add the chrome custom tabs dependency to the dependencies section of your\n app-level build.gradle file. The section should look like this\n\nWith this, you can customize the look and feel of Chrome, and also take advantage of some optimizations,\nas we will see later in the post.\n\n2. Open a Chrome custom tab\nNext step is to proceed to open a Chrome custom tab. In this step, you get to configure the look and feel of Chrome\nopen a url in the Chrome Custom Tab. This happens in 3 easy steps:\n\n   Create a CustomTabsIntent builder for customization. Specify all the custom properties you desire.\n   Build a CustomTabsIntent from the builder\n   Launch the url.  \n\nThis block of code, does exactly the 3 things listed above:\n\n3. Further customization\n\na. Setting an Action Button\nYou can set an action button and customize that action button.\n\n  \n\nAn action button is what is highlighted by the red box in the image below:\n<p align=\"center\">\n\t<img src=\"/images/chrome-tab-action-demo.png\">\n</p>\n\nb. Adding custom menu items.\nYou can also add custom menu items. To do this, follow these steps:\n\nCustom menu items added are as highlighted in the image below:\n<p align=\"center\">\n\t<img src=\"/images/chrome-tab-menu-demo.png\">\n</p>\n\nc. Adding entry and exit animations.\nIt's also possible to specify custom entry and exit animations. To do this, follow these steps:\n\nAdvanced customization of Chrome custom tabs\nThere are other advanced customizations you can do, especially when it comes to optimization.\nChrome Custom Tabs allows for:  \n\n   Warming up Chrome to make pages load faster,  \n   Tell Chrome what the user is likely to open, and then allow for prefetching the content,\n   Create a new tab session,\n   Connection to the Chrome service,\n   Custom Tabs connection callbacks,\n   Create fallbacks when there is no version of Chrome that supports Chrome Custom Tabs,\n  or where there isn't chrome at all.\n\nWant to see more code?\nClone or download this github repo for the full source code to demo Chrome Custom Tabs.\n\nThe repository contains code to customize the tabs, helper methods, more code on the optimization, warming, binding to a Chrome Tab Connection,\nUnbinding at the right time, fallback method, for when the device doesn't have Chrome installed.\n\nReferences and Further reading\nThis post is just an introduction to using Chrome Custom Tabs, feel free to explore more resources to gain a deeper insight into using\nChrome custom tabs.\n\nHere are some references and resources for further reading:\n\n   http://android-developers.blogspot.com.ng/2015/09/chrome-custom-tabs-smooth-transition.html\n   https://github.com/GoogleChrome/custom-tabs-client/blob/master/Using.md\n   https://github.com/GoogleChrome/custom-tabs-client\n   https://developer.chrome.com/multidevice/android/customtabs\n\nIf you have any comments/suggestions or corrections, I'd love to hear them. Please do not\nhesitate to drop a comment below or tweet at me.\n\nPlease share if this post has helped you in some way, or you know someone it may be of help to. 🙈😁\n\nCheers :)",
  "title": "Chrome Custom Tabs in Android"
}