Using a Custom Sub-container Layout

Knowledge of the system UI will help you to understand this guide. If you are not yet familiar with it, feel free to take a look at the system UI overview.

The system UI of the TomTom Digital Cockpit is built with PanelContainers, that control how Panels are shown on the screen. Each PanelContainer creates zero or more sub-containers to do this, concrete logic depends on the type of the PanelContainer.

TomTom Digital Cockpit comes with a set of PanelContainers, sub-containers and their layout files to cover the needs of the stock system UI. These are in the package com.tomtom.ivi.platform.systemui.api.common.systemuihost.panelcontainer.

The system UI also provides a way to use custom layouts for sub-containers. This tutorial contains an example that uses a custom sub-container layout with a default PanelContainer.

This assumes you have a project that has a custom system UI using a custom layout. The creation of this is described in the Custom Frontend Coordination Rule tutorial.

Create a custom layout file

Create a ttivi_customsubcontainerlayout_custom_subcontainer.xml layout. This layout will be used as a custom sub-container layout for the TaskPanelStackContainer. The logic to attach the Panel to its views depends on the concrete PanelContainer, in this case the custom layout must have the FragmentContainerView.

1<?xml version="1.0" encoding="utf-8"?>
2<layout
3    xmlns:android="http://schemas.android.com/apk/res/android"
4    xmlns:auto="http://schemas.android.com/apk/res-auto">
5
6    <FrameLayout
7        android:layout_width="match_parent"
8        android:layout_height="match_parent"
9        android:background="#80FF">
10
11        <androidx.fragment.app.FragmentContainerView
12            android:layout_width="match_parent"
13            android:layout_height="match_parent"
14            android:layout_margin="8dp"
15            android:background="@drawable/ttivi_systemui_panel_background_rounded"
16            auto:clipToOutline="@{true}" />
17    </FrameLayout>
18
19</layout>

Use custom layout in a custom system UI layout

Add the ttiviSubContainerLayoutId parameter that points to the custom sub-container layout file to the TaskPanelStackContainer declaration in the ttivi_customsubcontainerlayout_customsystemui.xml.

1<?xml version="1.0" encoding="utf-8"?>
2
3   ...
4
5<layout xmlns:android="http://schemas.android.com/apk/res/android"
6    xmlns:auto="http://schemas.android.com/apk/res-auto"
7    xmlns:tools="http://schemas.android.com/tools">
8
9    ...
10
11        <com.tomtom.ivi.platform.systemui.api.common.systemuihost.panelcontainer.TaskPanelStackContainer
12            ...
13            auto:ttiviSubContainerLayoutId="@layout/ttivi_customsubcontainerlayout_custom_subcontainer" />
14
15    ...
16
17</layout>

See the custom layout being used

After the application is built and deployed to a target device, follow these steps to see the new behavior of the system UI:

• Tap any main menu item.
• See the border around the main content of the screen. This border comes from the custom layout file of the sub-container.