[Feature/#275] animated topAppBar

[chattymin]

Issue

• close Centering the app bar on the About list screen when scrolling #275

Overview (Required)

• Added AnimatedTextTopAppBar and apply about feature
• Apply figma

Links

Movie (Optional)

Before	After
before.mp4	new_animation.mp4

[chattymin]

This component is similar to issue #228. However, this feature requires the use of TopAppBar, while issue #288 requires LargeTopAppBar, making it difficult to use a common component for both. Therefore, I implemented it separately and submitted a PR.

[github-actions]

Detekt check failed. Please run ./gradlew detekt --auto-correct to fix the issues.

[github-actions]

Snapshot diff report

File name	Image
AboutScreenTest[Abou tScreen - when launc h - it should show d etail section]_compa re.png

[takahirom]

Thank you for your contribution. The animation is awesome. However, our designer prefers the #292 animation. Could you use AnimatedLargeTopAppBar instead?
#292 (comment)

[chattymin]

Thank you for your contribution. The animation is awesome. However, our designer prefers the #292 animation. Could you use AnimatedLargeTopAppBar instead? #292 (comment)

Sure! However, #292 uses a LargeTopAppBar with an icon at the top, while #293 uses a TopAppBar without an icon. If we use the AnimatedLargeTopAppBar as is, it will include a back icon at the top. Even if we set the icon to be optional and hide it, there will still be unnecessary padding.

So, instead of using AnimatedLargeTopAppBar, I used a custom component that I created and added the same fade-in and fade-out animations as in #292. What do you think about this approach? @takahirom

[takahirom]

Sounds good! That would be appreciated!

[takahirom]

Thank you for your contribution!