MotionLabel

MotionLabel is a Component that allows you to animate text in useful ways.

This is an example of things that can be done with MotionLabel

motionLabel.mp4

Example layout and MotionScene

Attributes

• textPanX - position the text horizontally in the view 0 = center -1 = left justified +1=right justified
• textPanY - position the text vertically in the view 0=center -1=top, 1=bottom
• borderRound - round the corners with a fixe radius in dp
• borderRoundPercent - round the corners proportional to the widget
• scaleFromTextSize - set a base textSize so that textSize scales from this size. This allows efficient animation of text
• textOutlineThickness - expand the outline to create a sudo bold effect can be used to animate a bold look
• textOutlineColor - set the color of the outline of the text useful in achieving types of high contrast text e.g. yellow with black border
• textBackground - set a background drawable for the text to allow it to be anything from gradients to pictures.
• textureWidth - rescale the background texture width
• textureHeight - rescale the background texture height
• textBackgroundPanX - pan the background texture in x useful for achieving moving background effects
• textBackgroundPanY- pan the background texture in y useful for achieving moving background effects
• textBackgroundZoom - zoom the background texture useful for achieving moving background effects
• textBackgroundRotate - rotate the texture
• textureEffect - setting to frost produces a frosted texture effects.

textureEffect="frost"

Various effects created with MotionLabel

<!--    Backing image view with img3 -->
    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/imageFilterView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/img3"
        app:brightness=".9"
        app:saturation="0.7"
        app:imageZoom="1.5"
        app:layout_constraintBottom_toBottomOf="@id/label5"
        app:layout_constraintEnd_toEndOf="@id/label5"
        app:layout_constraintLeft_toLeftOf="@id/label5"
        app:layout_constraintRight_toRightOf="@id/label5"
        app:layout_constraintStart_toStartOf="@id/label5"
        app:layout_constraintTop_toTopOf="@id/label5" />
<!-- MotionLabel with img3 as text background -->
    <androidx.constraintlayout.utils.widget.MotionLabel
        android:id="@+id/label5"
        android:layout_width="0dp"
        android:layout_height="300dp"
        app:textPanX="-1.3"
        app:textBackgroundZoom="1.5"
        android:text="A world of Animated Text"
        android:textSize="240sp"
        app:textBackground="@drawable/img3"
        app:textureEffect="frost"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

A wide range of looks are possible