Animation Download UI Design to Android Studio Tutorial Video Lecture | How to Design UI in Android Studio

hi guys it's me anger this case so
welcome back to my video in youtube so
you know I want to show you about how to
design the downloads and also we can
make the progress bar animation in
Android studio it's easy and simple
design but so beautiful okay well let's
get started so the first thing we will
design the mock-up into Scott's earth
and we can choose the new document here
and we can make new artboard and I will
choose the mobile portrait for the
material design and change to downloads
okay so after that we need the text of
the lot here and we need the contents so
we're going to text the lots this and
change to Roboto and change to medium
and the font size is 14 and the color is
4 K for a for 8 so we can get the
matching top is 20 to 30 and the margin
left is 20 okay
and after that we need to create the
content with the rounded so I will draw
the rounded here the first thing I will
make it to full size and I will decrease
by 40
okay and to the center and remove the
border like this and you can see we have
the margin right is 20 and margin left
is 20 because we have liquor seat with
the 40 pixel it's easy because the
sketch is all full and I love skirts and
yet the matching top is 15 at least and
we can change the fill color to the
white and then we can get the shadow
here and also you can change the
background color to maybe our just the
purple like this okay and the donut is
white color and you can setting this PG
PG item and setting the set o 250
opacity like this so maybe you know we
will design the file here and we will
design the name and progress bar for the
Downloads okay well just make it simply
because I don't want to take so much
time so we're going to reach angle here
and design the item like this and
setting the margin is 20 it is settling
the filled color I want to make this and
the butter is okay so this is the item
item to a lot so we have the BT and we
have the item lot and I want to make the
video here so we are going to insert
shape and three
I will listen like this and rotted like
this and back to Center and we can
remove the Buddha and change the fill
color maybe too tight color and then we
can setting here you can see the Edit
and I will edit every the corners to 3
pixels no 5 okay it's me in the video
it's so maybe I will change the color
it's okay I think it's more compatible
so we can group it and add some download
this so after that we need the title
here so I will go to text or you can
select this donut and duplicate for the
title and change the color to the black
the hex hex code is a for a for a for a
and takes the vector regular and change
the font size to 20 okay
the fandom is hundred tutorial and
before and then we can create the
progress bar right here but I think we
need to imagine top again okay it's
enough and going to insert SAP and
rolled up and we can use them like this
okay and remove the border and I think
we need to decrease the heck is that
three it is and we can to Center the
piece well we can select this and
duplicate and change to the pink color
and we can resize the way it is to this
okay this is for the donuts and you can
also group it and don't know we can
duplicate this layer it's up to you you
can duplicate again because right now we
are working on the progress bar so it
doesn't matter what about the content
you can edit this is for images or this
is for the video and we can check you to
Loudoun movie okay and this one is
beauty and peace and this is for the
Google Docs
like this it doesn't matter work you can
add it again for this this one is like
this okay
and after this we will move into we will
move into the Android studio so you just
need going to downloads and select the
item downloads and select the BG item
because we need for the assets which I
make to 3x export layer and go to
desktop and I will to folder for assets
clip and export ok and then we have the
assets here BG item and item the lot and
please don't look this this is a
contract okay so this is Vijay item and
item the lab so right now you can create
new Android studio project and this is
for downloads and next and we are going
to use the API 25 and next and we are
going to use the empty activity and next
and finish just waiting for the Gradle
build so we are copied this assets and
going to add es enjoyable and pass and
ok so we have the assets BG item and
eternal lot inside of my drawable
directory ok so the first thing we need
to create the the layout here but right
now we don't need
action bar so we can remove it okay and
also we can live off this textview
because we don't nip and change this
constantly up into maybe relative
layouts okay like this
so right here we use the fixed view and
this is from Hopkinton and rock Contin
and the text is downloads and spell is
ball and the colors is for here for
every the margin-top is we can see i'm
forget the magic of is touchy and left
is 22 TDT imagine life is 20 TP okay and
we are setting the background is a
purple so we can see the hex code is for
nine for eg - so we can copy here like
this and sorry I'm forget the setting
okay it's dollars and then we need to
create the idea behind here this is a
little the lot okay and change the
layout head is reporter and below of the
textview we need to create the linear
layer and this is for our layer we can
see
the width is 30 20 and heck is 7873 and
this is photo rock hunter and we can
setting the ID here for the downloads
okay and below ID is tittle develop and
get the matching top is 15 DP and
graffiti is Center although it may be
layered horizontal so okay so it's a
true so inside of the linear layer we
can setting for the orientation to
practical because it's going to down
okay and then we can make the relative
layout here this is for the DP and head
is 7 7 3 and the idea is item do not
just get the prefix is 1 and also we can
setting the background to attend or not
or sorry
what's wrong BG item okay so we have the
BG item maybe the dollar it's more than
20 so we can increase to 40 40 DPA no 35
okay I think it's enough and then
instead of the atom we have image phew
maybe we need to setting this for the 50
DP and 50 DP and then we can get the
sauce it's a top dollar and setting the
margin left is soon DP no 12 and the
margin top is 920 P okay and then we can
get the ideas for the item download okay
sorry failed or not okay we can get the
prefix is 1 because we will have so many
heads on here and then we need the fish
feel for the turtle the tag is undoing
tutorial and before and get the color is
a for a for a for a and right of ID is
found a lot and get the margin top is 15
DP and the margin left is
in DB and then below of the texture we
need to create the progress bar so I
will get the progress bar here and then
we need to setting the width is we can
see here 221 the width is 221 DP and
height is maybe reporter oh I'm sorry I
missed something here because I was
wrong and yet the spell I forgot
something because we need the progress
bar horizontal the tests okay and this
is the progress bar horizontal and
setting right of the folder lot and get
the margin top 35 and setting the
medulla is 20 P okay so you can see we
have the progress bar and settle and the
item here and get the idea here is top
progress and after that I have prepared
so many source code here from my fan
rubidium puja and I will use it for our
project right now so you can create new
Java and get the name is
wait
the name is progress bar animation and
okay and I have prepared the source code
it for you and it just need to pause my
video you can pause my video sorry wait
I will cop will pass something here yes
and we can extern animation and just
import like this and important yeah okay
so you can pause my video right now and
just make sure your source code like
this okay I give you time one two three
polls continue and after that we are
going to main activity to call the
function
okay and the main activity it's simple
we just have to export and you can see
this is the ID we have declared it into
our XML tot progress and this is the ID
and this is for the delay you can make
to 5,000 and this is for the person you
can make to 60% and then we can run to
test the preview oh okay
and just waiting for the griddle boy
running
I hope it's warm and you can see like
this okay and I want to show you again
like this it's easy okay aha this
doughnut makes me holy we can decrease
again for the margin laughs maybe and a
plea chance and we can see again the
result like what it is okay and also you
can copy past these relative layouts so
you can copy and like this and just get
the margin top yes it's not okay and we
can copy again and also you just need to
edit the text maybe you can do not miss
Rogen movie and the last one is x-men
and we can complete chains and we can
see again the result and you can see we
have three items here
okay so congratulation you have to learn
about progress but animation and thank
you very much for watching this video
and let me know if you have any
questions or if you have project so we
can work together well well
so nice to meet you from Indonesia
Choo