Skip to content

MotionLabel

Jump to bottom
John Hoford edited this page Sep 26, 2022 · 4 revisions

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"

image

Various effects created with MotionLabel

image

<!--    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

image

Clone this wiki locally