Introduction
Components
Animated Info

Animated Info

These components are designed to display an Animated Icon paired with text. They are commonly used for dynamic status indicators like “Charging”, “Loading”, or “Processing”.

There are two variations:

  1. AnimTextInfo: Supports a Timer.
  2. IconTextInfo: Supports an additional text line (Sub-content).

1. Anim Text Info

This component pairs an animation with a title and either a description or a live timer.

Usage 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// Define the animation source
val animConfig = AnimIconInfo(
    src = "voiceWaveBig", // System Lottie Key
    loop = true
)

// Example with Timer
builder.setAnimTextInfo(
    animIconInfo = animConfig,
    title = "Recording",
    timerInfo = myTimer // Replaces 'content'
)

Data Model (AnimTextInfo)

ParameterTypeDescription
animIconInfoAnimIconInfoRequired. Configuration for the animation (Source, loop, etc).
titleStringRequired. Main text label.
contentString?Auxiliary text.
timerInfoTimerInfo?Optional live timer. If set, it may replace or complement content.

Color Customization

FieldLight ModeDark Mode
TitlecolorTitlecolorTitleDark
ContentcolorContentcolorContentDark

2. Icon Text Info

This component is similar to AnimTextInfo but focuses purely on text depth, offering three levels of text: Title, Content, and Sub-Content.

Usage 

1
2
3
4
5
6

builder.setIconTextInfo(
    animIconInfo = animConfig,
    title = "System Update",
    content = "Installing...",
    subContent = "Do not turn off device"
)

Data Model (IconTextInfo)

ParameterTypeDescription
animIconInfoAnimIconInfoRequired. Configuration for the animation source.
titleStringRequired. Main text label.
contentString?Secondary text.
subContentString?Tertiary text (e.g., footer or small detail).

Color Customization

FieldLight ModeDark Mode
TitlecolorTitlecolorTitleDark
ContentcolorContentcolorContentDark

Shared Configuration: AnimIconInfo

Both components use this model to define the animation resource.

Format Restriction Currently, HyperOS only supports internal Xiaomi system Lottie files (e.g., system resources).

  • GIFs are NOT supported.
  • Custom Lottie JSON files are not supported in this version.
1
2
3
4
5
6
7

data class AnimIconInfo(
    val type: Int = 0,           // 0 = Default
    val src: String,             // Key for Xiaomi System Lottie
    val srcDark: String? = null, // Optional key for Dark Mode
    val loop: Boolean = true,    // Should it loop?
    val autoplay: Boolean = true // Should it start automatically?
)
ParameterTypeDescription
srcStringRequired. The key string for a Xiaomi system Lottie resource (e.g., "voiceWaveSmall").
srcDarkString?Optional alternative resource key for dark mode.
loopBooleanIf true, the animation repeats indefinitely.
autoplayBooleanIf true, the animation starts immediately upon rendering.
Hyper PictureCover Info