UI Controls

In TomTom IndiGO, the System UI is made up of a number of panels, such as the main menu, notifications, etc. Each panel visually represents a frontend through a fragment made up of different UI elements like text, images, buttons, etc. To ensure a consistent UI style and to minimize implementation effort, these elements are implemented as reusable UI controls in the TomTom Android Tools library. They support various forms of user interaction and their appearance can be easily customized.

The com.tomtom.tools.android.core.theme module declares the view element attributes that these controls need, to define their appearance. When using these controls, it is mandatory to define these attribute values. For further information, check the Theming documentation.

For more details of these controls, see the api_uicontrols module.

The most commonly used custom controls are:

• TextView
• Button
• TextInputField
• ImageView
  • TtRemoteImageView
  • TtRoundedImageCardView
• List
  • TtListLinearLayout
  • TtListTableLayout
  • TtListRecyclerView
• ScrollBar
• ScrollView
• ProgressBar

Other controls that are available in TomTom IndiGO are:

• InformationControl
• NavigationBar
• SearchView
• SeekBar
• TabBar

Common controls

TextView

The TtTextView class is a user interface element that represents a label control that displays text to the end-user. It acts in a similar way to Android's TextView but should be used instead of it (or similar) classes so that the UI of the frontend being developed is consistent with the rest of the UI of the IVI system.

In contrast to the Android class AppCompatTextView, this control also provides predefined option for; Vertical alignment.

Examples of TtTextViews configured in various ways:

Button

The TtButton class provides a basic form of interaction. It can be tapped on to trigger an action.

The TtButton adds to the Android class AppCompatButton the following features:

• You can provide a drawable, a text label or both, that will be shown on the button.
• Showing a badge on top of the drawable is also possible. A typical use case could be to inform the user when something changes, like new messages become available.
• Several types of buttons are defined. They all have a different appearance and should be used for different use cases:
  • Primary is used for actions with the most emphasis.
  • Secondary is used for actions with less emphasis.
  • Tertiary is used for actions with the least emphasis.
  • Acceptance is used for actions with a positive emphasis that results in success.
  • Destructive is used for negative actions, like flow cancellation or data deletion.
  • Floating is used for buttons which hover over content to promote an action.
  • Toggle is used for buttons which allow the user to change a setting between two states.

TextInputField

The TtTextInputField class lets the user enter text. You can set a hint text in the input field, as a placeholder for the input text. Also, you can provide a helper text, shown below the input field, to help the user understand which information is requested.

Apart from these you can also provide error text, which is also shown below the input field. This can be used to indicate to the user that the entered input is incorrect, or that an error occurred as a result of the input.

There is a clear icon, for the user to clear the input.

ImageView

TtRemoteImageView

The TtRemoteImageView class is used to asynchronously load and display a remote image from a given URI.

The TtRemoteImageView adds to the Android class AppCompatImageView the following features:

• An image placeholder can be displayed while waiting for the remote image to be downloaded.
• The remote image will be downloaded from the given URI automatically. When the download is completed, the image placeholder will be replaced by the retrieved image. No caching is implemented for images in TtRemoteImageView objects.
• A cross-fade animation is applied when the image changes. You can control the animation duration. When applying a radius to the image filter, you control the blurriness of the image during this transition.

TtRoundedImageCardView

The TtRoundedImageCardView class is designed for displaying rounded images with a small text overlay.

This control consists of layered elements, from top to bottom:

• a text label;
• a foreground image;
• a source image;
• a background image.

The source image can be retrieved from a given URI, optionally showing a placeholder image until the source image has been downloaded.

List

TtListLinearLayout

The TtListLinearLayout class presents views as a list.

The TtListLinearLayout adds to the Android class LinearLayout the following features:

• You can provide your own ViewModels and item layout to populate view items in this list.
• You can specify the maximum number of items to be displayed in the view.

TtListTableLayout

The TtListTableLayout class presents views as a table, with multiple rows and columns.

The TtListTableLayout adds to the Android class TableLayout the following features:

• You can provide your own ViewModels and item layout to populate view items in this list.
• You can specify the maximum number of items to be displayed in the view.

TtListRecyclerView

The TtListRecyclerView class makes it easy to efficiently display large sets of data.

The TtListRecyclerView adds to the Android class RecyclerView the following features:

• You can provide your own ViewModels and the layout to define how each item looks. The ViewModel can be:
  • A header ViewModel containing an image and a text.
  • A content ViewModel is used to populate a TtInformationControl.
• You can provide a sticky header. This is a header view that is always shown at the top of the TtListRecyclerView and does not disappear while scrolling.

ScrollBar

The TtScrollBar class is used to control the attached view and to visualize the scrolling status. Apart from the basic scroll bar functionalities, this control also provides some dditional features:

• A scroll bar indicator. The indicator is an extra view, shown next to the scroll bar handle and attached to the scroll bar's parent view. It presents some extra information like a text or a drawable, based on the current scrolling position.
• An up button at the top of the bar, and a down button at the bottom of the bar.
• Scroll by page. A tap-and-hold of the up or down button scrolls the target view page by page.
• Scroll to top. A tap-and-hold of the up button scrolls the target view to the top page.

You can configure the TtScrollBar for either scroll-by-page or scroll-to-top, but not both.

Here is an example demonstrating a combined usage of TtScrollBar and TtListRecyclerView. From the image, you can see the star icon as the up button on the top of the bar. Also, the scroll bar indicator shows D for the current scroll position.

ScrollView

The TtScrollView class provides the Android ScrollView functionalities, but can only scroll vertically. You can specify the position of a fading effect as one of the following:

• Top edge only.
• Bottom edge only.
• Top and bottom edges.

Other controls

ProgressBar

The TtSmoothProgressBar class is used to indicate the progress of an operation.

The TtSmoothProgressBar adds to the Android class ProgressBar the following features:

• The progress is updated smoothly by an Animator.

InformationControl

The TtInformationControl class is designed to present various types of information in a view. It can be used in different places across the system, like lists, notifications, process bar, etc.

The content within this control consists of three sections that can be configured individually:

• The optional head section is positioned on the left and holds an image.
• The main section is positioned in the center. It starts with three vertically aligned text areas, with an optional icon: primary, secondary and tertiary. At the bottom it shows a rating bar with a dedicated text label.
• The optional tail section is positioned on the right and holds a text and an image. The user can choose whether to show either the text or the icon, or both.

An action can be triggered when the user taps the head section or the main section. A separate action can be triggered when the user taps the tail section.

NavigationBar

The TtNavigationBar class is mainly used to navigate between different screens within a domain or a panel.

It optionally shows a back button. Next to the back button is either a title or a number of breadcrumb items. The breadcrumbs reflect the current back stack and allow clicking on the items in order to navigate backwards through the stack.

The navigation bar can be configured to look as:

SearchView

The TtSearchView class consists of an icon on the left, an input field in the middle, a clear icon, and a searching indicator on the right.

The TtSearchView adds to the Android class SearchView the following features:

• The searching indicator.
• The appearance, like visibility of the searching indicator, is affected by the search status: focused, searching, etc.

This is how the control looks while a search is in progress, with the clear icon visible and the searching indicator animating:

SeekBar

The TtSmoothSeekBar class is used to indicate the progress of an operation with a draggable thumb. The user can touch the thumb and drag left or right to set the current progress.

The TtSmoothSeekBar adds to the Android class AppCompatSeekBar the following features:

• The progress is updated smoothly by an Animator.

TabBar

The TtTabBar class contains tab components and a tab indicator. A tab usually represents a group of content and the tab bar is used to organize and navigate between these groups. The tabs within the tab bar can be visually represented by an icon, a text or both. The tabs can have a fixed or a flexible width, depending on the configuration. When a tab is selected, it will be highlighted and the tab indicator moves under the selected tab.