Splash Screen in Sketch App and Android Studio XML Tutorial Video Lecture | How to Design UI in Android Studio

hello guys this is sangha risky and
welcome back to my video so today this
is my first time to get inserted with
Sketchup and under studio so we will be
able to learn about skip ad' and then we
will implement it into under studio so
we go now to design the splash screen
that we will implement in under studio
we need to create a new document in
Sketchup and I will create a new output
here with a insert and then select the
artboard maybe I will choose the mobile
mobile pod right okay okay so this is
the mobile pod site and I will change
the name to Ock BOTS so I will change
the name to spar scream splash screen
all right then I will to create a big
dog with the red screeching go for the
background and of course I will dream of
the border and change the fill color to
the blue okay we have the big dog here
okay the next one I will create another
step so we I am going to insert shape oh
sorry
effects are okay and create here and
click here click here and click here and
then we go to edit at least okay and
we're going to get the fill color here
and I will change the color with blue
another blue like this and remove the
border color
and then we need to skip and get the
saddle and the blue is 20 and of course
I will decrease the opacity to 50 pixels
okay like this and the y is zero okay
we can copy style copy okay and I want
to create another step again with the
factor here so I will click here click
here and click here here and we're going
to edit the border and the fill color
and go to blue like this okay and I will
press the style and change the color to
the another blue like this alright so
next I will create another step again so
I am going to in sub-sector and create
here and here and here it's only random
and give the fill color to the blue like
this and remove the border and go to
idea to make sure that the corner is
good and then we can press style and if
you edit again
I will another blue okay it's cool right
and then I will drink this like this
pretty cool okay okay so the next one
select the BG and click like and go to
miss and then select all of them and
group selection and give the name is BG
because the mean is background so it
shall be like this okay the next thing
we need to create the background sorry
we need to create the button so we're
going to go to insert shape and rounded
and then I will draw the button here and
make sure the button to the center with
the alt on your keyboard the medium is
60 from the button 60 and I will use the
yellow color
I will another color yes another seller
may be white okay it's cool white and
get the Sado here and setting the blue
to 15 and setting the Y to five and
setting the opacity to 50 pixels sorry
50% okay and then take the name to the
BG and put something text here so we're
going to insert and text and click here
and get started and then I will change
the font size to the 20 now 24 maybe I
prefer like to 20 to 22 okay it
and make sure to the center or sorry
shall I lost them and make sure to the
center and then I will sync the color to
the blue like this okay and select all
of them and make two groups to button it
is the next one I will create some
paragraph here so we go to insert and
text and click here to hello what they
usually we fix it hello what and I will
change the font to regular and the font
size to maybe 55 now it's too big so I'm
gonna 248 okay I think it's enough and
then just to the light pick me and I
will duplicate this layer to create a
paragraph and I need a lot of it shown
here so I will copy the text for the
matrix and go back to your sketch and
change the font size to the yes active
and just make sure the element is life
and then I will pop your likeness and
enter and enter and enter again and make
to center like this it's pretty cool
okay
interceptor a like this so this is our
design that we will implement in under
studio
before we go to undo it we need to slice
by layers or click splash screen and
they're like exportable an Xbox Plus
screen and then go to desktop and you
create new folder for the effects
effects okay we create and hit the
splash screen and go to BG and make
exportable export biggie in the assets
folder and the button make is potable
export button and so so we're going to
check the pressure force so we have the
BG and the button and the preview for
for the chip okay so we're gonna to
unload studio and start a new Android
studio project and I will give the name
with my application so mix so next and
we gonna to empty FC TV so next and
finish and then we're waiting for Gradle
boots in under studio just like I'll say
for all time it's ok ok now we are ready
for create the XML here and we go to XML
so this is in materialism for the hood
in the library because we get the pond
here like our emulator so just waiting
for it okay this our application you can
select this hello world
okay we go to text and then I will
change the font size
Android sorry text 5 and then you're
back to scripts to see for th a 40 X 40
egg pixels and the element is left as re
its center text element the element to
the center okay and then you're gonna to
surf and go back to the design and like
this it's all be to Center but it
there's nothing properly oh sorry sorry
maybe I will be most bitch first scale
we focus on the big one foot so I will
create the bigger here under it big run
though oh man I'm for that something so
we go to our desktop and copy all of
them without splash screen copy copy the
BG and button copy and then we create
the my application here and go to app
and then to sort and mine and dress em
doable and you pass all of them busy and
button and we can access it from the
rest doable we have the BG we have the
BG and then we have the button here so
we just need to draw able and go to BG
and go to go back to design and boom we
got it okay so I want to remove the
header like our my application so I'm
going to manifest and double click and
you can see here the label you just need
to remove it like this and you can shoot
back again
oh yes you need to set the file first
and then I want to remove the header so
we go to failure and style here and dock
action bar we're gonna have to change
the action bar and serve and you can see
there's no hitter again it's good i okay
so what's next we go back we go back to
the text and craziness to the button
practice and then I will rub the concern
and much better
sorry no no no the heck it shall be let
me check for the heck 860 you can see 60
so we need to 60 pixel and then get the
background here doable and button and we
go to serve and boom we got it but yeah
it's what I think maybe like this sixty
to sixty now 60 60 and yes
I think it's enough and then I will make
two centers under it the center so X to
bottom for it
now
- we're going to change the early it's
doughy and pattern button it's true
you check okay we got it and then I want
to make sure the left margin leg is a TC
pixel now it's not enough so we got have
to change to sixty pixels now maybe
ninety now it's too much maybe seventy
yeah okay
second three five seven five okay okay I
think it you know okay so the last one
we need to create the textures so we're
going to check the label we got this
let's text we just need to drop here
drop boom and go back to the text and
change the name to hello and change the
color text color to the white and text
sorry Android text file - so oh it's too
big the word change to hex code
No maybe 90 okay it's enough and we copy
again the lorem ipsum and then i will
create a small text
sorry medium text here and we need to
edit the medium text
boom and we got the anjali text color to
the FFF FFF and just make sure the text
it to the center centers oops okay and
text sorry
undelete fix aliens on a hike line
spacing extra and we need to la pomme
blah so we need to act in pixel now it's
16 no trust okay if you know and you can
run in your computer or you can run in
your undo it but the preview it shall be
like this okay so thank you very much
for watching this video tutorial and I
hope I can show you another video with
Sketchup and Android or Photoshop and
undo it because this is my first time
with the Sketchup and undo it okay so
don't forget to subscribe my channel in
YouTube and see you the next video
tutorial goodbye
[Music]
[Music]
[Music]
[Music]
you
[Music]