To get our toolbar the attention it deserves, we can set the colour and enable the title using:

int color = getResources().getColor(R.color.ikea_blue);

intentBuilder.setToolbarColor(color);

intentBuilder.setShowTitle(true);

Pretty straightforward, right? Those 3 lines of code really make a difference, and you can see that our toolbar now looks beautiful.

Setting the colour and endbaled the title make our toolbar look great!

Note: There currently seems to be no control over the color of the text displayed in the toolbar. The system currently handles this by using either black or white text depending on the shade of the background colour used.

For example, this text would look great white - but the inability to set it manually lets it down. If the toolbar is a brand specific colour, then there isn’t much you can do with regard to the text.

This would look much better if it was white…

Action Buttons

It’s possible to add a single action button to the toolbar within our Custom Tab. We can set the following properties for this action button:

Label - The label used for the action button

- The label used for the action button Icon - The icon for the action button displayed in the toolbar

- The icon for the action button displayed in the toolbar PendingIntent - The Intent launched when the action button is pressed

The implementation of this is again fairly simple. One thing to note is that the decoding of a bitmap from a drawable resource should be done asynchronously and not on the UI thread - for an example of this please see the sample app. The action button can be added as below:

String shareLabel = getString(R.string.label_share);

Bitmap icon = ImageUtils.decodeBitmap(R.drawable.icon_share);

PendingIntent pendingIntent = createPendingShareIntent();

intentBuilder.setActionButton(icon, shareLabel, pendingIntent); private PendingIntent createPendingShareIntent() {

Intent actionIntent = new Intent(Intent.ACTION_SEND);

actionIntent.setType("text/plain");

actionIntent.putExtra(Intent.EXTRA_TEXT, "Share text");

return PendingIntent.getActivity(

getApplicationContext(), 0, actionIntent, 0);

}

Menu Items

We can add multiple menu items to the options menu in the Custom Tab. The properties that we can set for each of these menu items are as follows:

Title - The title to be displayed for the menu item

- The title to be displayed for the menu item Intent - The intent to be launched upon a menu item click event, this will behave like a standard android intent e.g Share or Email

The chimp is thrilled that we could add “Share” and “Email us” menu items to the options menu

The result shown in the above screenshot was achieved as below:

PendingIntent menuItemPendingIntent = createPendingShareIntent(); String shareItemTitle = getString(R.string.menu_share_title);

intentBuilder.addMenuItem(shareItemTitle, menuItemPendingIntent); String mailItemTitle = getString(R.string.menu_email_title);

intentBuilder.addMenuItem(mailItemTitle, menuItemPendingIntent); private PendingIntent createPendingShareIntent() {

Intent actionIntent = new Intent(Intent.ACTION_SEND);

actionIntent.setType("text/plain");

actionIntent.putExtra(Intent.EXTRA_TEXT, "Share text");

return PendingIntent.getActivity(

getApplicationContext(), 0, actionIntent, 0);

}

Note: Whilst you can add a large number of menu items, it’s advisable to a minimum to ensure you don’t overwhelm the user (and not spoil the UI…)

Enter & Exit Animations

The CustomTab also allows us to define the animations that are used when the CustomTab transitions both on and off of the screen. Whilst this is great, you should keep this simple - so don’t go doing anything crazy.

Don’t let Uncle Ben down

By default, if we don’t set any animations then the Custom Tab will enter from the Bottom to the Top and exit from the Top to the Bottom.

Setting these animations is simple, using our intentBuilder instance we can individually assign our Start and Exit animations, as shown below:

intentBuilder.setStartAnimations(this,

R.anim.slide_in_right,

R.anim.slide_out_left);

intentBuilder.setExitAnimations(this,

android.R.anim.slide_in_left,

android.R.anim.slide_out_right);

Once setting the above on your CustomTabIntent instance, you’ll see the animation used in the screen on the right (which is nicer than the left) :