hey everyone thank you so much for joining me today today i'm going to talk about one of the new feature offered in constraint layout which is flow so with flow you can completely avoid using linear layout now this could act as a replacement for it because with this you can achieve all sort of things which you are achieving with the linear layout all maintaining flat hierarchy so no new view group just a single view group and you get all the advantage of linear layout so before switching to flow first thing first is switch to the gradle and if you haven't updated the constraint layout version to 2.0 then to update it because this is where you get all the magic of motion layout which is a sub type of constraint layout using that you could add a lot of custom animations which is which could be a complex animation or just a simple animation but it's really easy now with motion layout we'll see it in the upcoming videos but today i'm going to talk more about flow switch back to xml so i have six buttons defined and i'm going to align all six buttons horizontally using flow because it's a virtual layout so it does require width and height you could either specify the width as match parent match constraint or the percentage based on your which just like a normal view here you can specify the width and height here and then align all those views just by passing the reference ids so i'm going to add all this button button one two three four five and six what is that okay so now we have six buttons aligned and one thing which you could see here is that button one and six they are partially visible and the reason behind is that we don't have a room f level to adjust this view so what it is doing is that it is pushing to towards the left and right so it's just trying to push it out of the screen to accommodate equal spacing among all the views and we can handle it using flow feature but before that let me assign a constraint to it i want this to the top of parent and start of parent one thing which you might have noticed is that i haven't specified the constraint for any of this views and the reason behind is flow because we have referenced all these views in the flow so whatever constraint we define for flow applies to all these views also okay so let's specify the orientation for the flow the default one is horizontal which you are seeing but the truncating part at the left and right is something which we really do not want so what should we do so what we can do is that we could use the frap mode we could use the wrap mode as none align and chain if you use none which is same as what you're seeing right now if you use a line it creates a new row and the view will start filling from the start of the row so by this way one to four has accommodated the space the equal space and then the view five five and six got started from the left of the row but if you want equal spacing between all of those views based on the views each row f level in each row then you could use chain so based on the number of views in each rows you try to assign equal space for them because we are talking about chains we also get features available in chain like the biases or the chain type so for chain type we need to specify the type of uh we we need to specify the style here it could be like horizontal style because we are using horizontal direction so we could use horizontal style as packed spread spread inside when we do this it gets applied for all the views in the flow but if we want this to be applied to the individual row so we could give it like first horizontal bias or style or we could give like the last horizontal style for first one i'm going to specify like a packed horizontal style and for the last i'm going to specify like spread inside so by this way you could see that it's a single view but it is offering multiple chain and we could use a different styles for this chains not just this because it's packed so i can also give a bias i could say like zero which will start it from the start of the screen okay sorry this is not last this is for the first horizontal bias so this will start from the left of the screen one will take it to the right so this is nothing but zero two hundred percent zero point two means twenty percent of the screen 0.5 i'll take the 50 of the screen which was the default one now not just this one we can also specify the number of views to be available in each row for that we have a max element wrap now i could say like just two now what does this mean is that only two views will be allowed it in each row okay to make it look better let me move the first horizontal style from pack to the spread which is the default one and the last one let me leave it as spread inside so now by this way you could see that max element number we have set it to 2 and because it's changed so it is automatically giving a proper spacing now if you set a visibility for any of this view as gone because it's changed understand how to adjust the views so i'm making the visibility for four to gone now you could see that if these views got aligned automatically six it's coming at the center because it's trying to give an equal spacing towards the left and right all because of the chain okay so now let's see about the gap if i do not want like this kind of spacing i want of packed views then okay so let me remove this spread inside okay so now let me try to give a style for this entire view let me give a horizontal style as packed and the moment i give this respect you would see that these views are touching each other there's no space available in between them earlier thing is like you could give either padding or margin but again you need to visit each views and then do it manually so how about an ability to adjust this fuse gap just from flow and flow of a stat with the flow gap you could give some sort of spacing which will be applicable for this views see if i make it 3 then you could see that this same consistent space is f is maintained across this fuse not just this because it act like a virtual layout so if you want to give a padding for it then this applies padding for the overall view and same applies for the margin also for background now we have an option either we could set a color [Music] either we could set a color or why to set even a color why not to a drawable so that is also possible you can set a drawable so all these things are really possible using flow and flow really offers all this great functionality by maintaining the flat hierarchy i hope this might be helpful for you to understand more about flow and if you haven't subscribed this channel then please do subscribe because i'm going to post more content on the new features of constraint layout and the motion layout in the upcoming videos thank you so much for joining me today