Lect 03 | Part 01 | Splash Screen in Compose 2023 | Compose for Beginners | Compose With Rashid

welcome back with the uh the in the next lecture which is lecture three on basics of compos so in this video we will make a splyce screen and uh uh uh before that let's recap what we have Leed until this point so uh these are the basic components uh that we have uh seen text view button uh column row icons and images so let's make a real uh screen based using these components so that's a flash screen and uh link of uh and that's uh this design in Sigma file so the link of that that figma file is given in the description below so you can access uh that link to uh access this design and uh different components of this design so let's open the design so after opening the design you will uh and logging in the figma you will see this screen here so from here on the left side you need to scroll down and click on design uh actually design see design file and here we have different screens uh uh so first of all we need to make a splash screen here so before jumping on to coding let's see the different components of the screen and uh how and where they are aligned so here we have the one icon and text here which is vertically Center and horizontally Center and there are some uh uh shadow images uh which are on the top right of the screen and the bottom left of the screen and the bottom right of the screen so these are the components that are showing on the screen so let's apply these uh components and make our design according to this uh screen so let's come back to my Android Studio project and here I will close all the tabs here and here I will create a new package for Flash in which I will create a new file write C and hit tab button compose screen and uh do a preview view this uh compos screen I will copy this down here and name it as preview and anation is preview and uh there are few things uh that we need to do here is uh use this uh team and here I will use compose screen now I will uh view will be rendered in live data and you we can see the effect here so let's uh jump to the uh design components one by one first I will uh uh show this icon and this text here so let's double click on this icon and uh from here in preview we can see that we have selected this icon perfectly now we need to export this as a image uh so from here you need to select the quality of this one and by default it's 1X so we will use the forx quality here and export okay so we have the image here so let's copy this image actually copy and paste it in the drawables I will name name it as uh what is the name of uh this project it's an event booking app so I will name it app icon and uh for the text has uh this text has uh two colors and some effect and okay I will use uh I will export this every image as well quality should be 4X and export okay V Hub Okay so now next thing is we need to show these two images on the screen so it would be vertically centered and horizontally centered so I will uh use the uh column of uh actually Row for there first I will show these two in the horizontal uh format modifier fil Max width and here to show an image I we can we will use image [Music] component Pon and the content description it will know so here is the rening issue here this is because whenever we add any any fil or any do any change in the Resources directory then for after that we need to rebuild it manually so it will uh build the project and refresh our compul comp comp compos screen okay so now our image has been rendered but it's not we showing showing the image here so let's uh zoom out and see okay so the next thing is we need to show the event Hub text here so for that I will make another image here okay so the next thing is we need to make this content align that this icon and the V Hub Bas line is same so for that I will set the vertical alignment to bottom okay so the base line is same so next thing is uh we need here is some space between this icon and the V Hub so here we need to put the space here for that I will use spacer okay let's increase it little bit more and little bit more 10 okay so this is it uh the spacing is according to our design so the next thing is we need to make it uh horizontally centered so for that I will use horizontal Arrangement [Music] Center so it's centered now so the next uh thing is uh going to make it vertically uh centered and uh when doing that we can also use uh here these some of our components we need to show these components too so for uh so if we want to show any components vertically then just like one two and these two components are showing vertically so show for that we will use column so let's wrap this into column modify fil Max size it will occupy the whole Space which is available vertically and horizontally on this know device and uh and change the background color to white okay so this okay so this uh uh is uh showing in column on top and so let's make it centered so for that we will set the vertical vertical alignment actually arrangement to center now it's vertically centered so the next component is uh top uh this Shadow icon uh image background here so here we will see the preview here and select quality to Forex and download this PNG I will name it as I top background top right background and the next is the bottom one bottom left background and the right one bottom right background so now copy these images and paste it in our project and uh here uh above this uh row here I will show the another image so as I have added few images in the drawable so I need to re it manually so our image is uh shown here but it should be at the uh top of uh this uh screen uh so for that you to make make it top there are uh few things that I need to do is like I will make Command this uh vertical arrangement of column and uh column and uh this will be on the top but uh the other event Hub is not at the center of the scen we will uh deal with it later so let's put our components all other components of the screen here so the next is uh bottom left background so which will be after the this row and let's copy this bottom here by pressing control D or on Mac command D okay so our other two components are also showing here but they are um they should be horizontally left one and the left image and the Right image [Music] so I will wrap this in row name it as bottom image backgrounds make modifier F Max withd actually our images are our background images are very light so we are uh sometimes unable to track them so the the trick is here I will uh change the color of this image tag so it will be very visible to US during the development so after doing all the alignment stuffs we can change the background uh we will remove that color from that from this image tag so let's make it okay that's it and uh actually I think I I think I have uh used wrong images maybe bottom left is this one bottom left is this one which is starting from the left side and the bottom right is this one the shadow is starting from the right side Shadow starting from the right side our images are correct but this image is taking more area than this one so let's uh increase the width of uh this uh image uh first see what are the dimensions of this 724 width and one6 168 height the width of this Dimension IM Dimension is high that that's why it's taking uh more space on expect the right one so for that I will set the width by using [Music] modifier let's make it 100 d here

Channel: Rashid Saleem

Views: 39

Keywords: android, tutorial, rashid, rashid saleem, rasheed, rashad, rasheed saleem, compose with rashid saleem, rashad saleem, rashid compose, rashid saleem compose compose with rasheed saleem, kotlin, mobile, jetpack compose, how to learn compose, compose for beginners, what is compose, jetpack compose for beginners, splash in compose, image, how make splash screen in compose, splashscreen in compose, create splash splash in compose, column, row, images

Id: jmrLH0LuzeQ

Length: 22min 2sec (1322 seconds)

Published: Tue Oct 24 2023