Developer

Custom Animations

Last edit: 2023.07.27

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 sub-containers to do this, and it controls how they enter and exit the screen. You can provide custom animations to a PanelContainer for these sub-container transitions.

This tutorial shows how to use custom animations to animate sub-containers when they are entering and exiting the screen.

This tutorial describes how to create and use custom animations, the creation of a custom system UI is described in the Custom Frontend Coordination Rule tutorial.

Create custom animation files

Create file scale_and_fade_in.xml.

1<?xml version="1.0" encoding="utf-8"?>
2<set xmlns:android="http://schemas.android.com/apk/res/android"
3    android:duration="?attr/tt_animation_duration_medium_ms"
4    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
5    android:shareInterpolator="true">
6

7    <scale
8        android:fromXScale="200%"
9        android:fromYScale="200%"
10        android:pivotX="50%"
11        android:pivotY="50%"
12        android:toXScale="100%"
13        android:toYScale="100%" />
14

15    <alpha
16        android:fromAlpha="0.0"
17        android:toAlpha="1.0" />
18</set>

Create file scale_and_fade_out.xml.

1<?xml version="1.0" encoding="utf-8"?>
2<set xmlns:android="http://schemas.android.com/apk/res/android"
3    android:duration="?attr/tt_animation_duration_medium_ms"
4    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
5    android:shareInterpolator="true">
6

7    <scale
8        android:fromXScale="100%"
9        android:fromYScale="100%"
10        android:pivotX="50%"
11        android:pivotY="50%"
12        android:toXScale="50%"
13        android:toYScale="50%" />
14

15    <alpha
16        android:fromAlpha="1.0"
17        android:toAlpha="0.0" />
18</set>

To learn more about animation resources in Android see the Animation resources guide.

Use custom animations in a system UI layout

Add ttiviSubContainerEnterAnimation and ttiviSubContainerExitAnimation parameters pointing to your custom animation resources into the TaskPanelStackContainer declaration in the ttivi_customanimation_customsystemui.xml file.

1<?xml version="1.0" encoding="utf-8"?>
2<layout xmlns:android="http://schemas.android.com/apk/res/android"
3    ...
4    <androidx.constraintlayout.widget.ConstraintLayout
5        ...
6    >
7

8        <com.tomtom.ivi.platform.systemui.api.common.systemuihost.panelcontainer.TaskPanelStackContainer
9            ...
10            auto:ttiviSubContainerEnterAnimation="@anim/scale_and_fade_in"
11            auto:ttiviSubContainerExitAnimation="@anim/scale_and_fade_out" />
12        ...
13    </androidx.constraintlayout.widget.ConstraintLayout>
14</layout>

See the custom animations

After the application is built and deployed to a target device, see the custom animations by following these steps:

  • Tap any main menu item.
  • See the content scaling and fading out.
  • Tap another main menu item.
  • See old content scaling and fading out and new content scales and fades in.