![]() These extremely popular timesaving features are now even better, leveraging robust and powerful AI technology that does not require Internet connectivity and keeps your data secure. It is a rectangle shown on the currently selected tab.The latest release introduces a preview of new AI-powered tools, PhraseFind AI and ScriptSync AI. Let's take a look at how we can use it:įor this example, we customize the tab indicator. The Transition API also allows us to define different transitionSpec's when transitioning between different states. Using the Transition API allows us to track when all animations on a Transition are finished, which is not possible when using individual animate*AsState APIs that we've seen previously. Now that we are familiar with some basic Animation APIs, let's see the Transition API that allows us to create more complex animations. ![]() See the Customizing Animations documentation for more information. We can provide options to change the type of animation from spring to tween etc. You can see that it expands and shrinks with an animation.ĪnimateContentSize can be customized with a custom animationSpec too. We can animate the change of its size by adding the animateContentSize modifier. This Column composable here changes its size as its content is changed. The card containing the text expands and shrinks when the body is shown or hidden.Ĭheck out the code for TODO 3 in the TopicRow composable. Try clicking one of them, and it should open up and show the body text for that topic. The app shows several topics in the content. You can see that the message now slides in and out from the top with different easing functions and durations: Text = stringResource(R.string.edit_message), if (extended) ,ĪnimationSpec = tween(durationMillis = 250, easing = FastOutLinearInEasing)Ĭolor = , The text saying "EDIT" is shown or hidden using an if statement. It is in the HomeFloatingActionButton composable. If you scroll the content of the app, you will notice that the floating action button expands and shrinks depending on the direction of your scroll.įind TODO 2-1 and check out how this works. Rerun the app and try switching the tabs. TargetValue = if (tabPage = TabPage.Home) Seashell else GreenLight, val backgroundColor by animateColorAsState( The returned value is a State object, so we can use a local delegated property with a by declaration to treat it like a normal variable. You can create an animation value by wrapping the changing value with the corresponding variant of animate*AsState composables, animateColorAsState in this case. In order to animate a simple value change like this, we can use the animate*AsState APIs. Depending on its value, the background color is toggled between peach and green. Here, tabPage is a TabPage backed by a State object. val backgroundColor = if (tabPage = TabPage.Home) Seashell else GreenLight It does not really switch the tab content, but you can see that the background color of the content changes.Ĭlick on TODO 1 in your TODO tool window and see how this is implemented. ![]() Run the start configuration and try switching tabs by clicking on the "Home" and "Work" buttons at the top. This API should be used when animating State changes. Let's start with one of the simplest animation APIs in Compose: the animate*AsState APIs. ![]() One neat trick is to open the TODO tool window in Android Studio and navigate to each of the TODO comments for the chapter. Every code snippet we work on in this codelab is marked with a // TODO comment. We will start working on several animation scenarios in the next chapter. ![]() Make sure that start is selected in the dropdown for the run configuration. finished is the final state of the app after completing this codelab.start is the starting state for the codelab.Feel free to do that, or skip if you are short on time. Note: If you are running a newer version of Android Studio than the sample was created with, you may see a notification asking to update the Gradle version. Import the AnimationCodelab project in Android Studio. You can clone the repository as follows: $ git clone Īlternatively, you can download the repository as a zip file: How to use several basic Animation APIsĭownload the codelab code.If you are new to Jetpack Compose, there are several codelabs you might want to try before this one. Jetpack Compose is a modern UI toolkit designed to simplify UI development. In this codelab, you will learn how to use some of the Animation APIs in Jetpack Compose. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |