♪ (intro music) ♪ Hi guys! In previous sessions,
you have learned what is <i>Android</i> and how to create your very first project
in <i>Android Studio.</i> Here, in this session, we will work up on Views, Layouts
and Resources. I hope you remember
how was the component we have learned in Android applications. They were activities, they were services, broad cache receivers and notifications. But in this session,
we will work up on the design part. Because Android applications
is incomplete without the proper appearance
of the screen. So here, we will cover the building blocks
of views, view groups, view hierarchies, layouts, how we define in XML
and programmatically, and how we can put event list on it. What exactly a View is? Every Android application
is made out of View. Views are the building blocks
for user interface. We have TextViews, patterns,
scroll-builders, and images views. These views have some properties as well. They are specified dimensions, colors,
the positioning. They also may have focus
and they could be interactive, invisible or visible. So these are all the sub-classes of Views. In Android, we have three ways
to define the Views. We have graphical interface
with the help of Layout Editor. We have XML files where we can
define a bunch of XML codes, and third is programmatically
with the JAVA code. Here in this example, we are going to work out
with the Layout Editor. As you can see on the left,
we have Views. We can drag and drop
to the base [com den], and we can send the properties
from the right side. And this is the basic representation
of using Layout Editor. So from Layout Editor,
you can restore its size, you can put a constraint
and handle the constraint, and of course, resizable bars are there,
the constraint handles are there. So you can make changes
from the Layout Editor on the Views. Here is another type of Views
which you're going to find in the XML. So here, it represents
a bunch of code written in XML. On the top, we start with a tag. Here, the tag is a TextView tag. So I've told you that
these views will have the properties. And here you can see the list
of properties which is set for the TextView. We layout width, layout height, and at the last, you can see the Text Tile
which is <i>bold</i>. This is how you can set the Properties. Here are further examples
of how to set the Properties in XML. And the first, we have specified
the Property Name, and the Property Value to the right. Here, the property name
is the Android layout width. That would set a width for the component
according to the match parent value. Now the match parent value
will take the width from the parent tag and put it there. Next example, we have a text;
how we can represent a text. In the previous session, we have noticed
how to refer the string files. This is how we have defined
the string files, and now we our referencing it in a text. Next, we have an ID. This ID should be unique
for every component so that in activity we can specify
its specific action on this UI component. Here, it's the third type
of defining the View in the Java code. So here, I have defined a TextView. We have created a new TextView object
and specify it in the context. So this is specifying the context,
the scope of that particular activity. Now we need to call it <i>method set text</i> for the object which we
have created for TextView, which we pass the string inside it. So these are three ways
to define the Views. First, through Layout Editor, second, through the XML, and third, through the Java code. Now, you noticed in the previous slide
that we have mentioned the Context test. What is a context? Context define the scope
of a particular object inside it. It is a global information
about an application environment. There are two ways to define the context. To get the context we call,<i>
getApplicationContext</i> and when we create the object
we call <i>this</i> to specify the scope
of that particular object inside the activity or an application. We have hundreds of different
types of views already defined in Android framework. But still, if you need some more views
to be designed, you can go for <i>custom views</i>. You can define your own views
by using View class and create a subclass of it. So now, the next is ViewGroup
and View Hierarchy. ViewGroup act as a parent
to contain all the views inside it. It acts as a container
for containing the views. ViewGroup is a base class for layout
and view component. It is of ScrollView, LinearLayout,
and RecyclerView. A ScrollView is the one
which contains the view component in a scrollable view. Now, the next is LinearLayout. For the LinearLayout, we arrange the views
in a horizontal or vertical rows. We have RecyclerViews
for the scrollable list of views or the ViewGroups. This is an representation
of a View Hierarchy; how we define the ViewGroups
and views inside it. On the very top of it,
ViewGroup acts as a parent, a root element,
to contain either a ViewGroup or set of views. It also contains ViewGroup that means
it's a nested LinearLayout. It could also be placed inside
the LinearLayout. And of course without views, we cannot say that
the LinearLayout is complete. So at the base, we have at the [left]
we always have Views Component. To understand this View hierarchy,
we have this representation. On the top, we have a LinearLayout
which acts as a ViewGroup. Inside it, we are defining three views. The first one is a <i>button.</i> Next, we have TextView. And at the last, again there's a button. So as you can see on the top
we have ViewGroup, and inside it, there are views
which is defined. View Hierarchy in the component tree. When we are working
with the Layout Editor, we can see this component tree inside it. To get the better understanding
of this view hierarchy, this is how we can see. There's a Linear Layout on top
and it has three views inside it which is visible on the left. So there are best practices
for View Hierarchies. Arrangement of views hierarchy
affects an application performance. So we have to take care
while defining the view hierarchy. It should be minimal
and as simple as possible. It should not contain multiple,
nested linear layouts or multiple linear layouts inside it. It could be simple as possible. Use smallest number of codes snippets
and views inside it. Keep the hierarchy simple
and it should be neat also. Now, we are working with the layout. To understand this layout,
we have Layout Views. Layout specified the view groups. As I have told you,
that there are ScrollViews, LinearLayouts, Recycler Views. These are the subclasses
of ViewGroup only. It can be in GridLayout, a Table, a LinearLayout, or a RelativeLayout. Here is an example. The first one represents
the LinearLayout. If you can see inside it,
it has three view components. These are horizontally aligned
to each other. Next, we have RelativeLayout. As the name suggests, <i>relative</i>, that means all the UI components
are related to each other. Next, we have GridLayout. Grid, we give it
in a two-dimensional layout and put the views inside it. And the TableLayout,
it is specified like this. We can have rows and columns
to be specified for each view component inside it. Here is a list of common layout classes
which we generally use. There's a ConstraintLayout. We put a specific constraint
and that will remain fixed when we are working with multiple devices. That means multiple devices
would come along with multiple screen sizes. So here's a ConstraintLayout
which puts a contraint on a view and make it constraint
throughout the devices. Next we have LinearLayout. So LinearLayout, we can define the views
either vertically or horizontally. RelativeLayout. That means the child views
are related to each other. We can place them relatively. TableLayout. We can specify it
in rows and columnwise. Next, we have the FrameLayout. To show the views inside it,
we use FrameLayout. Like an example of image gallery. We swipe out right, left
and to see the views inside a frame. We have a GridView which contains
a two-dimensional view in a grid format. Next we have Class Hierarchy
and Layout Hierarchy. What is this? When we talk about it last,
that means were talking about Java. And in Java, the hierarchy
follows the concept of inheritance. We have a superclass, then we have a subclass created out of it. Take an example,
a pattern is a subclass of the TextView, and a TextView is a subclass
of a view component. And View is already defined as an object. So superclass is – there is a superclass-
subclass relationship. And then we talk about
the Layout Hierarchy. We have defined it like ViewGroup
and it has view components inside it. We have seen that how we create an XML
earlier in previous slide. Now it’s a proper representation
of doing it with XML code. On the very top, we have a parent tag,
which is LinearLayout. And it has a set of properties
which is layout width, layout height, and of course, we have to specify
the orientation when we are using the LinearLayout. Inside the LinearLayout,
we are going to define views. So we have Edit text, buttons,
text views inside it. And as we know that if we open a tag,
we have to close it also. So after containing the views inside it,
we close the tag in XML. This is how we represent it
in a Java code. So first, we define an object
for the LinearLayout. Now, as I have told you, we also have to set an orientation
for the LinearLayout. We set it like this way. Next, we now want a view object
that is a TextView. So we create a TextView object
and specify the context for this particular activity. Now we need to set a text
also on the TextView. So this is how we define it. Next we have to add this TextView
inside our LinearLayout. With the help of Add/View method, we define this MyText object
and add it to the LinearLayout. At the end, we set ContentView,
which is an activity code method, and put a LinearLayout inside it. So in the previous slide, we have seen how we can create an object
for the LinearLayout, and for the TextView. Also, how to add the text view
inside that LinearLayout. Here, if I have to set word
and hide of that particular view, this is how we do it. We call the layout parent object,
we create a layout parent object-- First, we specify the width,
and next we specify the height. The match parent will take the width
of the parent tag and wrap content will take the height
according to that component size. After this, we need to call
a set layout parent method for this. Hello, welcome back.
I’m Lala Singh. So now you have seen views, layouts,
how you deal with UI components. Now we need to make them alive. Let alone pulling a TextView
or a button will not do any good for you if you design your application. You need to interact with them. So that’s when event handling comes in. To understand it better, we are going to take a look at
Dad and Daughter analogy. Let’s see. Now let’s just take a look at
Dad and Daughter analogy to understand event handling
even more better. So here, we have a room
and we have a shop. Inside the room, there’s a daughter
and there’s a dad. Now the daughter asks for a chocolate. For that request to complete,
Dad needs to be present inside the room. Here, if I start comparing
with my Event Handling daughter is my <i>event source,</i>
who asked for a chocolate. Dad is my <i>event listener</i>
who listens to that event. And to complete that request, Dad needs to go to the shop,
and buy one chocolate. The shop here is considered to be<i>
event handler.</i> So this scenario help us to understand
that this is how Event Handling goes. There is always an event, there is
a listener who listen to that event, and there would be a handler
to handle that event. Now you have seen
Dad and Daughter analogy, so you know now that you need three things
to handle your events. One, the event source,
second, your event listener, third, your event handler. Event source can be any view. It can be a button, it can be a text view,
it can be a list view; anything. It even can be a click event. It even can be a long click event, or even can be when you
are dragging something. So that’s what an event is. And to listen for those events,
you need listeners. Once an event has been listened
by an event listener, then you need handlers to handle
those method. So a handler is basically a method which is defined
inside your event listener. To handle your click events in Android,
there are two ways: XML and Java. When we are handling in XML, we can put that
in an attribute name onClick. A Click event can be generated
by any view. You just have to put an attribute onClick,
and give the method name. Give a name. It can be any name.
Do something short to do method. And that same method,
you have to put that in your Java file. For example, let’s say I have an event
or I have a view, and I have defined onClick
inside that. So show— Toast is the method
that I have defined in XML and I will go back to my Java. And inside that Java,
I will put show *public void showToast,” and the attribute will be of View Object. And inside that I will put the code,
whatever I want to happen when that event
or that view has been clicked. Here I can show a Toast. Toast is an interactive
dialogue box. which will be only used
to notify the user. We will see in practical
how exactly Toast looks like, but how exactly you define--
you can see that Toast-- We create an object of Toast and we make Toast
by providing three arguments: by putting a Context Object that would be defined
inside your activity. And putting the message, whatever the message you want
to show here, “Hello toast” will be shown,
and then the duration. A Toast can be only shown
in two ways: long and short. Long will show it
for three to four seconds, short will show for one second. And then you have to show a Toast
by putting <i>Toast.show.</i> Now, there was "how to handle in XML?" But when we talk about Java-- In Java, you need to have an ID
for that particular view. When we say <i>ID</i> you need to know
which view you are handling. Let's say I want to handle a button. Now at that point of time that button had been defined
in your XML file, so you need to get the access
of that button in your Java file. That's when-- there's a method to do that
known as <i>find View By ID</i>. This method will give you the access
of that same button, which you have defined in your XML
with the same ID. Once you get the access
of that button, then you need to put your listener. You need to attach your listener
to this button. Here, the listener name
is set <i>onClick listener.</i> And inside that listener, we have a handler method
known as <i>public void onClick.</i> And this is where you will put the code
to show something or do whatever you want
when you want to click a button, or when you want to click a view. This is where you put the functionality,
what you want when you click on a view. Now let's just talk about resources. How exactly can we define
our resources in the <i>res</i> folder. First of all, why do we need resources? Why do we need to define
the sources separately if we can define them directly
on our views? Or we can define them directly
on TextViews or any view. Well, it gives you a property
of localization. You don't have to define that property
again and again in coming views, in coming properties, or incoming-- wherever you want to use
that resources again. A resource can be a string.
A resource can be a dimension. A resource can be an image,
audio file, text file. Where exactly you will be putting
the resources? You will be putting the resources
inside your <i>res</i> folder and you can put them in any XML file
with a tag <i>resources.</i> <i>Res</i> is the folder where you will be putting
all your resources, and how you access your resources,
especially if it is a layout one-- So you will be accessing
your layout resources by using add or <i>layout.</i>
the name of your resource file which you had defined
inside your <i>res</i> folder. As in my case, it happens to be <i>
activity_min</i>. You must have seen this kind
of example in your-- You must have seen this kind of
coding in your examples, also. We do setContentView
(r.layout.your activity_min). So what exactly is that? I'm accessing my resource file
from my <i>res</i> folder. And whatever you do
inside your <i>res</i> folder, it gets saved in your <i>r.Java</i> file. Next, view. In the similar fashion,
if you want to access any view which you have defined in your <i>res</i> folder, or inside your UI, or layout file, and you want to get access of that view
inside your Java file, that's when you use <i>findViewById</i>. And again, you make use of <i>R.Id.</i> whatever the ID you have given
for that particular view. And if you want to use a string in Java, you will use <i>r.string.title</i> You will use the dot operator in Java. But if you want to use that same string
in your XML, that's where you will use the <i>
add the rate</i> annotation. That's where you will use <i>add the rate.</i> "Add the rate" will directly default
to your <i>add R Java</i> file and from there, you will follow
which class you want to access, like <i>string/</i> whatever the ID name
you have given, or whatever name you have given
to that particular resource. When we talk about measurements, when you want to define any view size or for any image size, that's when you will be using dp
known as <i>Device Independent Pixels.</i> Whenever you are defining the size
of your font, or text, that's when you will be using <i>sp</i>, that is Scale Independent Pixels. Now, do not make use all these units,
pixels (px), mm or points. These are not allowed in your Android. To learn more about the Views,
you can follow these links or about Layouts, you can follow<i>
developer.android.com</i> If you want more information
about resources and other stuff, we have links here to got about it. Next, we will see
the actual implementation of Views, event handling in the practical. ♪ (music) ♪
