How to Create an Animated Counter Text with Jetpack Compose - Android Studio Tutorial
Vložit
- čas přidán 24. 01. 2023
- In this video you'll learn how you can create a text composable where each digit is separately animated.
⭐ Get certificates for your future job
⭐ Save countless hours of time
⭐ 100% money back guarantee for 30 days
⭐ Become a professional Android developer now:
pl-coding.com/premium-courses...
💻 Let me be your mentor and become an industry-ready Android developer in 10 weeks:
pl-coding.com/drop-table-ment...
Subscribe to my FREE newsletter for regular Android, Kotlin & Architecture advice!
pl-coding.com/newsletter
Join this channel to get access to perks:
/ @philipplackner
Get the source code for this video here:
github.com/philipplackner/Ani...
Join my Discord server:
/ discord
Regular programming advice on my Instagram page: / _philipplackner_
Checkout my GitHub: github.com/philipplackner
You like my free content? Here you can buy me a coffee:
www.buymeacoffee.com/philippl...
nice, easy and clean !
Awesome 👌
More content on compose 🔥🔥🔥🔥
This is super cool🤩🤩
Wow, this video is truly inspiring. The way you explained how you can create a text composable is so clear and easy to understand. It's videos like this that inspired me to start my programming channel on CZcams. Thanks for the inspiration! 🦾
Happy to help man 🙌
thank you bro
Splendid! Could you make a compose tutorial for a number picker? Like a year picker or something like that :)
add animate decrement:
if (oldCount < count) {
slideInVertically { it } with slideOutVertically { -it }
} else {
slideInVertically { -it } with slideOutVertically { it }
}
Is it ok to use derivedStateOf, in order to remember some "previous" data when derivedStateOf calculation lambda is executed?
This is great!
An idea for new video is about Arrow, specific Either which basically help with save some Unit test by being sure about what is coming
Hello,
Is the telegram gift is real?
I think somone under your name tried to steal money from me, please update
Nice ❣
Philipp do you still use xml for view building or youve already fully moved to jetpack compose?
Only compose
I want to animate numbers in different speed. For example from "0" to "1234" we need to use normal speed for "1", x2 speed for "2", x3 for "3", x4 for "4". In your example they all animated at once with same speed.
You can specify this logic with a when expression in AnimatedContent
Always new
Could you say me please sir? How can I create this button in android studio for Java? Please help me❤
If (oldChar==newChar) oldCount[i] else newCount[i]
So always it newCount [i] right?
Can you clarify your question?
Yes.
And for me this works too:
@OptIn(ExperimentalAnimationApi::class)
@Composable
fun AnimatedCounter(
count: Int,
modifier: Modifier = Modifier,
textStyle: TextStyle = MaterialTheme.typography.h1
) {
Row(modifier = modifier) {
count.toString().forEach { char ->
AnimatedContent(
targetState = char,
transitionSpec = {
slideInVertically { fullHeight -> fullHeight} with
slideOutVertically { fullHeight -> -fullHeight }
}
) {
Text(
text = char.toString(),
style = textStyle
)
}
}
}
}
No need to have the state, side effect, or any new char/old char logic at all, IMHO. Basically, as it is now, we always show just the new number. The old number is something that AnimatedContent takes care of.
yeap, and actually to don't need this checks at all =D
Hi Philip in you note app the navigation does not work until i click a long click on the empty screen what is the problem
What is your exact question again? Please rephrase
Awesome content. I'm gonna watch it later on my laptop. Currently watching from phone.
Eagerly waiting for jetpack compose , when will it be head to head with flutter
It already is
please make a video auto otp read
I haven't worked with jetpack compose yet. can't be done in xml with Kotlin?
I would suggest moving to compose ASAP
Today is basanta panchami and I remembered you Guru
How would you make it cycle automatically from 0 to 10 ?
He has another video that covers that czcams.com/video/2mKhmMrt2Ok/video.html
There is no need to store previous values and compare them to yours (especially if according to your condition they are always new ones), AnimatedContend already stores and compares new value to previous.
How to animate even new digit? So when it count from 9 to 10 animate 1 and 0 digits.
Because we use for loop and for every one digit it creates a seperate Text composable
I have achieved this effect. Basically you need to separate each digit of a number and have them visualize with individual "Text()".
For example, if your number is 10 then,
10/10 = 1 .. That's your first digit (Place it in one Text() compose)
10%10 = 0 .. That's your second digit. (Place ir in another Text() compose)
So this works for digits from 00 to 99.
Haven't tried this, but it might work with AnimatedVisibility to add an animation when the number appears
hello philipp, I am looking a way to animate views in lazyRow as they appear on the screen but there is no resources as far as I have searched, I have a chart that is lazyRow filled with rectangles with the height of some x amount, I want to animate them like so they rise from 0 height to the x and the amount digits themselves animate as well from 0 in the process. It would be great if you make a video about that
It's a little bit dirty but you can use AnimatedVisibility inside the items/item/iremsIndexed block or use a normal Row doing the same which is not recyclable but can be more indicated if you don't have a lot of items
heftig
Why can't u use rememberUpdated
How do you propose its use?
how can I achieve the same animation in XML?