Fundamentals of Compose Layouts and Modifiers - MAD Skills

layouts and modifiers are the core components of compose UI which enable you to make stunning and functional apps with a variety of provided ready-to-use apis in this video we're going to learn all there is about compose layouts and modifiers by taking a more Hands-On approach and use them to build a mini pixelated game called Android aliens [Music] compose you use composable functions to emit portions of your UI but layouts are the ones that specify the precise Arrangement and alignment of those elements therefore layouts whether you use the ones composed provides for free or build your own custom ones are a vital part of the compose world you can look at them as composed coordinators dictating the structure of other composables nested within in fact we'll see later in the series that almost everything in compose UI is a layout but we'll get to that later on now if you've used compose before and kudos for you if you have you must have noticed how important and crucial modifiers are to this framework they allow you to decorate and augment composables molding them the way you need them to be and enabling them to do what you need them to do by chaining as many modifiers as you like you can change the composable size layout behavior and appearance add additional information like accessibility labels make it clickable scrollable draggable or zoomable and many more okay so let's roll up our sleeves and build a fun game screen to understand how layouts and modifiers work together we'll start off by using these two Android alien ships and gradually build up to a screenshot of the game the reusable Android alien composable looks like this we're just loading up an image resource then calling this composables twice we add a red and green alien to the parent Android aliens to two points here are modifiers we're building simple composables like these first we set a modifier parameter with the default argument as per compose API best practices second we pass a modifier chain consisting of two very common modifiers to set the size and the padding of the image now just reading this code snippet we might want and expect composed to lay out these children composables in a specific order however when we run in we just see one element on the screen the red ship seems to be missing to debug this let's increase the size of the red ship now the red ship seems a bit shy and is hiding behind the green one meaning these two composables are in fact overlapping each other as they're missing specific instructions on how to be laid out compost can do a lot of things but it cannot read your mind this tells us that our ships need some structure and formation and that is precisely what composed layouts do rather than having our alien ships completely overlapping each other we want them to be laid out one next to each other a very common use case for UI elements and Android apps in general we'd like our ships to be positioned side by side as well as one above the other now to do this compose offers row and column layout for laying out elements horizontally and vertically respectively let's first move our two alien ships inside a row to lay them out in a horizontal formation conversely to arrange items vertically wrap your ships in a column composable now this looks fine but we want to tweak their positioning a bit more we want the spaceships to be aligned and glued to a specific point of the screen like the top Center in our case this means we need to align and arrange these ships accordingly while still keeping them in row and column formations to specify such precise positioning of elements within these layouts you can use arrangements and alignments these properties instruct layouts on where exactly on the screen to position its children meaning if you wanted your nested chips to be glued to the top center of the parent layout you set the following however when we run the app we can still see our alien ships as they were previously we can't glue them to the corner because layouts like column and row wrap around the size of its children and they don't go beyond that so we cannot see the effects of the set arrangements and alignments now to fix that we need to expand the layouts across the entire available size so we will use the fill Max size modifier which has a very self-explanatory name that does the trick notice how column uses a vertical Arrangement and horizontal alignment whereas row accepts the horizontal Arrangement and the vertical alignment why is that let's explain the difference between the two in more detail Arrangement refers to how the layout children are laid out on the main axis horizontal for row and vertical for column an alignment does the same but on the cross axis vertical Furrow and horizontal for column and compose there's a number of alignment and Arrangement properties to choose from to space out or position your composables with take a look at the documentation and explore all options that might suit your design requirements aligning and arranging components and layouts in such a way ensures that the same rules are applied to all children but what happens when we want a rogue Rebellion ship to break away from the imposed rules to achieve this compose offers the Align modifier to be used on a specific child composable that you wish to position individually defying the rules enforced by the parent let's continue with our game build up and see what happens when a big alien Mothership enters the arena as the name hints we want the mothership to be larger than the rest of its alien subjects now in this alien row formation the regular ship should occupy the minimal width they need to render correctly and the mothership should only occupy the remaining width of the row you can manually change the size of just one element but we want the size to be relative to the rest of the elements rather than a static fixed value for this column and row composables offer the weight modifier now the mothership has completely hogged the game Space not assigning weights to other elements means that they would only occupy the width or height and column and the remaining width is equally distributed to the elements which have assigned weights but what if we want other regular ships to occupy precisely one quarter of the width and the mother ship two quarters in that case we can assign weights in the following manner one for regular spaceships and two for the queen bee an important feature of our game is to let you know when it's game over and display this overlay text on top of the alien formation in compose you can use the box layout as a quick way of putting elements on top of each other or overlapping them following the order the composables are executed in similarly to our previous layouts the box composable also offers a way of instructing exactly where to lay out your nested children the difference here is that there's no differentiation between horizontal and vertical instead they're merged into one content alignment in this code snippet we used alignment center to align child elements in the center however you could also use any of the following 2D alignments this makes the box layout very useful when you wish to position the nested children pretty much wherever you want it if the game is indeed over your main game screen might look nicer with an overlaid transparent background to make it even more apparent that you simply cannot play anymore to have a transparent spacer expand across the entire available space box layout provides a handy match parent size modifier that allows a child element to match the already defined size of the containing box keep in mind however that this element does not take part in defining the final size of the Box parent it only matches it in contrast the film Max size will take part in defining the final size of the box you might notice that match parent size only works within a box composable why and how this leads us to a very important modifier Concept in compose scope safety in compose there are modifiers that only make sense when applied to Children of certain composables composing forces this by means of custom Scopes This Is How match parent size is only available in box scope and weight and row scope and column scope this prevents you from adding modifiers that won't work in other places and saves you time from trial and error our minigame could definitely benefit from some information on the game progress while we play like a header with the current score and lives left and a button at the bottom to start or pause the game which wrap the rest of the game content in between this might remind you of having something like a top and a bottom bar where a header and button would be placed in for these types of common UI patterns in Android compose offers a versatile portfolio of composables to use and so we come to material components depakompose offers an implementation of material design a comprehensive design system for creating digital interfaces material components such as buttons cards switches as well as layouts like scaffold are available as composable functions together they represent interactive building blocks for creating a user interface there are many to choose from so make sure to check out the compose material API reference for details in our case of adding a header as a top and a button as the Bottom bar compose that material provide the scaffold layout which contains slots for various components to be laid out into common screen patterns all that's left for us is now to First add our info header composable at the top and then the Bottom bar as well for the Bottom bar we're using another very useful material component a button wrapped around the nested text composable as its content but since the scaffold composable parameters accept generic composable lambdas you can pass in any type of a composable you'd like this open slotted concept is called slot API and is heavily used across compose scaffold also accepts Floating Action buttons snack bars and many other customization options for learning more about the entire material components portfolio check out the material components documentation fantastic our game is progressing really well but as with every game our compose tutorial also increases the difficulty with each level so let's move on to the next challenge so far we've had a very limited amount of alien ships on the screen in a simple SVG form but what if we had hundreds or thousands even and what if they are animated the Slender Invasion could cause some serious Jank in that case loading up all of your content at once from the back end especially if it contains large data sets Heavy images or videos can impact your app's performance What If instead you could load up all of your content on demand bit by bit when scrolling cuts into my personal favorites the lazy components and compose to build a quick lazy grid of green Android aliens we will use the lazy vertical grid composable lazy components rather a scrollable list of items as they become visible on the screen to help with your app's performance we also want a set fixed amount of columns on our grid and add 50 Android alien items to it well that was quick there's a number of additional lazy components to choose from lazy horizontal grid lazy column lazy row and most recently staggered grids lazy vertical stagger grid and lazy horizontal staggered grid lazy layouts are a massive and important compose area so to get the best and most exhaustive information on this API check out the following video where we explain everything there is to know about lazy layouts we have covered a lot today from the very Basics on composed layouts and modifiers and their Mutual collaboration what out of the box apis are offered material components and slot apis as well as how to add content on demand all that while building a mini game of Our Own stay tuned for the next episode where we cover phases of compose under the hood and of course don't forget to subscribe to the channel for regular updates foreign [Music]

Channel: Android Developers

Views: 86,223

Keywords: Introduction to compose layouts and modifiers, introduction to compose layouts, introduction to modifiers, compose layouts tutorial, modifiers tutorial, what is compose layouts, what are modifiers, how to use compose layouts, how to use modifiers, mad skills, modern android development, mad skills latest, android latest, android updates, android developer, android developers, developer, developers, android, google, Simona Stojanovic

Id: xc8nAcVvpxY

Length: 11min 55sec (715 seconds)

Published: Tue Jan 31 2023