Android Tutorial - Scaling for all device sizes programmatically

hello my name is vladisof and in this tutorial i'm going to show you how we can scale a design for every screen size every device size programmatically there are many ways you can scale it and mainly you can use the resources folder to do so but i want to show you a different way how we can do it programmatically i'm going to show you first the difference that we have without scaling and when scaling with code what i have here now is a simple project only one activity a simple xml file which consists of one image view and two buttons and the design looks like this and i got this from here uh from a figma project it's just a sample project uh you can i'm not sure if you're familiar with figma but it's like a place you can import your designs and then you can check the specific components on the right side like the width the height the uh the elements that your designs consist of so i just got from here the background and the two buttons with the specific sizes and i'm going to show you on the screen a couple of different resolutions so you can see without programmatically only with this xml file what it looks like on different screens and as you can see here for example the buttons the width of the button is 167 destiny pixels and in here the the way this hundred sixty seven so everything that i put inside the xml file uh the paddings the margins uh whatever it is also it's the same in the design here so i'm going to show you how you can integrate this design exactly the same as it is here to look exactly the same on every other device and now let me show you how we can do scaling programmatically what we need here is the design width and height and these are the design with a height from the design we're taking we're looking at uh for example in the project i have here as i said i'm using figma in the project we have here when i select the full view as you can see the width and height of the view of the full design are 375 but by 812 so i'm using those values here as my main values so the the full width of the screen is 375 and the full height is eight at eight hundred and twelve so what we do from then is we check every component with the height as they are in this in the design because if you are a developer and the designer gives you a file you of course you want to do it exactly pixel perfect and that's what we're trying to do here so we're taking every value like the width like the height like the margins and paddings from here and just putting them in our code what i'm doing here is a simple calculation we have those two functions which are calculating the density pixel height so uh we're using display metrics to get our current device we're using the project on like we installing the project or it in the emulator it doesn't matter where it is we just get the device height and the device width and then we multiply it by the value which value represents for example if we if we check the button here and we want to set the width of the button programmatically we check the value width which is 167 and we set this 167 as the value and the value is divided by the design width variable which is the full width of the design component which we get from here and by this way by doing it this way we're getting the exact width and height that we need for the device we actually installed the uh for the device we're using so it doesn't matter if it's your uh if it's 240 but by 320 or whatever resolution it is it will scale like it should and it's not just it's not a hard task it's very simple i mean you can maybe do it with xml and you can do it with only xml but i prefer this way because i think it's way easier so i'm going to show you on the screen now the difference between the two styles without using programmatically and width programmatically and i'm going to compare them so that was it guys i hope you liked the tutorial if you have any questions ask below and see you next time

Channel: Vladislav Rashkov

Views: 23,249

Keywords: android, tutorial

Id: BbsHyoAkAVI

Length: 5min 35sec (335 seconds)

Published: Tue Sep 29 2020