32

Recently was added this support library, but I couldn't find any example.

What the purpose of this library?

Could you post any example using this library?

Nikola Despotoski
  • 49,966
  • 15
  • 119
  • 148
juanhl
  • 1,170
  • 2
  • 11
  • 16
  • This library works very well: https://github.com/DreaminginCodeZH/CustomTabsHelper – Dielson Sales Apr 06 '17 at 16:43
  • I would also like to comment that CustomTabs can be likened in potential functionality to the `SFSafariViewController` of iOS pictured here: https://cms-assets.tutsplus.com/uploads/users/473/posts/24260/image/tpWebView.png. It allows opening a webview modally as oppose to leaving the application. This tutorial tells more in similarity: https://iwritecodesometimes.net/2018/02/27/keep-users-engaged-with-sfsafariviewcontroller-and-android-chrome-custom-tabs/. – petrosmm Jan 22 '19 at 02:51

3 Answers3

34

CustomTabs is used to open links in a browser that supports CustomTabs. Most likely opening is done on Chrome, hence CustomTabs is part of chromium platform.

Purpose is to avoid implementing WebViews in your application and yet giving you option for styling actual chrome tabs, like toolbar color, title, various exit/enter transition, adding action buttons and menues. CustomTabs will allow your application bind to the chrome service and make chrome work as part of your application. Styling which will give you feel the opened web resource is part of your application.

Beside the styling, CustomTabs will give you full chrome web capabilities that probably couldn't be achieved with standard WebView.

Here are demos, which are straight forward.

Edit:

A snippet from my application which is "simplified" version of the Google's demo, lacking fallback mechanism, for now.

Usage of the helper is the following:

  1. Initialize it when your activity is alive

      @Override
      protected void onCreate(Bundle savedInstanceState) { 
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_preview);
         mCustomTabHelper = new SimpleCustomChromeTabsHelper(this);
}
2. When the instance is alive and we have an url ready to be opened we can call:

mCustomTabHelper.prepareUrl(mProduct.getRedirectUrl());

Which will bind to the Chrome service, if not previously bind, or will just notify Chrome service that we might be opening that link in the future. CustomTabSession can be used to open or prepare multiple url.

  1. Open the url

    mCustomTabHelper.openUrl(mProduct.getRedirectUrl());

The overloaded method of openUrl is using sort of ui options builder that is replica of the CustomTabIntent.Builder, but I have dropped the CustomTabsSession argument so the helper later will build CustomTabIntent internally.

I'm running Chrome Dev version along stable one. If I choose the stable one, I'm not able to use CustomTabsat all. As Google advices, CustomTabs will only work on Chrome 45 and beta versions of Chrome.

Demo from my application: https://youtu.be/fnIZwuJXjHI

Edit: Post

Nikola Despotoski
  • 49,966
  • 15
  • 119
  • 148
  • Any idea how to identify when the user closes the custom tab and you are back on your previous activity? Something like onActivityResult. – Roberto Sep 08 '15 at 11:40
  • Thanks for the hint. In someone else is looking for the exact way of doing it without using any helper class, it's really simple. startActivityForResult(customTabsIntent.intent, Constants.YOUR_REQUEST_CODE); – Roberto Sep 14 '15 at 08:35
  • 1
    @Lancelot Calling `customTabIntent.intent.setData(uri)` before starting it for result is obligatory for setting url to be loaded. – Nikola Despotoski Sep 14 '15 at 11:10
  • Sure, I forgot to mentioned it but yes of course. Without it the OS doesn't really know what your intent is trying to do and it may end up presenting many options that are not relevant to the intent. With setData(uri) there should be no option and the tab should open straight away. Thanks again Nikola – Roberto Sep 14 '15 at 11:45
  • 2
    The custom tabs support library is now available from the [Google repository](http://developer.android.com/tools/support-library/features.html#custom-tabs). Use `compile 'com.android.support:customtabs:23.0.0'` in your gradle config instead of linking the library from the [samples repo you linked](https://github.com/GoogleChrome/custom-tabs-client/tree/master/demos/src/main/java/org/chromium/customtabsdemos) – Josh Sep 28 '15 at 17:26
3

Try this:

gradle dependency:

dependencies {
    ...
    compile 'com.android.support:customtabs:25.1.0'
}

Code :

Uri uri = Uri.parse("https://github.com/mzelzoghbi");

// create an intent builder
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();

// Begin customizing
// set toolbar colors
intentBuilder.setToolbarColor(ContextCompat.getColor(this, R.color.colorPrimary));
intentBuilder.setSecondaryToolbarColor(ContextCompat.getColor(this, R.color.colorPrimaryDark));

// build custom tabs intent
CustomTabsIntent customTabsIntent = intentBuilder.build();

// launch the url
customTabsIntent.launchUrl(activity, uri);
0

There is demo project on github, mentioned by @NikolaDespotoski, which can be partially reusable.

Solution is based on this article.

  1. Add project shared to your project. Shared is a name of project (I don't know why Google didn't add it into customtabs library). link to shared project

  2. Copy Activity helper from demo project to your project and put correct package. CustomTabActivityHelper

  3. To pre-fetch url use CustomTabActivityHelper#mayLaunchUrl method (if needed) and CustomTabActivityHelper#openCustomTab to open Chrome custom tab.

For instance openning custom tab:

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build();
CustomTabActivityHelper.openCustomTab(this, customTabsIntent, uri,
        new CustomTabActivityHelper.CustomTabFallback() {
            @Override
            public void openUri(Activity activity, Uri uri) {
                Intent intent = new Intent(Intent.ACTION_VIEW, uri);
                startActivity(intent);
            }
        });

Pre-fetching of url is more complicated. You can see this demo for better understanding.

Oleksandr
  • 6,226
  • 1
  • 46
  • 54