CHAPTER 6
ADDING BUTTON
AND
EVENT HANDLING
The Button View
Just like other GUI programming languages, Buttons in
android also are the most important components for user
interaction.
Buttons in android can be created using the Button class ,
which is a derived class of TextView.
This class is available in the package android.widget.
Adding Button To Layout
There are two ways of adding GUI components to the
layout:
via XML or
using the design editor
Adding Button Using Design
Editor
To the left of the design editor, there’s a palette that
contains GUI components
We can find a Button component. Click on it, and drag it
into the design editor.
Adding Button Using XML
We also can add the Button to the Activity by writing XML
code in our activity_main.xml layout file:
<Button android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me" />
Adding Button Using XML
But the problem with the code is that it will place the
Button on top of an existing component , in our case it is
the TextView.
To avoid this we must tell android to place the newly
created “BUTTON” view towards left , right , below or
above the present control.
Adding Button Using XML
For this android provides us 4 attributes of “Button”
android:layout_toLeftOf
android:layout_toRightOf
android:layout_below
android:layout_above
The value assigned to these attributes is the id of the
component with respect to which the button needs to be
placed
Adding Button Using XML
Another set of important attributes is the alignment
attributes:
android:layout_alignLeft
android:layout_alignRight
android:layout_alignTop
android:layout_alignBottom
These attributes help us align left , right , top or bottom
edges of a component w.r.t. other component whose id is
assigned to them
Adding Button Using XML
So , now the code becomes:
<TextView
android:layout_width="
android:layout_width ="wrap_content
wrap_content""
android:layout_height="
android:layout_height ="wrap_content
wrap_content""
android:text="Hello
android:text ="Hello World!"
android:id="@+id/
android:id ="@+id/textView
textView"/>
"/>
<Button android:id
android:id="@+id/
="@+id/mybtn
mybtn""
android:text="Click
android:text ="Click me"
android:layout_width="
android:layout_width ="wrap_content
wrap_content""
android:layout_height="
android:layout_height ="wrap_content
wrap_content""
android:layout_below=“@id/textView”
android:layout_alignLeft=“@id/textView” />
The Output
Why Text On Button Is In
UpperCase
You might notice that although we have written the text
as “Click Me” in the android:text property of the Button
control , but it appears in uppercase as “CLICK ME”.
This is because from Lollipop onwards , android has
made a design change that it capitalizes all the text that
we write in the Button .
To stop this , we can add another attribute to Button tag
which android:textAllCaps=“false”
Introduction To Event Handling
The app we have designed contains a Button now but
when the button is clicked , it performs no proper action.
To add this functionality to our application we need to
add Event Handling code to our app , which in android
follows almost same approach as Java
Introduction To Event Handling
Events are the actions a user takes at the run time of our
app. Like clicking a Button, Tapping on screen, typing text
in EditText or TextField etc.
Event Handling Now if our application wants to respond
to those events i.e. execute some piece of code in
response to the event then we perform Event Handling
Different Ways Of Event
Handling
Android provides us 5 ways to handle the Button’s click
event and they are:
Using interface implementation
Using onClick attribute
Using inner class
Using anonymous inner class
Using interface type
Except the second approach , all others are totally
inherited from Java
Event Handling Using Interface
Implementation
Whenever we click a Button , android calls a method
called onClick( ) .
This method belongs to an interface called
OnClickListener.
So in order to perform some task on button click we need
to override this method.
One way to do this is to implement the interface in
Activity class and override the method onClick( ) there.
Event Handling Using Interface
Implementation
Here are major steps in handling Button click event:
Implement the interface OnClickListener
Override the onClick() method
Register the respective Button as source and implementing
class object as listener by calling the method
setOnClickListener().
This method belongs to Button class and accepts an
OnClickListener object as argument
EXERCISE
Design an app to display a Button titled “Click Me”
and when it is clicked a TextView should display
current Date and Time.
SOLUTION(activity_main
SOLUTION( activity_main))
<RelativeLayout
.>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me"
android:textAllCaps="false"
android:id="@+id/btn"
android:layout_below="@+id/textView"
android:layout_alignLeft="@id/textView"
/>
</RelativeLayout>
SOLUTION(MainActivity.java
SOLUTION( MainActivity.java))
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;
import java.util.Date;
import android.widget.Button;
public class MainActivity extends AppCompatActivity implements
OnClickListener {
private TextView tv;
private Button btn;
SOLUTION(MainActivity.java
SOLUTION( MainActivity.java))
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
tv=(TextView)findViewById(R.id.textView);
btn=(Button)findViewById(R.id.btn);
btn.setOnClickListener(this);
}
SOLUTION(MainActivity.java
SOLUTION( MainActivity.java))
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
tv=(TextView)findViewById(R.id.textView);
btn=(Button)findViewById(R.id.btn);
btn.setOnClickListener(this);
}
SOLUTION(MainActivity.java
SOLUTION( MainActivity.java))
@Override
public void onClick(View view) {
Date today=new Date();
tv.setText(today.toString());
}
}
OUTPUT(Before
OUTPUT( Before Clicking)
Clicking)
OUTPUT(After
OUTPUT( After Clicking)
Clicking)
EXERCISE
Design an app to display a Button titled “Click Me”
and when it is clicked a TextView should display
number of times button has been clicked.
End Of Lecture
For any queries mail us @: scalive4u@gmail.com
Call us @ : 0755-4271659, 7879165533
Agenda for Next Lecture:
1. Handling Multiple Sources
2. Event Handling Using XML
3. Standard UI Components In Android
