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 PanelContainer
s,
that control how Panel
s 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 PanelContainer
s, 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<layout3 xmlns:android="http://schemas.android.com/apk/res/android"4 xmlns:auto="http://schemas.android.com/apk/res-auto">56 <FrameLayout7 android:layout_width="match_parent"8 android:layout_height="match_parent"9 android:background="#80FF">1011 <androidx.fragment.app.FragmentContainerView12 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>1819</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"?>23 ...45<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">89 ...1011 <com.tomtom.ivi.platform.systemui.api.common.systemuihost.panelcontainer.TaskPanelStackContainer12 ...13 auto:ttiviSubContainerLayoutId="@layout/ttivi_customsubcontainerlayout_custom_subcontainer" />1415 ...1617</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.
