Marquee Text Effect in Jetpack Compose

Welcome to codingbihar.com. Today we are going to learn marquee effect that we will apply on Text using modifier = Modifier.basicMarquee()

What is Marquee?

Text scrolling on the screen as you see News Headlines scrolling left to right or right to left on your T.V Screen is Marquee effect applied on Text. Marquee effect is also can be seen in video captions.

Marquee is an animation effect that we can apply on any composable in Jetpack Compose.

Ok n this tutorial we will learn to use Marquee effect on our text that makes our text scrolling on the screen.

A simple code for text using jetpack compose is

Text(text = "I am simple Text using jetpack compose")

Now we can apply scrolling effect on this simple text using Modifier.basicMarquee() so now we have the code for text with marquee effect is

  Text(modifier = Modifier.basicMarquee(velocity = 120.dp), letterSpacing = 12.sp,
            text = "I am simple Text using jetpack compose",
            color = Color.Red, fontSize = 18.sp) 

Parameters may be used

iterations - This can control the number of times to repeat the animation. We use Int.MAX_VALUE will repeat forever, and 0 will disable animation.

animationMode - This is used to specify the position Whether the marquee start animating Immediately or only WhileFocused. 

In WhileFocused - In this mode, the  content must be made focusable. 

delayMillis - This is used to set the time duration of animated scrolling text.

initialDelayMillis - This set the time to wait before starting the first iteration of the animation, in millis. By default, there will be no initial delay if animationMode is WhileFocused, otherwise the initial delay will be delayMillis.

letterSpacing - A letterSpacing specifies space between letters of Text.

velocity - This can be used to set the speed of the animation in dps / second.

How to create a simple calculator using Jetpack Compose 

MainActivity

Copy this code →

package com.example.jetpackcompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

import com.example.jetpackcompose.ui.theme.JetpackComposeTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeTheme {
               
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {        
                     MarqueeText()
                    }
                }
             }
          }
     }
@Composable
fun MarqueeText() {
  Text(
            modifier = Modifier.basicMarquee(velocity = 120.dp), letterSpacing = 12.sp,
            text = "CODINGBIHAR.COM CODINGBIHAR.COM",
            color = Color.Red, fontSize = 18.sp
        )
}

OUTPUT :