♪ (energetic music) ♪ Okay, now let's just take a look
at the practical of layout, views, and event handling. So, I'm going to create
a new project for that. Name it... <i>ViewsandEvents</i> I'm going to create an <i>Empty Activity.</i> And the name of my main activity
will be <i>MainActivity.</i> And the XML file will be <i>activity_main</i>. Let the Gradle build the project. Okay. Once the Gradle has been built,
we can design our UI now. So for this particular application, I will be making my title as... <i>UI and Events.</i> And I will be changing my attributes here. So this is the way you design your UI
with Layout Editor, which we just saw in our slides. So, you can drag another UI. Let's say a button. Or you can drag another <i>TextView</i>, and keep it anywhere
or place it anywhere you want on your layout. So, if you check out
the <i>Component Tree</i> right now, the root layout here is <i>RelativeLayout</i>, and inside <i>RelativeLayout</i>
there are two <i>TextViews.</i> One, I have already defined as <i>Title</i>. Another one,
I have just dragged and dropped. So, this first one,
you can always give the ID like <i>mytitle</i>. It's a good practice to give
the ID to all your UI components. So, the second one is,
again, another <i>TextView.</i> Now, you can always go ahead
and change the properties of this <i>TextView</i> also. So, you can always go ahead
and change the properties from the right pane,
and there you will find all the properties to change. Take any screen size, maybe 30 sp. Or 36 sp. Like we discussed, for <i>TextViews</i>,
or for font size, we will be using scaling pixels. Or you can always go to the coding part. This is the design part-- Layout Editor. The second part is your coding part. If you go to the text part, here, you will see that you can even decide
all the attributes from here. Let's say I want to change the color. <i>android:textColor</i>. And I want to use a color
which is already defined in my color resources. So you see from your text part also,
or from your XML part also, I can actually change my views,
or change my properties of views. So, here, now I will... Here, now I will change it <i>Your text</i>. Sorry. <i>Your Text</i>. Now here, what exactly
my example is going to do... I will put two buttons here, and call it <i>Change 1</i>, and I will put another button, and let's just call it <i>Change2</i>. And on the click of both of these buttons,
my <i>TextView</i> is going to be changed. Now, before I define
my click listeners to that, let's just define the IDs to these views. Like I told you, it's a good practice
to define IDs to each and every view, because if you want to use these views
later on in your Java file, you can always do that. So, in the ID of this text view,
I will put it <i>t1</i>. Press <i>Yes</i>. And in this button, I'm putting <i>b1</i>. And in second button, I'm giving <i>b2</i>. So, the first button, I will be handling
with my Java way-- that is my coding way. The second one, I will be handling
with my XML way. We just saw that there are two ways
to handle the buttons on click listener. Or the click event. So, we are going to see both of them. So, first, when I want to handle
my button with the coding part, I will come to my Java code,
and I need to change my <i>TextView</i>, so, I need to get the access
of my <i>TextView</i>. For that, I will create
a <i>TextView</i> reference. And I know my click listener
or my event will be generated from a view known as <i>Button</i>. So, I will be needing
the <i>Button</i> reference also. Then, to refer these views
directly from your XML file, I need to use a meta-name<i>
findViewById</i>. So, <i>findViewById.</i> It returns me an object form,
so I need to typecast it to <i>TextView</i>. So, how do I get the [access]
of that same <i>TextView</i>-- for that we have <i>R</i> Java, <i>R.java</i> file, and we will do <i>R.</i>-- because it's an ID--
so <i>R.id.t1</i>. And now, this <i>t1</i>, or this <i>TextView</i>,
is referring to this same <i>TextView</i>. So, that's what our goal is. To refer exactly the same <i>TextView</i>
which you have defined in your layout. In the same way, I can refer
to the same button, also, by defining <i>Button</i> --<i>
findViewById(R.id.b1)</i> After that, next, when we are doing it with coding, I need to put a listener
to listen to that, because, as of right now,
there is only [inaudible], that is <i>Button</i>,
so to put the listener, I need to do <i>implements OnClickListener</i>. And please make sure that you are putting<i>
OnClickListener</i> of <i>View</i> class, not the <i>DialogInterface</i> class. That will be covered
when we reach [inaudible] dialogs. So, <i>View.OnClickListener</i> class--
and it will give you an error because <i>OnClickListener</i> is an interface, and interfaces in Java
have zero abstract methods which you need to implement. So, when you click on this balloon--
red balloon-- and it will give you all the abstract methods which are there
in this particular interface. You just have to press <i>OK</i>, and those methods
will be implemented for you. So, now there is a listener,
there is a handler. But still, you need to register
your event source with your listener. That is, you need to register
your button with your listener. So, how do we register? <i>setOnClickListener</i>, and put <i>this</i>. Now, <i>this</i> here means that
you're handling this particular listener inside this class only. Inside this <i>MainActivity</i> only. That's the reason I'm putting <i>this</i> here. Now, all I need to do now
is to put the code to change your <i>TextView</i>
inside your <i>onClick</i> handler. So, how do I change my <i>TextView</i>? So, I have the reference
of <i>TextView</i>-- <i>t1</i>. All I need to do is <i>setText</i>,
and put the name-- put whatever the text you want. <i>"You clicked Button 1"</i> And that's it. So, now, if you run this application-- So, now, if you run this application
with your emulator, it will look exactly like the UI
you have designed for your main application. And this will have two buttons. But the second button
will not work right now, because you haven't really given
any listeners, or you haven't really handled
your second button. But your first button,
if you click on your first button-- See here--<i> "You clicked Button 1".</i> So, that's it. You have handled your first button. Now, let's just take a look
at how exactly we can handle my click events in an easier way. So, we just saw the Java way. Now, let's just talk about the XML way. So, in the XML way, all you have to do
is just click on your button, and press <i>Ctrl</i>, and click on that,
and it will transfer you to your coding part. And inside that, all you have
to do is put an attribute name <i>onClick</i>. And give any name,
maybe <i>doSomething</i>. It can be <i>doTask</i>. It can be <i>changeText</i>. Whatever you are putting here... whatever the function name,
or whatever the name you're putting here,
just copy this name-- and put the same name
inside that activity where you are using this layout. So, the signature of that function
will be <i>public void doSomething</i> and inside that, that would be <i>View</i>. And inside this now,
you can handle this button separately. Now, <i>setText</i> <i>"You clicked button 2"</i> So, you see now you don't need a listener, you don't need to give an ID
or get the [accessor] button. Everything has been taken care of
by this particular <i>onClick</i> attribute. So now, if you run this--
this button also has been handled by the way of XML. So, if you click on <i>CHANGE2</i> now,
it will show <i>"You clicked button 2"</i>. If you click on <i>CHANGE 1</i> now,
it will show, <i>"You clicked Button 1".</i> So, that's how you handle
your events and [UI]. ♪ (energetic music) ♪
