Customizing the UI

The Zappar component provides a complete, fully-featured user interface for scanning and execution of AR experiences. The UI can be customized in a number of ways:

  • The color of the action bar can be changed
  • The buttons present on the action bar can be chosen

In each case the modifications are made by adding "extras" to the Intent that's used to start the embed Activity:

Intent i = new Intent(this, ZapparEmbed.getZapcodeClassForIntent());
// Add extras to i to customize the UI

Changing the Bar Color

You can change the color of the action bar using an extra like this:

i.putExtra(ZapparEmbed.EXTRA_BAR_COLOR, Color.rgb(0, 128, 0));

The EXTRA_BAR_COLOR extra takes an int that can be generated using

You should always choose a dark color for the action bar so that there is good contrast with the white icons on its buttons.

Choosing the Bar Buttons

The action bar hosts buttons that allow the user to perform a number of useful functions. Some of the buttons on the bar are optional, and can be shown or hidden.

History/Favorites button

This button opens an area where users can browse and launch zaps that they've recently scanned or marked as a favorite. It's shown by default but can be hidden with the following extra:

i.putExtra(ZapparEmbed.EXTRA_SHOW_HISTORY_BUTTON, false);

Add to Favorites button

This button allows the user to toggle whether the current zap should be shown in the favorites section. This button is enabled by default and only appears when the user is in a zap experience and not during scanning mode. It can be disabled completely using the following extra:

i.putExtra(ZapparEmbed.EXTRA_SHOW_FAVORITE_BUTTON, false);

Suggested Next Steps

zapcode branded_zapcode i