Responsive Design & Layouts with BuilderX


Hey what is up guys welcome to another BuilderX tutorial this tutorial will be focusing on responsive design and how you can incorporate that in your screens that you built using BuilderX conceptually, responsive design allows you to create your screens in a manner where they will adapt to the kind of screen or orentation that you are viewing it on such as tablets mobile phones, in portrait or landscape mode etc now this concept can be a little tricky to understand but hey thats what this tutorial is for right? so let’s get right into it we have already established that everything on the screen is a layer and responsive design essentially works on layers so for this example let us create a simple rectangle and use it as our layer on which we will incorporate such responsive design controls now, as soon as the rectangle is created you can notice that a bunch of options appear on the design panel on the right there are some absolute values some options with respect to width and height and this teeny tiny little graph here now this graph will be most helpful in creating responsive designs and this will be our sole focus for this tutorial for now let us just switch these off and we will get to each option one by one in due time now as these absolute values here indicate it is the position of the rectangle on the artboard and as I move the rectangle around the values change according to the position obviously now let us just say in a situation we want to be fixed at 50 pixels on the X axis from the left how do we do that? its simple. Go to this teeny tiny little graph here and click on the ‘fixed left’ option as soon as you activate it this distance will be fixed no matter how big or small the artboard gets as a quick demostration we move the artboard around and you can see that this distance right here remains fixed now we can do the same for the height as well its simple just click on ‘fix top’ and now once we start moving it you can see the rest of the sides do change respectively to the artboard but the top and the left are fixed now how exactly does this work so what has happened is that these two options have fixed the absolute value of the X and the Y axis from the left and the top side of this layer with respect to its parent which in this case is the artboard and no matter how the parent changes these values will remain fixed now say we turn it off what happens then you can notice that all sides start to move a bit why does that happen because as soon as we switch these off the values change to a certain percentage that is calculated on the backend and the layer this layer tries to maintain that percentage with respect to its parent which is again the artboard so as we move the artboard it is the percentage that is fixed and according to that percentage of course the size and the pixels change the value of the pixels change, they do change now lets talk about fixing width and height now these two options are layer wise lets say for excample you want to move the artboard you want to change the orientation of your screen but you want this rectangle to be the same width that it is right now you just click ‘fix width’ and as you can see if I try to move the artboard the width remains the same but the height keeps on changing because it is trying to maintain that percentage on the top and the bottom the same can be done for ‘fix height’ we switch off ‘fix width’ and we turn on ‘fix height’ now you can see that the height remains the same but the width starts to change and that is it its just as simple as that a few bonus use cases would include using a combination of this graph and the fix width and height now you should note that conceptually there are certain situations where you may need to fix a side and the top and the bottom for example if you’re creating a header on your screen now you need to make a note that at a time you can use only two out of three selected options well what does it mean essentially it means that in this particular case with fix height activated this layer’s height is fxed and it won’t change no matter how the artboard changes now I can fix it on the right I can fix it at the bottom but I cannot fix it at the top because conceptually that’s already being done now a similar case can be observed with fix width again I can fix it to the right I can fix it to the bottom but I cannot fix it to the left because conceptually ‘fix width’ is doing that for me and that is how you can incorporate responsive design in your screens in BuilderX to reinforce this concept why don’t we build a header of an app and see how responsive design effects the way you design your app elements and how they respond to being viewed on different screens for the sake of simplicity we’ll create the header of a very simple android app so we’ll change the artboard to android and create a rectangle that would act as our header now as the name suggests this header is expected to be at the top of the screen so will morph it and reposition it just a little to make it look like a header maybe even give it a fancy colour now this header right here is expected to stick to the top and fill the screen as it is right now while maintaing its height no matter how the orientation of the screen changes to do that let us move over to the responsive design controls and fix this header to the top on the left and the right while fixing its height to make it more believable lets add some icons to it which you would typically find on a header maybe a menu icon like that and a magnifying glass for the search icon this one yes now as the screen changes these icons are supposed to maintain their position as well and we can help them do that with the responsive design controls so for the menu icon we will fix it to the top and the left and for the search icon will fix it to the top and the right now if we move the artboard you can see that the header maintains itself no matter how you change it and this is it this is how you use responsive design controls to create elements of your app you can use similar concepts to make different screens say something that comes out of this menu or the search bar when you change your phone from landscape to portrait and back to landscape mode that is it guys thank you very much and we will see you next time

Add a Comment

Your email address will not be published. Required fields are marked *