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

all right hi good morning guys so in
this video I want to design the home
pets that profits many men Oh for your
application it is kept at and then I
want to implement it into understood
deal by using the relative layout and we
can set in the layout like we design it
in Sketchup okay so I want to create a
new document here choose and then create
due to insert to create new artboard and
i will choose the mobile website from
material design and this is my mobile
portrait and you can change the name you
upward to the home page
alright so it's only simple and then i
want to create new bedroom here shape
and rectangle for the background and
remove the border and check the fill
color to the another colors like this
it's a fairy silver alright so the next
one we need to change the name the
rectangle to the background and we group
it and big run okay so it will be very
simple because we need to design one
item and then we need to copy copy copy
again but the before you design i have
people preview many icons here i'm do
not eat from flat icon calm you can
download i need the 6 icon different but
it's still same the style icon okay well
we need to click the rectangle first for
the content each angle
okay like this and then I will put one
two three
sorry mystic one two three one two three
okay
and remove the borders and you can see
the weight and hiked its perspective I
want to change to 150 okay it's enough
and I will duplicate this layer and move
to the right and the content it shall be
like this yeah and then I will group all
of them group and make it to center like
this and we can create the icon here and
label of mono here so it doesn't matter
what we just need boot offender and I
want to copy my icon here I want to copy
and then I will press here and make it
to the center like this okay and then I
need the label in the below of the icon
in the below of the icon we need to
create the new texture you can give the
name its menu icon because I don't know
what what can I write it's only simple
you can change with your 5 for its name
and then I will change the color to the
black okay it's like and then I just
need to make it center with the with the
container center like this okay and then
you can group again you can group
selection and yes the name is item and
we can duplicate the item item and most
like this and remove the rectangle copy
okay we got like this and then we can
copy the item and make it to six item
and one two three four okay and you can
duplicate again one two three four all
right so the d home pet it will be like
this okay and you can make it different
from the icons I will copy one day one
copy and past and make it to Center and
remove and then go back and copy sorry
copy and past and make it to center
again and remove yes repeat the steps
till you're finished the compact design
just be patient I know hits are really
war because we just do it some steps I
know that feel bro okay and then pass
like this and this we can make it clean
okay
I think it's enough so you can see the
right angle here just click the I to
hide on your background content so I
will hidden one by one
Hayden Hayden Hayden and more small like
this okay so you have decent d hump the
compacts and then I just need to
implement it in to undo it so we just
need to slash one by one you can see the
icon apps and see here you can select
the icon one by one and then go to make
exportable and export the layer and you
can create new folder here for the a
ship okay grip and export before we go
we need to check the asset chest
hex pot okay we have the one two three
four five six
it's good well done well we go to undo
it like now okay under studio and I want
to create start a new Android studio
project and you can give the name to the
home page
and next and we will use the APA fortune
just max and empty activity next and
finish and just waiting for several time
for preparing our swap space in hundred
and it's still running you can see
Gradle with running like here okay just
sweating and depiction alike so we go
back to activity minded XML and you can
see the icon here with undo it includes
the da for the preview there if you
prefer you can click here and D lab
sorry
we can select a special and D left okay
and you have the title of Milan here
with a home patch it's good for you
okay the first thing we need to do is go
to finder and I will copy the assets and
go to your directory which Android
directory with home path and go to app
sauce and men and dress and the label
and you can press all of here and to
change icon one with a simple name icon
to icon three and four and five and the
last one it shall be six oh my mistake
sorry
we need the underscore yes we did it and
then it's simple member okay so you can
see right here is relative layout we
need to change it to linear layout okay
done and then we need to defy it with
the we go back to scripts you can see
it's a different column we need to
divide it with the two column okay so we
need to create the
linear layout here with max pattern and
max pattern and then you can get the
background for the sample sorry may
respect okay like this and then you can
get the way to one and the graffiti to
Center and the orientation to the
vertical because the the item it shall
be due to bottom it's so you need to
feta call it okay and then I will copy
this linear layout and press in the
below and change the color to the
another color with a black color and
then you can see here we have divides
the two columns for our item so just go
ahead select the the first linear layout
here and tap enter enter and then we
need to create linear layout again so
inner layer and match pattern and grab
content and we can get the big one here
for the sample game okay and then the
orientation fatty call okay
so instead of linear layout you need to
create the image field you can setting
HTTP HTTP and setting the background to
draw Weber in the icon one okay and then
I want to make it to center this one
sorry we can get the graffiti here
center so the D I met is Alby to center
and below of image we need the X or
label so text you drop content and rock
content and get that text map icon and
we need the margin top is 20 DP now it's
10 DP okay she knows and then it takes
eyes to maybe 16 DP okay so
they actually it's done we just need to
copy copy and make it clear but don't
worry I will show you so I select this
big Don and remove and then I will copy
this this one copy and I will press 1 2
and you get it ok but it still what I
know that so we can undo and undo and
you can shade the linear layout here you
can get the bedding tips to GDP okay and
we try to get the background again to
see the result the result like this and
then we can copy copy again and fetch in
the below so we goes like this
particular 8 but you can see here it's
worth okay so you can decrease the
padding to 20 and 20 and the pitting
it's 20 and you got it so we just need
to trim off the background and change
the name of icon to the tree and remove
the background and change the icon to
the to reduce and remove the big dog and
remove the big loss Sarah you got it in
the right shape we just need copy this
layer sorry layer copy this source code
copy all of them and then F okay and
change the name of icon to the 6 to the
5 to the 4 and you got it okay and I
want to run in my emulator so we can see
the
a result I'm using the Galaxy Nexus with
APA in 19 is just waiting for the Gradle
booth okay here we go this is our result
and correlation you have to learn about
relative layout sorry you have to learn
about linear layout they're happy to
create the home pets like this so please
let me know if you have any questions so
I will help you okay well don't forget
to subscribe my youtube channel so you
can get the update and it's free you
don't need to buy me okay well so nice
to meet you from Indonesia see you the
next video tutorial goodbye
[Music]
[Music]
[Music]
[Music]
[Music]
[Music]
[Music]
[Music]