Let's build Android UI with Jetpack Compose by Alex Zhukovich, Takeaway.com EN

hello thank you for coming to my talk first of all I want to say thank you for organizer for such opportunity I think it's something new for a lot of us and yeah let's start with the top let me share my screen yeah today we will talk about building Android application with jetpack compose jetpack compose is something new which was announced recently and during this talk we will talk about basic object back compose and later on we will try to build Android application step by step when we finish with base implementation we will talk about routine typography theming and some additional features with jetpack kampala jetpack compose provide to us but before but before speaking about a jetpack compose I want to start with history of Android UI first release of Android we had in 2008 it was enjoyed 1.0 and starting from this time we use xml file for creating user interface of course we can create it with Java on Kotlin code but most of time its XML file I personally started I personally started before Android studio and videos Eclipse which is decay and plug-in but unfortunately sometimes plug-in no doesn't work very well and with Android studio and especially right now everything work pretty well the next big release was here ago after Android studio it was release of recyclerview and I hope right now everyone everyone use it and it worked in well but before it we had ListView we had a list limitation for us for scrollable data and as a result we had some problem with scrolling so the next pick religious the next big releases was considered layout and support design library we headed in 2017 and this was too super important releases because the main or the main one of main problem of Android that UI UI toolkit was built in into Android and the whole view framework was bundled in Android and speaking about design library in this time in 2017 we already know something what is called material design and more and more developer go to material design and in this library we had component like snack bar and many other attacks layout input etc and constraint layout I think right now familiar for everyone and your after it we have material design component and it's also pretty huge milestone for everyone who worked with who work with Android development because almost all application based on material design and last year we had release of jetpack compose right now it's in Developer Preview version and today we will talk more about it however before speaking about jetpack compose I want to come back to the view framework a view framework was created more than 10 years ago of course right now it's a lot of changes a lot of improvement a lot of new approach light view binder but oh for any technical decision you can have drawbacks because for a small for a small sample everything worked perfectly but speaking about tool which used by million developers of course we have some drawbacks and I want to start with site drawbacks so the first problem its that UI framework was built and in Android right now we have few more updates from vendors but five seven years ago were often it was pretty usual case when you buy a phone and you have no update at all and speaking about and speaking about it of course if you had some problem with a view framework you should wait in your release for fixing this issue or very often different vendors a provide custom UI and when you try to have similar UI on different devices it was very complicated the next big issue connected with the first one that UI framework binded into Android a curation system is that we often have fragmentation and sometimes you can have some methods and all this method from text view plus and sometimes you have a situation when some version of would be available only from from some some version of IP and of course it was a problem because very often when you start develop something and you should have two different implementation for different devices and of course it's not ideal situation for for development the next kind of issue is that view framework use inheritance and if we take a look at the example of this button this button have possibility like select text on the button and it's unfamiliar behavior for Android development and of course it can be tricky and the main reason of this problem is as button extends text view and text you have such possibility and it means that all developers should know which properties functions etc you should use and which you should avoid because it's of inheritance and of course if you take a look at to amount of to amount of this file as example view it's almost it's more than 29 thousand lines of code textview is also super big you can see that it's super complicated to maintain the last problem from my perspective it's code duplication because when you start working with in custom custom views you always should write for foolish similar constructor accept accept class name and of course it's used to just increase amount of God and it's a real example of checkbox because here we an extent compound button compound button extends button button extends edit view and edit view extends view it means that in checkbox we have all possibilities from all these classes and of course we don't need a such such possibilities and of course in some cases he generates some problems so let's move and speak about jetpack compose jetpack compose it was created fully from scratch it's not based on the view of view framework we have we have interoperability we will happen to repairability because right now we don't have it's in Developer Preview yet but let's speak about the main features of jetpack compose and the fan the first feature that it's fully unbundled from Android it means that it's distributed as a separate libraries not only libraries we'll talk about it later on we will have interoperability with view framework and right now we should have Android studio 4.4 that one or higher right now the latest release is 4.1 beta 5 so our dead bug compose it's combination of runtime for it we need Android studio because in Android studio we have injected plug-in which provide preview or preview functionality for composable functions we need our plugin and compiler right now it's a bit different from a lot from the last release or of Kotlin but i think later on finally it will be unified and we have set off UI libraries for framework or libraries for animations for testing etc so let's take a look at the first example it's a very simple example and here we will try to try to build a calendar item for showing us for throwing date and so first of all we need to create a function and our connections should be composable for making any function composable we need tomorrow mark our function with composable annotation later on we want to build a circle and the best one of good choices for building a circle on the background its surface because for the surface we can we can predefined size and shape of course color and many other modifiers so later on we should Center all our items and for it we can use box it's something like a container and later on we start using our layout its first layout I eat column and with this layout we just place all all items in a column and in a column we place text with a short version of month text another text field with date and the last one text with a month so as as I told before we are we can use preview functionalities in Android studio the radical stuff that we can create as many preview function and Android studio will render all this function of course of course if we will use more and more such functions we will use more and more memory Android studio will use more and more memory as you can see compose our preview function its usual composable function with preview annotation as example in this case we have two composable to preview functions first function show just a one calendar item another function show to calendar item with some space between them and they're placed in a row as you can see when you create one composable function for us example calendar item if you have problem with slides you can download slides in description I hope it will be a fixed I hope connection is also good so we can use we can combine multiple multiple composable function and place in a different way so let's try to extend this sample right now calendar date is composable functions which we discussed before which we discussed before and this function will render only one item and we can use a repeat function from Kotlin repeat function from Kotlin and we can wrap it into row layout and as a result we can have we can have seven days of a week of course right now date is fully the same on all these items but main idea of this life is so it is to show power when we combine in jet jet pack composed with a cotton possibility even such simple as a for for loops and later on we have one weeks and we can we can read how we can render multiple calendar weeks in a in a column with a column layout and wrap it into calendar as a result we can pretty easy render we can pretty easy render our whole month of four weeks so right now we discussed a bit how we can create composable function but of course composable function should be should we are connected with activity because at the activity its main entry point of the application and speaking about activity of course we can just attach to activity or to the fragment and here you can have basic samples how we can attach it for activity we can just use set context function and add composable function pretty similar case we have full fragment it's a bit complicated later on we will talk about routing and we'll discuss a bit more possibilities which we have with jetpack campus so we should understand that composable function it's something fully different which we have in a view framework because when we speak about your framework very often we had we used function like set visibility and well sometimes we had situation when in 10 15 places we just use that visibility and of course it was complicated it was super easy to have a some mistake but right now composable function will recompose itself when data changed but if you want to have possibility for provide possibility to jetpack compose for a read composition we should use a trackable types and data should be wrapped in trackable side and we have two trackable types its model and model list so let's start with the model a model it's a simple annotation we generate additional code under the hood and so we can create usual data class and our counter model class will store inside count and this count and this counter object will be passed into our counter composable function and later on when data will change as example when you press plus or minus button data in this type will change composed red-flags dysfunction and composable function will be recreated it means it for us using compose the most important if is thinking about data when i think only about data compose will do of stuff for us and model list is used when we I want to track list of data because a with model we can track only one object and with model we can track multiple we can track changes in this object we can chair we can also track amount of such object in list and it's very important because model help us to solve a lot of problem with which we have with jetpack compose it's not a problem it's like a solution because model class it's really a solution for almost everything in that Park compose so let's talk a bit about layout because layouts it's something very important when we design our UI right now we have a 4 different layouts it's row column stack and constraint layout so if we combine row and columns we will have something similar to the linear layout sted allow allow us to to locate elements based on gravity and constraint layout it's it's it's probably right now a bit simplified version of constraint layout because it's still in Developer Preview so let's talk about row as you can see all that Park compose code looks like a DSL domain-specific language and in this case we will place two composable functions because image it and that is also composable functions in a row and we should rub or rub image and text with zero function if we want to place place them in a column we should replace row annotation to the color of course like with like wiscons are like with linear layout with our we can have row inside column etc and let's move to the next structure it's a stack and stack a for stack we need to always use gravity it's really powerful tool about we should understand that we never will use only stack because it will be super complicated as example if you try to place a lotta text in the middle of a screen all over the step box because in this case it's each have predefined size probably it will over overlap with an image and of course it's a problem but if we combine few layout it will solve this problem and we will have powerful of the step layout so speaking about constraint layout it's what we have right now and this constraint layout we should understand it everything split it into two different groups first of all it's constraint set and here we have all our constraints and our implementation in our implementation and we can use other composable function like images text buttons and much more and we should use and we should use modifier and modifier and tech modifier tech modifier will link our constraint and the current composable function and alt tag can be linked by string and I recommend to extract it to them to the constant and when we build and we'll build an application we will talk about it with additional details and here it's basic application or which we will try to build of course with some not whole application just part of it because this whole application is pretty big and we have not too much time however you can check a linker for github repository its built-in I trying to regularly update and add more and more feature to this project and this application is pretty basic for Android it's used master detail Flo and I chose such application because when we think about any framework we think about basic scenario and if you open many Android application they will look more or less similar and for sure we'll use master/detail flow so this application also supports different themes and different types of the card it was added just to increase complexity and complexity is needed when we want to learn houses houses framework work and if this framework powerful enough for our uses for our everyday work so let's start with a simple with a simple list item for building list item we need to create a model as you can see it's a simple data class with model annotation and let's create composable function with from with one parameter and this parameter will be object of our model class so I propose to I propose to build different composable functions with different approaches and for this approach I propose to use row and column layout and for the next next screen we will use constraint layout I think it just provides more more understanding how its work the first step which I want to go is to split hull our grow into three basic components first component is an icon and it can be 72 - 72 DP the next component should use all available space between between our icon and favorite composable function for our for it as a linear layout we can also use weight and place it between two different boxes of course boxes is not really needed in this case but I think it will be great it will be great a starting point the next star of the next part it's let's try to build our UI component and for for UI component I mean icon so we have icon and icon on top of circle first of all we need to build a circle and for it we can use familiar for us surface composable function and we can use shape a circle with additional products it means that hi and width of this function is 72 DP and if we extract 16 DP we will have image 40 to 40 DB and here we can use image function with painter and this painter will use link which we have all these icons which we use all these icons which we use in available in project if you downloaded from our github you will have all these icons right now it's pretty basic implementation however later all I plan add to this project much more much more features and attach back to it so the next the next component we should still wish to use box because which are we don't have really predefined size of it we want to use weight property so to spend all available places between icon and favorite state and inside this box we can use column with title and some list of ingredients and very important now here and very powerful that we can use modifier draw opacity for the ingredients list because when we will talk about theming we should provide video we should provide a theme for different colors for different themes and of course in both of these cases we can use black color but for ingredient we use black color plus opacity and it doesn't look like a pure black color and the last part is our favorite Python and I propose to use as it's a toggleable object which can have two different states at audible object is the global Fulks function its predefined function in jetpack compose framework and we can use it and based on the state we can use different items different items so based on these icons or we can use two different icons for favorite and not favorite and toggleable features will help us just to switch the state of this eye from this icon and when we know resource ID we can just pass it to the image for rendering but if we try to place everything in one composable function it will be pretty long and completely unmaintainable so what I propose is to try to split this function into into small function and have something more maintainable every unreadable and as and finally we can we can create few additional functions when we can place items in a row it will be lager additional information with title and ingredient inside and a favorite and of course speaking about additional information it's real place all children in a column and based on this pretty short implementation I think it's pretty readable and if you know that something wrong with your logo you should go to the logo composable function and just fix it in one place and don't think about reading and maintaining whole staff of a whole whole pretty big composable function so right now we have all our items what is our next step our next step is to put many items together and for for creating a list of items we can use adapter list which has mandatory parameter it's a data its list of any data which we want to show and later on we can use our function and we can put our our coffee drink list item a function int as as a composable parameter it's usually the last parameter and if you want to make it clickable obesity and we should wrap it into clickable composable function another really cool thing about my defiers that when we use modifier and you want to add ripple animation you can just use ripple modifier and that all what you need to do for having ripple modifier but if you take a look at this list it's for me personally it's missing a divider between all these items so let's try to create another composable function with the divider and when we we need a divider function plus modifier in general modifier it's something super powerful in jetpack compose because we have modifier for a lot of stuff for a positive for drawing background for fighting for side of our size for weight for for many more stuff and modifier is super and super important and it's really great to know many modifiers so but if you want to place our divider below our item we can use column layout and as you can see we can place in column layout divider below the list and after each element we will have a divider so right now we have list of items and the next step is to add top if to have tool bar toolbar familiar for us from from traditional approach of built-in UI and in jetpack Campos we have up bar and one of up bar implementation its top up bar which is for us will be replacing like a toolbar and we have few different implementation of top up bar but for us we will use one of them with with title and actions and really good and power of jetpack Campos it's that it's super generic if we take a look at title title doesn't have a string as a type as a type for provided title in inside it has composable function for compile if it's composable function we can customize it I think it's if you try to have custom custom layout for toolbar it's it's a bit trickier and whisk and with jetpack compose it's super generic and it's super you can create one composable function and put it into another composable function and if you want to have some actions or menu items we should add them to the action to the actions parameter in this case we have only one action button icon button but we can have many of them and I want to show a bit a little bit trickier example and here all I want to propose introduce status data clause and the status data class will be like switch between us who are between normal list item and detailed list item and of course we will have two different items when we have a short list item we can have icon of a detailed list item in up to top a bar when we have detailed lists with detailed items we can have item of short run and it's super easy to implement because we can use Kotlin as a programming language and in this case we can just use if and checks and check current our current failure and current state of each detail is detailed item value and based on it we can we can load proper icons as you can see we have additional benefits by merging UI UI plus hour of programming language and the next screen I want to propose to build with a constraint layout as we discussed before for constraint layout we have two blocks first blocks each contains a course we can use modifier and much more options but it constraint layout it's it's something and it's something which is mandatory for constraint layout so first of all first of all we need I propose to start with creating constants for tags because we should we should connect our constraint set and our our building blocks so when we created a constant we should create a object object for four constraints and when we created as many object is we need as many object as many UI items which we have on the screen the next step is to add this attach our constraint to the to our composable function and when it's done we can do it also with modifier and when it's done we can use we can add our implementation for each for each component as example in this case surface will have left top right and bottom strains and all this constraint will be connected to spirit of course we can have we can connect them with not only with parents with any other are constrained but in this example I just want to show you that we have such possibility so I want to show a bit more trigger example and which also demonstrate a possibility merging jetpack compose and cotton as a programming language so let's strike a let great simple a substring data class which has two parameters its student and start position and under the hood we can easily calculate end position later on we can get a later on we can get named substring and another coffee names substrings and later on we can create annotated string annotated drink allow us to customize our test and for customizing our text first of all we should add our text to the annotated string and later on we can use styles and for applying styles we need to now start and end position that the reason why do we need a substring database and later on combining them we can we can have something which we have on the screen that coffee are the name of coffee in description have one style but a list of other coffees or coffee drinks will be will be have italic and underline style it also right now possible and you should do it only in your component you shouldn't do it in different places because right now if you want to have something like this we should define XML in one place or we should we should we should do some recalculation and style changing in our application code and right now everything you can have only in one component so let's take a look at routine because routine it's super important part of any application and he'll and here we have few options for building come for building application with jetpack compose so first option is to have one jetpack compose screen into one activity and if you want to navigate between this activity activities we we need to use start activity and us go with traditional approach you also can apple can change a business approach and apply to different fragments when everything is different fragment so another approach more natural I think afforded a compose it's also to use cross fade function cross fade function allow us to switch with small animations between two different composable function and in this case how our screen it can be composable function but if you want to use if you want to use our half switch between two different composable function we should create another model object and this model object will have current screen and screen its composable function in our T's and later on we can define many screens in one place and create a simple function which will navigate in this case Upstate's will be something more or less global and the last step is to use cross fade function and it will be another composable function and what what it really calls it it's also will be recomposed when data will be changed in upstate that's why I told that model is super powerful how a whole conception with with model and threat about object in composable function that if we only use composer if we change the data hole composable function we the red rose it's super powerful and right now we need to think only about data so let's talk about theming this application support support to different themes it's light and dark and let's take a look and talk a bit how we can implement it so whole idea of jetpack campus speaking about these themes it's based on material design guideline if you open our material design guideline you can see a lot of predefined colors its primary secondary background surface and much more and all these colors who can be split it into two different categories first category its color of the color of the composable function it's if you have composable function this function can have some a background or outline or text color etc and all colors of which start with on connected with text and all these items all these items will be as example on primary means that it will be rendered on on top of primary primary color in this case we can easily easily understand about which colors we understand because everything would start with on more or less connected with text and when we created when we created a such color palette we of course we can create multiple of them and later on all this car we have material theme composable function and this composable function is usually its route placed in the route composable function however if we use multiple preview functions you should also you should also a place in place it in preview function because preview function should use the same theme as your whole application in in this case if you want to understand which color to use of course if we have more than two and these two not connected with a global settings of our device we can use another model clause or if we want to synchronize it risk if you want to synchronize it with global setting of device we can use each system in dark theme and using basic if we can and we can choose color palette as in this example and later on put it into into the colors in this case we can have we can apply theme into our composable function preview function or even for whole application but sometimes when we differ but sometimes when we define as example typography and we will talk about it later it's connected with font but we want to customize it and have custom color we can use just got the object because our typography and cover team returns version of textile and sometimes we want to combine few of them and in this case we can use copy function and customized additional parameter we just need it for us so let's go to typography which is also super important topic I very often had a situation when sometimes in a be in a pretty big project phone should be applied to each component for each edit text or text view as example and when often it's super easy to forget apply just one one UI component and new approach with jetpack compose I think a bit more generic in this case first of all we need to define all for all fonts which we have an application and we should create a font family object and add each font for each font which would define a resource ID of course it should be added to resources weight of this world which usually such information can be found on the website when you don't lower your font and style it can be normal or italic when we define it the next big step is to create typography object speaking about a poverty object we have your different predefined set forth in poverty it can be from h1 to h5 body 1 and body 2 button and much more and all these names defined in material design guidelines and right now it's super cool that developers and and designers have only one source of true which is material design guidelines and when when developers and designers speak about as example h2 that both of them understand understand it in the same way and from my perspective it helps us to solve a lot of problems so how can we apply our typography we can apply them to material theme composable function together with colors also to preview colors and later on we can just use it as a style material theme dot typography dot h v is the same as with color and if you want to merge them I mean typography in colors we can do it with copy function so of course it's only small part of Jetpack compose but we have much more functionalities like tasting animation and I try to I tried to add the most interesting question which were often people have when we speak about that back compose to this section and try to cover it a bit so resources in Android it's super powerful mechanism we can use it for us example translations and much more of course we can use it with jet pack compost because I think everyone agrees that it's super powerful mechanism for storing for storing colors right now we can store colors probably later on its way we will try to avoid it but string string images maybe some additional stuff like XML file and much more of course we can use them both of this function under the hood use context ambient which provide context and inside this application under the hood compose provide context and and based on this context we can work with as examples drink resources right to left it's it's also supported but I think in the future it will be supported even better because your releases ago it wasn't supported at all and right now we have such possibilities because it's a Developer Preview and we have new releases every two weeks and for for each release we have more and more features the next big thing it's testing if we try to analyze screen which we have with jetpack ampoules using using layout inspector we can see only one view it's called composable view because all composable code render to the canvas and of course for espresso it's it's one big issue because press work based on view hierarchy and here it will be super complicated to find anything connected with view hierarchy and for it together with jetpack compose as a separate library provided right now small small test framework and in this framework we can use composable rule we can create a composable function like launch screen with some parameters and with also a few more asserts like assert is displayed assert is hidden and much more and we can find text by find component by text as example in this case and we can we can write even right now some small UI tests and we will have interoperability right now it's not available but in future we will have generate a view annotation and with together with this generic view annotation we when we will use this annotation here in compilation our composable function will be converted to the to the whole class with to the whole class for the view framework and it will be generated a view which can be used in XML file and of course in I got information about it I found in a field in Google Google i/o one of Google i/o talks and it will be provided in future so and right now we have a lot of components which was created from scratch as example adapter released layouts text button and much more however till 2 UI components wouldn't be created from scratch its component for entering map and for enduring a web pages because right now everything should be should be rendered on canvas and of course when we use maps for us it's very important to use OpenGL etc and for maps and views we will use native components with some wrappers for jetpack compost which will simplify work with it and right now we have whole library for animations it has from release to release more and more features and even right now we can create pretty great animations and the biggest node that it right now it's in Developer Preview I don't recommend use it for production right now because during if you take a look at this github repository you can find that sometimes between changes you need to write pretty big amount of code because what's in easiest way one of composable function or modifier will be marked as deprecated but sometimes you have the situation when component was just moved to another package or renamed or was extracted to separate library and your code just not compatible fortunately you always can ask such questions and of course you can read release notes in addition to it you have officials like channel object path temples and you always can can ask question on this channel and that's that's all my story about what compose about how can we how can we implement it back compose with how can we implement Android application with jetpack compose if you if you want if you have any questions or want to read more about Android development in that Park compose I encourage you visit my blog visit Twitter and if you have any question if you have any question just like we know I like me to like me to share lean of link was already shared and I hope we have some questions thank you saying you for a feedback so let's take a look and let's take a look to our questions yeah I start reading I start reading question and first question can can you move intercom pose great really only part of the screen a single custom view or does the whole activity fragment and content need to be composable and interrupted question it's a bit tricky because when we will have interoperability and this example we will convert we well we can have the situation when we can write composable function and convert this composable function into the view framework it will be a bit simpler but right now if you want to move to jetpack compose you should you should create fully in euro composable function for the whole screen and later on using set content method applies this composable function to the screen and the next question how do you feel about building and maintaining complex layout comparing to XML is it harder easier or simpler for me personally it's it's simpler I really like this approach because first of all right now we have everything everything in one place because very often very often we had a situation when part of implementation we have in XML file and another part of implementation we have in our Java or Coughlin's code and right now we have we have all in one place we can create pretty small composable function which will be easy to maintain as an example as I showed in presentation when we built a divider and divider had the same space as icon and if we create a constant for it in inside the component we can easily use this constant into a few different places the same with composable function if it's something super generic like favorite like favorite composable function you can use it in many different places yes let's go to the next question where should we create a seams in style with jetpack compose it should be created as a separate file you can you can check you can check link in this hub repository I personally created it in near activity of course of course you can place it in in any place because later on you will use import for heaven access to it I personally extracted it in two different places in two different in two different quadrant file and in the Scotland file I defined a few I defined few themes for the dark and light colors so let's move to the next question does that Parker post have limitation in your coffee detail view how to introduce a parallax effect at its crawl like Z provided by coordinator layout as their really cool news which was announced probably a week ago that for jetpack compose will be created ideally they want to create I mean developers who released jetpack composed from Google I want to create this fully featured constraint layout and motion layout and with motion layout it's super easy to implement animations for for scrolling and much more animations right now it's on pretty early stage because Developer Preview is something like pre-alpha and speaking about pre-alpha right now right now it can be a bit more complicated however you have transaction and animation and you can implement it but in practice in future it will be much simpler because powerful - like fully feature constraint layout and motion layout will be supported by jetpack compose how can we use different dimension resources files in composable in practice in practice why in android we used add dimension resources first of all for extracting our constants and right now we can move these constants into into Coughlin's file inside components or have a separate place for them and another one for supporting different devices and speaking about support in different devices right now we don't have a solution for it however we have we have all information about device because it's still Android it still Android infrastructure and we get all the required information on all the required information from the from the from from the Android ecosystem and just use it and create some function for understand if it's tablet or a tablet as example when using a model annotation and changing the models value how can provide that the whole UI will be rebuilt the really cool stuff that it's a tractable object and if it's read about object just by compose know what was changed and you inject a compose change only a part of UI which should be changed all other stuff wouldn't be redraw the only part we changed based on data will be will be redraw and it's simplified our life simplified our life a lot the next question can we attached a with espresso and activity created with composed yes and now yes we can test activities and now we cannot really test that but Campos composable function because speaking about that but Campos everything rendered into the canvas and right now espresso espresso testing espresso testing based on espresso testing based on view hierarchy and right now we don't really have a view hierarchy but as I showed as I showed a few slides we have few slides ago we have a special a special component for for achievement for achieving this UI testing and it's working also pretty well that compose work with accessibility right now as I know composed compose doesn't work with accessibility but you should remember that it's pre-alpha I think it's not the most important the most important topic for a developer team right now as I know it's not working right now but I think her may be inferior and religious we can have such possibilities so the next question a box row a box row and column it's difficult to see how this approach is compatible with constraint and other view groups the box box its row and column it's layout it's Italy out and this layout help us to place elements in role or in column however box it's something like something like a wrapper and inside this wrapper we can place much more much more are composable much more composable function yeah it's the main difference that row and column it's it's a layout and it's a composable function which can have items inside usually when you use box inside box you will usually use row row or column or different layout what impact on app size and compile time if any of course we will have impact on application size right now it's really hard to say how big this impact because it's depend its depend on libraries which will be included into your project because as example if you don't need animation if you don't need animation you can just avoid animal you can just avoid it in this library however speaking about compile time I didn't so big difference however is a pretty important news here is that we have a preview function we have a preview annotation and in your Android studio Google have already rendered whole composable function it means that you'll if you add some changes you don't need to install install your application on device yes and yeah compile time a bit bigger but we don't need it so often f we need it right now so let's move to the next question when building a UI the claw the classic way the layout preview is is a useful tool is there any equivalent for building with compose right now we don't have equivalent we should write this code manually however maybe in future we will have we will have something like layout editor speaking about layout preview we have a preview annotation which provide which helped us to render our composable function yes for navigation have you tried it with a navigation component no I didn't try and I say no right now it's not working but developer team announced that it will be fully fully compatible with fully compatible with a navigation component and it will be additional it it will be additional version which compatible with navigation component and it means that probably we will have situation when we have multiple composable function and under the hood under the hood they used maybe fragment maybe something else just to render just to render such stuff today at 5 we also have we also have discussion with one of developer from Google team and I think it will be great question how it will be implemented it's like any predefined view like navbar yes we have multiple views it's up bar it's called a bar and we have few implementation top a bar like a tool like a toolbar and enough and a bottom alpha bar if I remember correctly it's something like navigation bar the next question if everything is drawn in canvas how you can do animation our wheels portion of the screen because all your animation connected with composable functions and inside this composable function you can you can provide animation even right now you can find a super amazing animation building with with jetpack compose I personally have no experience with flattered but if talking with other other flatten flattered developers they told that it's pretty similar to what we have or we haven't flattered but here it's rendered on converse but animation animation can be applied to composable function do beneath android context when you write unit tests it's it really depends about what type of a test we speak about because well if it has business logic of course we don't need to use Android dependency and context if we use if you want to test our composable function I personally didn't try it but I think I think if we need context inside composable function inside testing composable function we can use a context ambient and context ambient provide access to access to contacts inside composable function I think that's all do we have do we have any more questions thank you everyone thank you everyone who participated I hope it was helpful if you have any questions just let me know and I will try to I will try to answer all your questions thank you

Channel: Android Makers

Views: 1,932

Rating: 4.826087 out of 5

Keywords: Android Makers, Android Makers 2020, Android Makers 20, Droidcon, Droidcon Paris, Droidcon France, Android Dev, Android Developer, Android Event, Android Conference, Android Conf, Android Keynote, Android, Paris, 2020, Virtual, Virtual Android Makers

Id: qoE34lpyo_Q

Length: 65min 25sec (3925 seconds)

Published: Wed Jun 17 2020