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 :
.png)