 Hello, I am Imran from Uncommon Hyderabad. How do I turn on the notes man? Where is my mouse? Oh, it's on the side. Okay, all right. Hi, Imran, I am from Uncommon Hyderabad. I am a mobile engineer at Uncommon. I work on Android. I've been working on Android for the past five years. And I've recently started working on iOS as well. I've also done a part, I think three, four months on React Native as well. So I'll be talking about responsive UI with constraint and motion layout. And about Uncommon Hyderabad. We work on mobile apps, Android Native, iOS Native, React Native, and back end we have Go and Ruby on Rails. We have web frontend as well. Okay, so I'll showcase what I've been working in the past one year. I've been working with a team of insiders for their product, inside a live, which is a live interactive app. The one on the left is iOS and this is Android. I am showing you this because this iOS is using auto layout and Android is using constraint layout. Both the platforms share the same ideologies and same UI creation and UX creation because both are based on constraints. So moving on, I'll be talking about basic layouts of Android. I'll just briefly go through them and then briefly talk about constraint layout. And then we'll look into animations using constraint layout and then briefly talk about motion layout. I wouldn't want to go deeper into any of these aspects but I would just want to give you a hint and get your interest peaked about constraint layout. I have, how many Android developers do we have here? iOS and anybody worked with constraint layout before? Cool, okay. So generally we use these layouts for Android. Something happened up there but fine. Okay, so we have frame layout which can take only one child, one child view and then we have linear layout which can stack views vertically or horizontally. And then we have relative layout which stacks views based on the absolute positioning of each view it has. So these layouts came in as part of initial Android development itself and then later on as the challenges of the mobile industry increased and there were new layouts coming in, new design concepts were coming in. Then Android system came up with a co-ordinator layout that would actually allow you to fit the app in the safe area between from the status bar and the bottom navigation. And then there is bottom sheet view which is used to show your share sheets and then there is drawer layout that will allow you to add a side bar from left or right that will actually show your menu. And then there is app bar layout which will give you a toolbar where you can add and then you can also add a collapsing toolbar which will actually enable you to do that parallax effect. And then there was percentage layout which is duplicated now. With percentage layout you can actually take the width of the view group and then put your views based on the percentage you can say 50%, 50% and something like that. So now the challenges with these layouts are let's say even if you take one screen in your device on Android you would have to add drawer layout then you would have to add a bottom sheet view then a bottom navigation view then you had a toolbar, then you had an app bar. So all these was adding on to the view stack and then increasing the complexity of the whole layout. Now if you take that view hierarchy now tomorrow someone comes and tells you that okay we have to do it in landscape. Now you take all of it and then convert it into landscape. Now it's going to be pain and then on top of that there are going to be a lot of layout computations that will happen because of some changes like let's say you have your list view and then you scroll and then you have other layouts that will act inside the list view. So all these complications and not to forget there will be business requirements analytics, Google analytics, clever tap business people look at all those analytics and they decide that this button is useless. We have to remove that button we have to replace it with something else. That will happen. Nothing is finalized, that will happen and then there will be UI, UX changes during the time of development, before the development and after the development. So things will continue to happen and imagine the hierarchy you already have of the layouts you created with so much hard work. You added frame layout and then inside you added linear layout then you added a relative layout then you did all this and then oh this corner okay it's empty we need to put something there something like that will come in. So you have to keep that in mind as well and then there is maintenance after you have done your launch everything is fine you had a couple of drinks and then everything will start falling apart something has to change there so how can we overcome this? How do we address this problem? These problems cannot be solved you can just make your life better because changes will happen as a developer you have to adapt to changes you have to listen to people you are between the customer the client, the customer, the user and the developers the back end developers and all the other team business team you are that bridge there so you have to adapt to those changes you have to take care of those so now all you can do is you can automate your life and make your life simple so now two years ago android came up with the concept of constraint layout similarly to constraint layout there was a concept in iOS as well called auto layout auto layout and constraint layout are similar they don't differentiate in a lot of aspects no I don't think they don't differentiate at all we actually took the learnings from constraint layout on android and then implemented them on iOS as well so I mean we have been talking about react native and flutter and then I am suddenly talking about constraint layout and auto layout okay so the advantages of constraint layout is flat view hierarchy the layouts that I mentioned linear layout, frame layout and relative layout all these layouts now you can decide in one layout if you want part of the layout to be linear layout or part of the layout to be a relative layout you can adjust the views according to the design and it's very very fast and simple to create layouts as compared to the previous layout creations I mean you won't have to have a lot of iterations to those layouts and also when you are converting your layout from portrait to landscape all you have to do is adjust those constraints and everything is in place and then there is scene changes since it's all constraints and it's just one layout or it could be multiple constraint layouts you can define a scene you can say that okay this is a scene which has no internet this is a screen which has 404 error and this is a screen which has the actual data so you can transition between different screens I will show you a demo of a change in a moment okay so constraint layouts these are the basics of constraint layout I will just walk you through them there is a video on constraint layout last year at Fragments okay so constraint layout allows you to set constraints and you can align your view to whichever direction you want you can align it to left, right, top, bottom or to any other view and I just picked a few aspects to just talk about constraint layout but there are several more okay and then there is image aspect ratio so that was a one is to one dimension ratio and then I changed it to 16 is to 9 and this is recorded while I was editing in the editor layout okay this is all live editing so this was recorded then and probably that is why the video might be a little dry so and then there is base aligning text you can align your views to the base of the text and there is guideline you can use the guideline to adjust a part of the screen to be completely different and then you can animate moving the guideline then there is a linear layout kind of concept in constraint layout but far more powerful you can pack your views spread them or spread inside this is similar to the flexbox justify content or align items that we use okay so these are a few things that you can do in linear layout sorry in constraint layout there are more things like barrier and I think barrier then we will go on and look at them later okay so alright you have these constraint layouts now you can we can remove a bunch of layouts like we can remove the linear layout we can remove frame layout we can remove linear layout we can remove the app bar layout or we can remove the bottom view we can all put them in constraint layout now what do we do with those constraints now we we put them all in one view we flatten the view now what do we do with it so the advantage of that is you can actually set one state this is a default state of the view and I can change the constraints I can change the constraint and expand the view so what I can do is what I did here was I just remove the top constraint of the bottom red view and then added a bottom bottom constraint to be bottom of the parent now it's not just changing the constraints we can animate changing those constraints all you have to do is this you have a default constraint what you need to do is add a transition in between before applying those constraints you change the constraint set you change from the default set to an expanded set and then you have to apply a transition in between it will just animate that view and then it will auto adjust the constraints of the top view as well and then you can convert back to the default the default constraint set and that will animate back as well so all we did was add this transition to and apply it to that constraint main layout okay so now moving on to motion layout motion layout is a subclass of constraint layout it's it's completely flat the motion layout was introduced to to remove all the transitions the property animations and all the other animations that we have we would need to use in a constraint layout motion layout would actually allow you to define your animation a scene change from one scene to another scene in xml and when you apply that scene it will automatically animate that scene and while that animation is happening you can do several other things you can actually add a rotation animation in between or you can that is called a keyframe animations while you are animating you can actually get hold of the frame and then do other sort of animations on it and then this motion layout there is a restriction it can work only on its direct children it won't work on children but here is an example of motion layout so this is a youtube view which is recreated in motion layout so while it was animating the view on top is being shown on the side so this was picked up from constraint layout examples please take a look at those examples really really good so motion layout has a start and an end during the transition from start to end there are keyframe animations you can initiate the animation by on click or by swiping I mean when you are swiping you can notify the motion layout that okay you can start now you can actually define that in XML as well I am not going to go more into that code because it is going to be in XML now finally how to choose your layout okay so this is the question we had when we started working on our project as well we our constraint layout was in beta during that time a year ago and then I just came out of react native and I enjoyed the way and the ease of creating layouts in react native how fast you could do it and then hot reloading of course we were trying to look to reduce the number of XML files and reduce the number of reduce give an opportunity to ourselves to edit the XML files as easy as we can so anyway if it is a single child you will go for a frame layout if you have a vertical or horizontal children you should use a constraint layout you could actually use a linear layout but it is advisable you use a constraint layout which would give you the added advantage of animations as the UX designers or business requirements come in and they say that okay this linear layout needs text at the bottom then you can just add one text and then say bottom constraint and that will be done you don't have to deal with it again if there are relative children like the design is completely haphazard then like half of the view here half of the view there something like that then you can use constraint layout if you need a view that will animate from a basic view to a detail view or animate swipe you could use a motion layout it has the same properties as constraint layout and this is the subclass here are a few resources google samples is one of the major resources i would like you to check out and it's very well documented and they have really good examples one which i showed for motion layout right now and then there is constraint layout you can check it out thank you very much are there any questions that question we will put it for later obvious or uncommon it isn't obvious man okay yeah done okay thank you guys