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

hello this this is ungodly and welcome
back to my youtube channel and in this
video I'm going to show you about how to
implement your real IDs and from the
skeptic into the under studio for
Android application well basically I
have the main screen that is from my
friend in China he gave me the script
app so I want to try to implement it
into the Android studio well this is the
design we have the main screen and we
have the get get started screen this is
like a spa screen so the first thing we
need to design this and after that we
need to design this okay well before we
design to Android we need to export the
assets so I just want to select this
layer header image okay and select this
picture and select this this this is
this oops my mistake oh yeah I will give
the update for you in the description in
this video so you can download it and
you can practice with yourself so make X
possible by 3 X and export layer and we
need to create folder for the effects so
just export ok and after that we go to
this place here this is the ills
illustration and we have this plus
button so we need to export the
illustration and this plus button just
by 3x scoops and export layer and we
cannot export ok cool so we need to the
Android studio we just need to start a
new Angeles to do project and if the
project is send me a and next
and we're going to use the API first in
its Android 4.0.3 and just next and with
the empty activity and finish okay so we
just need to waiting for the griddle
boots like now well we're ready to
develop our application but we need to
check out the SS first so we have either
home illustration news or something
wrong here we don't have the icon for
the news button and schedule so we're
gonna have to fix it I want to fix it
for you it's run this icon or schedule
button we're looking for schedule button
oh yeah this one we need to move this to
here okay and then the news button yes
okay here we need to move here and we're
going to export again for this button
export and of alright so let's check up
again okay we did it well we just need
to close this Java and remove this
textview and then go to area and select
all of them and we can copy and paste to
drawable and after that I want to remove
the navigation bar so we just need to a
styles and it does the no action bar and
then we don't have the action bar so I
want to change the status bar with a
blue color we're going to check the blue
colors here so the hex code is r2 egg
egg BBA
and go to the colors
and color premiere it up okay and we
have the blue color here good so we can
start from the splash screen here we
need the image view and text view and
pixel and button okay so just go to the
design and then we go to the images and
find the image view and just duck ends
up and we're waiting for the library it
should be it took a long time and we're
going to find the ill so just okay and
you will get the else here and make sure
the scalp type is a center crop and
after that we're going to check the
width is 298 and 273 okay so just to it
go to the text turn the Atlantic egg we
are using the DP okay and then go back
to your design and move to here just
like this okay and we need the text view
here we need the text view so just go to
the text and looking for the text view
where is the text view for this one text
you just drag and drop and then move to
the here and then we just need to copy
this text I want to copy maybe you can
use the another what you don't need is
the change language if you can so just
go to the text and
it and you will get and let's see the
font size is 24 with the color is a for
a for a for a so the color is a for a
for a for a and text size it's a 24 HP
good you're going to check again
okay and after that we just need to copy
this text view copy and then set and we
can use bit another text copy and it can
get the extra piece and then go back to
your design and we can move here but I
want to make it small okay
and then go back to your text and I want
to make it this text center but that
color is a egg five and context is 16
Center and the color oops
we're gonna okay and the contest is 16
sp okay and we're gonna to 2x the line
height may be too deep II know how about
5 so 8 9 okay cool so this is the splash
game and I want to make another button
here so we have the button here so we
just go to the videos and we get the
button and just drag end off and then go
back to your text and here we don't need
the text we just need the background and
Roybal buttons plus gets plus button and
it's too big because we need to setting
first though with if our 230 and the
Hacket of 550 and go to your text
and then we get the button here okay so
we start from the Skype app and we start
from the UI and we go to the the Android
studio so it's very cool yeah this is a
scat app and this is the objective you
and we just need design the another
screen with like this okay so if you
want to design the another screen just
go to the layout and click like and new
and activity and we can use the empty
activity and give the name maybe you can
unit the backups name so we just need to
cancel and go to main activity to copy
this pickups name and then we go back to
layout and new against activity and
empty activity and just a plus our
backups name here but the activity nerve
is not valid so we can we need to create
another activity so we go to Java click
new and Java class oh no no no stories
no and activity and MTX city and we just
need to fill it and then we get the
another activity that we can use for our
home screen this is home screen and this
is plus screen ok and after that I want
to design the header we have the header
here with a illustration so we can use
the images view and this is images so we
could to undo it and to design and then
looking for the images and we have the
images whew and yet is the hidden image
and after that go to the scalp type to
make it to Center Club Center club okay
and we can resize maybe the size is 370
and the heck is 263 TP and 263 DP okay
and go back to design there and I want
to make it full Keiko and we need
another image feel for our picture
profile which is the picture button just
okay and we need to reserve to make it
small
okay
and we need the textview we just go to
widget and textview and I want to make
it zoom and the name is a to do my
friend just copy and we can go to text
you and the color is a white color okay
and the font size we can click for our
2020 SP and we're gonna to make this to
the center like this and then we need to
copy this text field to make another
text just copy and past here and we have
the ui5 here but the context is
different is 16 so you can change to 16
and think the opposition is all no no
just move here and here and here okay
cool
you can move here okay and then we just
need to make the button here but we need
to change the background color first so
the background color is a f2f 9ff so we
go to the text and looking for here and
the big rock is okay cool oh oops oops
sorry
so we go to the areas and layout and
here okay and we just need the button
for our
you so go to effects again and the
button which does the big widows effects
so we just need the big rod and drawable
and first one is a home button okay and
we need to make it small
maybe 100 stitches 152 DP and this is
152 DP okay and here our button so
basically we just need copy and press
and move here and select all of them
copy and press and move here at this and
then we just need to change the change
the image but right now I want to make
it missus okay let's see the margin left
is a 32 so we can see here I remove and
in and we can make to the center and we
can select again I need to zoom it and
select them copy and press and here
hollow not good
copy and press again okay good so we
just need to change the you know
so here is the home and here is the UI
UI button and here the PSD PSD and here
is the public okay this is the public
okay
and you can also design another button
below off here but we just need to copy
and cut and move here okay but we can
see I will to delete it
yeah we can copy again and start and
move here
and most of them may be here okay and
here okay cool so we have the home
screen and we have the plus clear so if
I click this it's going here but right
now I don't teach you a Java because my
MacBook is not good right now so maybe
next time I will teach you the Java for
the set on click system okay well thank
you very much for watching this video
tutorial and till the next video
tutorial goodbye