Introduction to SimpleChromeCustomTabs

Software Craftsman at Novoda passionate about Android Development, Open Source and Generative Arts.

Before August 2015, when an application had to open third party content hosted on a website, developers options were limited to open the content in a external browser or using a WebView. This was apparently enough, but after a time developers started feeling that the options were insufficient. In one hand opening a link on an external browser represents a heavy transition as it doesn't allow UI customisations, making harder for the users to return to the app. In the other hand WebView allow UI customisation, however that customisation is not always trivial and WebView doesn't provide many of the features available in browsers. But as I said this was before August 2015.

So, what changed then on August 2015? Android received Chrome Custom Tabs as part of the Android Support Library revision 23. Chrome Custom Tabs combines the best of the two options existing to the date; it will allow you to customise Chrome Browser UI, helping on making the transition between contents almost insignificant. This is possible because it allows customisations on the browser toolbar colour, up button, action button, menu items and the start / exit animations.

So, problem solved, right? you might be thinking... But unfortunately it is not that simple, Chrome Custom Tabs is sometimes hard to integrate within your application and that could eventually lead some developers and products owners to postpone over and over the decision to devote precious time on that non-trivial integration; time that could be instead used on developing much cooler features. At Novoda we have been there, and for that reason we decided to create SimpleChromeCustomTabs as a way to reduce the effort required on this integration. Now we are sharing this approach with you.

Show me how!

In the following lines we are going to show you how to include SimpleChromeCustomTabs in your application. For this exercise we are going to take a DemoActivity consisting of a button which, on click, opens a website on the browser. Then we are going to include SimpleChromeCustomTabs in the project, and will use it to open the website into an non-styled Chrome Custom Tab. Finally we will style our tab to provide a different look & feel. Note: For convenience the Application class has been extended on DemoApplication.

Activity with button

Adding SimpleChromeCustomTabs to your project

The only thing you have to do is to include the following into the build.gradle of your project.

repositories {  
    maven {
        url  "http://dl.bintray.com/novoda/maven" 
    }
}

dependencies {  
    compile 'com.novoda:simple-chrome-custom-tabs:0.1.1 '
}

Integrating into your app

Let's take a deeper look to our activity at this moment:

public class DemoActivity extends Activity {

    private static final Uri WEBSITE_URI = Uri.parse("https://html5test.com/");

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.demo_layout);
        Button button = (Button) findViewById(R.id.open_url_button);
        button.setOnClickListener(openUrlButtonClickListener);
    }

    private final View.OnClickListener openUrlButtonClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intent = new Intent(Intent.ACTION_VIEW)
                    .setData(WEBSITE_URI);
                    .addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
            startActivity(intent);
        }
    };

}

Nothing has changed so far, we have only included the dependency but we still have to make a good usage of it. Let's now use SimpleChromeCustomTabs to open the website; we are not going to style the Chrome tab yet, but don't worry, we will.

Firstly we will initialise SimpleChromeCustomTabs. Initialisation only needs to happen once in the application lifecycle, but it is important to do it as otherwise we won't be able to connect SimpleChromeCustomTabs to our activity. We do it on DemoApplication.onCreate().

public void DemoApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();

        SimpleChromeCustomTabs.initialize(this);
    }

}

The following steps will be to open a connection between DemoActivity and SimpleChromeCustomTabs; we do this on DemoActivity.onResume().

public class DemoActivity extends Activity {

    ...

    public void onResume() {
        super.onResume();
        SimpleChromeCustomTabs.connectTo(this);
    }

}

Remember to disconnect on DemoActivity.onPause().

public class DemoActivity extends Activity {

    ...

    public void onPause() {
        super.onPause();
        SimpleChromeCustomTabs.disconnectFrom(this);
    }

}

Once we have a connection we can navigate using a Chrome Custom Tab, so let's modify the way we handle click events in our button.

public class DemoActivity extends Activity {

    ...

    private final View.OnClickListener openUrlButtonClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            SimpleChromeCustomTabs.navigateTo(WEBSITE_URI);
        }
    }; 

    ...   
}

With this changes in place our activity will look pretty much like this:

public class DemoActivity extends Activity {

    private static final Uri WEBSITE_URI = Uri.parse("https://html5test.com/");

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.demo_layout);
        Button button = (Button) findViewById(R.id.open_url_button);
        button.setOnClickListener(openUrlButtonClickListener);
    }

    private final View.OnClickListener openUrlButtonClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            SimpleChromeCustomTabs.navigateTo(WEBSITE_URI);
        }
    };

    public void onResume() {
        super.onResume();
        SimpleChromeCustomTabs.connectTo(this);
    }

    public void onPause() {
        super.onPause();
        SimpleChromeCustomTabs.disconnectFrom(this);
    }

}

Now we have a Chrome Custom Tab ready to be styled, Almost done!

Gif / Image Non-styled simple chrome custom tab

Styling the Chrome Tab

Now we are going to give a different look and feel to our custom tab, there are many different customisations you can do, but as part of this exercise we will just tint the toolbar and change the back navigation icon to a custom one. To do so we will make use of the SimpleChromeCustomTabs navigation builder.

public class DemoActivity extends Activity {

    ...

    private final View.OnClickListener openUrlButtonClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            SimpleChromeCustomTabs.withIntentCustomizer(intentCustomizer)
                    .navigateTo(WEBSITE_URI);
        }
    };   

        private final IntentCustomizer intentCustomizer = new IntentCustomizer() {
        @Override
        public SimpleChromeCustomTabsIntentBuilder onCustomiseIntent(SimpleChromeCustomTabsIntentBuilder simpleChromeCustomTabsIntentBuilder) {
            return simpleChromeCustomTabsIntentBuilder.withToolbarColor(getToolbarColor())
                    .withCloseButtonIcon(decodeCloseBitmap());
        }
    }; 


    @ColorInt
    private int getToolbarColor() {
        return ContextCompat.getColor(this, android.R.color.black);
    }

    private Bitmap decodeCloseBitmap() {
        return BitmapFactory.decodeResource(getResources(),  R.drawable.ic_arrow_back);
    }
}

What we have now will allow our users to quickly come back to our application once they are done with the website! Not only that, we have given a different look & feel to the Chrome tab.

Gif / Image styled simple chrome custom tab

Wrapping up

We have integrated SimpleChromeCustomTabs and replaced our old navigation to website procedure to a better one which will help us to maintain our users in context by mean of chrome tab customisations, helping them on coming back to the application with just one touch. But there are many more things you can do with SimpleChromeCustomTabs and we invite you to explore a more complete customisation at SimpleChromeCustomTabs - Extended demo activity.

Time to navigate!

About Novoda

We plan, design, and develop the world’s most desirable Android products. Our team’s expertise helps brands like Sony, Motorola, Tesco, Channel4, BBC, and News Corp build fully customized Android devices or simply make their mobile experiences the best on the market. Since 2008, our full in-house teams work from London, Liverpool, Berlin, Barcelona, and NYC.

Let’s get in contact