What's new in Jetpack Compose | Session

[Music] today we're here to talk about jetpack compose our modern native ui toolkit for android compose is currently in beta and version 1.0 is coming soon this means that it's time to learn and get ready to adopt it in your apps it's intuitive powerful and has been built from scratch to accelerate development and let you write ui with much less code in other words it's faster and easier so you can focus on building features and spend less time creating ui but why did android need a new ui toolkit the existing toolkit based on views has been available for over 10 years in that time technology has changed devices are more powerful users have higher expectations of apps and uis are much more dynamic and expressive and when you can still create beautiful apps with views you told us you wanted a modern toolkit based on modern architectures that capitalizes upon the power of kotlin we also wanted to be able to iterate and bring you features and improvements faster we started working on jetpack compose a declarative unbundled toolkit over three years ago we released our first beta in february which means that the api surface is stable as we keep working towards our stable release now is the time to learn and get ready to adopt to make building ui faster and easier so how does it make it faster and easier we've mentioned that jetpack compose is a declarative ui toolkit let's break those two concepts apart and look at each in turn first the declarative part today apps aren't static data they update they're live traditionally with android views you would declare your ui in xml but then to update your ui if any data changed you need to mutate it you do this by looking at views and setting properties on them so whenever your applications stay changed for example once a database or network call loads or after user interaction you would have to update your ui with this new information to keep everything in sync this can get complex as each view holds some state that you need to ensure you update this overhead of synchronizing state between your model and your ui is a huge source of bugs it's your responsibility as a developer to ensure that everything is updated as your app and ui get more complex it's easy to get this wrong declarative uis like compose take a different approach they transform state into ui the ui is immutable there's no way to update it after it's been produced so if your app state changes we re-execute to transform this new state into a new representation this avoids the synchronization issues entirely you regenerate the entire ui compose is actually smart enough to skip any work for elements that haven't changed to make it more efficient but conceptually it regenerates the entire ui for a given state your code describes what the ui should look like for a given state not how to produce it so what does this look like how do you transform state into ui here's a simple component that displays a list of strings notice that in compose a ui component is simply a function with the composable annotation this makes it quick and easy to create ui components encouraging you to break your ui down into a library of reusable elements the function doesn't return anything but instead emits ui here we're using the column and text composables from the compose library which arrange things vertically and display simple text labels note that we can use the full kotlin syntax and control flow to produce our ui here we iterate over the messages but if you want to conditionally show an element showing a label when there are no messages then it's as simple as using an if statement composables can and should accept parameters that's what we mean by transforming data into ui composables take data as function parameters and emit ui in this way the ui can't get out of sync for example forgetting to remove the no messages empty text if your state changes if the list of messages changes then a new ui is generated by executing this function again we call this recomposing so how might the list of messages change walking up the call stack our view model exposes the live data of messages we can observe this and now any composable that reads the messages field will be recomposed whenever there is new data you don't need to set up observers yourself the compose compiler tracks which composables read state and automatically re-executes them when that state changes it's smart enough to only re-execute composables whose inputs have changed and skip those that haven't making it very efficient each composable is immutable you can't hold a reference to it and query it later or update its contents you need to pass any and all information to a composable as parameters when you emit it but that doesn't mean that a composable can't be dynamic let's dig into this by adding a checkbox to select all messages initially our checkbox is unchecked unlike in the view world clicking this checkbox would not visually toggle it we've passed in a constant as its state after all if we want it to change the code must reflect that let's introduce a local variable to control whether it should be checked checkbox offers an unchecked change event when it is clicked we can update our local state in this callback doing so will cause the checkbox to be re-emitted as it reads the state it's important to understand that if we don't change any state in this callback the checkbox won't update visually at first it might seem unintuitive that you need to write code to make a checkbox toggle when tapped but this is a key concept in declarative ui elements are completely controlled by the parameters you pass to them this is what produces a single source of truth meaning that there's no other state to keep in sync it's entirely up to you to decide how to react to the user pressing the checkbox you might want to run some validation and only update the display if it's valid your code is completely in control rather than having to come back and undo the change of the validation fails earlier we mentioned that compose will re-execute this composable function when the input data changes however there are variables we may want to keep across re-executions or what we call recompositions composable functions can remember a value from an earlier execution by using the remember function this allows you to reuse a value in order to avoid reallocating it or to hold on to state in this example we implemented the event handling in line but for a more realistic example we could instead pass in the state and update lambda as parameters to the composable moving the logic up to wherever the source of truth is the key idea with declarative ui is that you completely describe what your ui should look like for a given state and the framework takes care of updating the ui when the state changes compose can work with many application architectures but is an especially great fit with one that follows a unidirectional data flow where your view model exposes a single stream of screen states this can be observed by your compose ui and passed down to individual components as parameters each of which only receives the state it needs and therefore only needs to be updated if the data changes producing a single stream of use state objects helps centralize where state changes can be made making it easier to reason about the entire state of the screen and reducing errors this pattern also makes your composable straightforward to test as they're all completely controlled by their inputs so we looked at how the declarative paradigm makes it easier to write ui built on top of these principles compose offers a rich toolkit of ui components jetpack compose implements the material design components and theming system it offers the components and building blocks that you need to assemble your applications such as buttons cards fobs or uppers all components follow material styling out of the box and it also implements material theming allowing you to customize all components systematically to your brand by supplying your own colors shapes and typography styles compose also offers a new simple but powerful layout system it's based on rows and columns which are roughly equivalent to horizontal and vertical linear layouts unlike the view system however the composed layout model prevents multiple measure passes making asset layouts performant layout with the new compose specific dsl allows you to express more complex layouts but it's also far simpler to create custom layouts performing your own measurement and placement to achieve just the right layout is as easy as implementing a function one of the most exciting improvement is the new animation system it's much much simpler to use offering really powerful and simple ways to bring motion to your uis and we're also working on bringing motion layout to compose testing and accessibility are first-class citizens in compose they're both built on a semantic system which creates a parallel tree to the ui that describes it providing more information to accessibility services or helping you to match ui elements to assert against them compose offers a dedicated testing artifact that has been built to maximize testability and offer easy apis for testing composables in isolation the test rule also exposes the clock which drives ui updates and offers apis for controlling it this lets you have full control in your test even testing animation code compose is entirely written in kotlin and takes advantage of the great language features to build powerful succinct intuitive apis curatins for example enable us to write much simpler async apis such as describing gestures animation or scrolling this makes it easier to write code that combines these sync events like a gesture which hands off to an animation all with cancellation and cleanup provided by structured concurrency kotlin also brings a powerful ecosystem of tooling for example making it trivial to extract ui components into new functions promoting reuse to really understand how these features come together to make it easier to build ui let's walk through an example this is owl one of our official samples available on github let's look at the topic screen to see some of these features in action let's start by building an individual topic chip we'll write a new composable function that accepts the topic model object as a parameter we can build our component with a row containing an image and a text this will show the data in our topic object for the background we can surround the row with a card composable we also want some spacing around the text to add this we can decorate any composable using its modifier parameter there are many different modifiers available for customizing layout drawing interaction and more here we're using the padding modifier to add some space we want selected topics to have a check icon shown on top of the image we can achieve this by passing in a boolean parameter we wrap the image in a box which allows us to stack items on top of each other and conditionally add the icon based on the selected parameter our design also calls for selected items to have a rounded corner we can achieve this by conditionally setting a corner radius based on the selected parameter and passing that to the card shape to animate this change we can simply wrap this condition with an animate a state function this will automatically animate the corner size change so far we've created a single topic item but on this screen we want to display a list of topics the user can choose let's create a new composable for this which takes a list of topic objects compose offers a lazy column composable which lays elements out vertically like a regular column but it only lays out enough elements to fill the viewport like a recycler view this makes it very efficient for displaying a window of a large dataset we can pass the list of objects to an items block and how to render each individual item and that's it no adapter or item layout files to manage however our design calls for a horizontal staggered sequence of topics this is also easy to achieve and compose by building a custom layout building something like the grid shown is only a couple lines of code one last thing i'd like to show you is theming owl gets its yellow background from its theme compose makes it easy to set up your themes so that your app reacts to dark mode let's unpack how that's done we can check whether the system is in dark theme and switch color schemes because all seaming is done at runtime compose easily supports dynamic seaming beyond dark theme you can find the complete implementation of the examples we've covered today in the compose samples repo hopefully that example illustrates how jetpack compose makes it faster and easier to build ui and that's just scratching the surface jetpack compose is built to coexist with the existing view system compose can be adopted as gradually as you need from replacing a small element of your screen to building a larger piece of ui or an entire screen compose helps you take the steps you need you can embed compose within views as well as hosting views within compose this can be especially useful for displaying content not yet built with compose such as ads or map view this can help you gradually migrate to compose adopting it at your pace in addition to view interop we provide integrations with other key libraries so compose can work with your existing application architecture no need to start from scratch we also provide wrappers for common image loading libraries and adapters for converting material or appcompat xml themes into compose there's an entire separate talk on composing existing libraries so check that out for more details we know that the developer experience is not complete without powerful tools and comprehensive documentation that's why besides updating some of the tools you're familiar with like layout inspector to support composer we've also built powerful new tools the compose preview for instance introduces a new way of working between tools and code allowing you to define your previews together with your components iterating on them in isolation and scrubbing through animations but this is just a sneak peek at the new compose tools to learn more and see them in action check the what's new in development tools and what's new in design tools talks we build compose with developers in mind in collaboration with the community since open sourcing it in 2019 your feedback feature requests and contributions helped shape it enormously we've also worked closely with the number of partners who have started exploring compose in their apps early adopters have told us they are writing less code reducing the size of their code base that compose is intuitive and more fun to work with freeing them up to work on features and quality and that it's powerful offering new ways of doing things at times surprising us with creative use of the apis we'll be sharing these partners stories soon so look out for those compose is a modern toolkit built to work across different screen sizes from small formats like wearables to large formats so like tablets and chromebooks and we're working to improve your development experience across all these services to help you get ready to adopt jetpack compose when it launches 1.0 shortly we've published an extensive set of learning materials so join us on the slack channel and keep giving us feedback as you learn compose and get ready to adopt it in your apps happy composing you

Channel: Android Developers

Views: 41,883

Rating: 4.9530792 out of 5

Keywords: purpose: Educate, type: Conference Talk (Full production), pr_pr: Google I/O, Jetpack Compose, Jet Pack Compose, Android Jetpack Compose, Android Developers, Android Dev, Android Developer News, How to use Android Jetpack Compose, What is Android Jetpack Compose, Jetpack Compose tutorial, #GoogleIO, Google I/O, Google IO, Google developer conference, Google announcement, Google conference, Google

Id: 7Mf2175h3RQ

Length: 16min 43sec (1003 seconds)

Published: Tue May 18 2021