WCMC Lesson3
WCMC Lesson3
</LinearLayout>
• Once your layout is defined, you can load the
layout resource from your application code, in
yourActivity.onCreate() callback implementation
as shown below:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
Android Layout Types
• LinearLayout is a view group that aligns all children in a
single direction, vertically or horizontally.
• RelativeLayout is a view group that displays child views
in relative positions.
• TableLayout is a view that groups views into rows and
columns.
• AbsoluteLayout enables you to specify the exact
location of its children.
• FrameLayout is a placeholder on screen that you can
use to display a single view.
• ListView is a view group that displays a list of scrollable
items.
• GridView is a ViewGroup that displays items in a two-
dimensional, scrollable grid.
Layout Attributes
• Each layout has a set of attributes which define the visual
properties of that layout(ID, Layout Position, Size, Padding
and Margin)
• android:id :- This is the ID which uniquely identifies the view.
• android:layout_marginTop:-This is the extra space on the top
side of the layout.
• android:layout_marginBottom:- This is the extra space on the
bottom side of the layout.
• android:layout_marginLeft:- This is the extra space on the left
side of the layout.
• android:layout_marginRight:-This is the extra space on the
right side of the layout.
• android:layout_gravity:-This specifies how child Views are
positioned.
• android:layout_weight:- This specifies how much of the extra
space in the layout should be allocated to the View.
…continued
• android:layout_x:- This specifies the x-coordinate of the
layout.
• android:layout_y:- This specifies the y-coordinate of the
layout.
• android:layout_width:- This is the width of the layout.
• android:layout_width:- This is the width of the layout.
• android:paddingLeft:- This is the left padding filled for
the layout.
• android:paddingRight:- This is the right padding filled for
the layout.
• android:paddingTop:- This is the top padding filled for the
layout.
• android:paddingBottom:- This is the bottom padding filled
for the layout.
Android UI Controls
• TextView:- This control is used to display text to the user.
• EditText:- EditText is a predefined subclass of TextView that includes rich editing
capabilities.
• AutoCompleteTextView:- The AutoCompleteTextView is a view that is similar to
EditText, except that it shows a list of completion suggestions automatically while the
user is typing.
• Button:- A push-button that can be pressed, or clicked, by the user to perform an
action.
• CheckBox:- An on/off switch that can be toggled by the user. You should use
checkboxes when presenting users with a group of selectable options that are not
mutually exclusive.
• ToggleButton:- An on/off button with a light indicator.
• RadioButton:- The RadioButton has two states: either checked or unchecked.
• RadioGroup:- A RadioGroup is used to group together one or more RadioButtons.
• ProgressBar:- The ProgressBar view provides visual feedback about some ongoing
tasks, such as when you are performing a task in the background.
• Spinner:- A drop-down list that allows users to select one value from a set.
• TimePicker:- The TimePicker view enables users to select a time of the day, in either
24-hour mode or AM/PM mode.
• DatePicker:-The DatePicker view enables users to select a date of the day.
Create UI Controls
The syntax for an ID, inside an XML tag is:
android:id="@+id/text_id"
To create a UI Control/View/Widget you will have to define a view/widget in
the layout file and assign it a unique ID as follows:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView android:id="@+id/text_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I am a TextView" />
</LinearLayout>
Then finally create an instance of the Control object and capture it from the
layout, use the following:
TextView myText = (TextView) findViewById(R.id.text_id);
3.2 Android Events
• Events are a useful way to collect data about a user's interaction
with interactive components of your app, like button presses or
screen touch etc.
• The Android framework maintains an event queue into which events
are placed as they occur and then each event is removed from the
queue on a first-in, first-out (FIFO) basis.
• You can capture these events in your program and take appropriate
action as per requirements.
There are following three concepts related to Android Event
Management:
• Event Listeners: The View class is mainly involved in building up a
Android GUI, same View class provides a number of Event Listeners.
• The Event Listener is the object that receives notification when an
event happens.
• Event Listeners Registration: Event Registration is the process by
which an Event Handler gets registered with an Event Listener so
that the handler is called when the Event Listener fires the event.
• Event Handlers: When an event happens and we have registered
and event listener for the event, the event listener calls the Event
Handlers, which is the method that actually handles the event.
Event Listeners & Event Handlers
Event Handler Event Listener & Description
OnClickListener()
onClick() This is called when the user either clicks or touches or focuses upon any widget like
button, text, image etc. You will use onClick() event handler to handle such event.
OnLongClickListener()
This is called when the user either clicks or touches or focuses upon any widget like
onLongClick()
button, text, image etc. for one or more seconds. You will use onLongClick() event
handler to handle such event.
OnFocusChangeListener()
onFocusChang
This is called when the widget looses its focus ie. user goes away from the view item.
e()
You will use onFocusChange() event handler to handle such event.
OnFocusChangeListener()
onKey() This is called when the user is focused on the item and presses or releases a
hardware key on the device. You will use onKey() event handler to handle such event.
OnTouchListener()
onTouch() This is called when the user presses the key, releases the key, or any movement
gesture on the screen. You will use onTouch() event handler to handle such event.
OnMenuItemClickListener()
onMenuItemCli
This is called when the user selects a menu item. You will use onMenuItemClick()
ck()
event handler to handle such event.
Event Listeners Registration
• Event Registration is the process by which an
Event Handler gets registered with an Event
Listener so that the handler is called when the
Event Listener fires the event.
• There are several tricky ways to register your
event listener for any event. I'm going to show
you only top 3 ways:
a) Using an Anonymous Inner Class
b) Activity class implements the Listener interface.
c) Using Layout file activity_main.xml to specify
event handler directly.
Examples
• import android.os.Bundle;
• import android.app.Activity;
• import android.view.Menu;
• import android.view.View;
• import android.widget.Button;
• import android.widget.TextView;
• @Override
• protected void onCreate(Bundle savedInstanceState) {
• super.onCreate(savedInstanceState);
• setContentView(R.layout.activity_main);
• //--- find both the buttons---
• Button sButton = (Button) findViewById(R.id.button_s);
• Button lButton = (Button) findViewById(R.id.button_l)
• // -- register click event with first button ---
• sButton.setOnClickListener(new View.OnClickListener() {
• public void onClick(View v) {
• // --- find the text view --
• TextView txtView = (TextView) findViewById(R.id.text_id);
• // -- change text size --
• txtView.setTextSize(14);
• }
• });
•
• // -- register click event with second button ---
• lButton.setOnClickListener(new View.OnClickListener() {
• public void onClick(View v) {
• // --- find the text view --
• TextView txtView = (TextView) findViewById(R.id.text_id);
• // -- change text size --
• txtView.setTextSize(24);
• }
• });
• }
•
• @Override
• public boolean onCreateOptionsMenu(Menu
menu) {
• // Inflate the menu; this adds items to the
action bar if it is present.
• getMenuInflater().inflate(R.menu.main,
menu);
• return true;
• }
•
• }
EXAMPLE FOR REGISTRATION USING THE ACTIVITY
IMPLEMENTS LISTENER INTERFACE
1. Xml file
• <?xml version="1.0" encoding="utf-8"?>
• <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
• android:layout_width="fill_parent"
• android:layout_height="fill_parent"
• android:orientation="vertical" >
• <Button
• android:id="@+id/button_s"
• android:layout_height="wrap_content"
• android:layout_width="match_parent"
• android:text="@string/button_small"/>
• <Button
• android:id="@+id/button_l"
• android:layout_height="wrap_content"
• android:layout_width="match_parent"
• android:text="@string/button_large"/>
• <TextView
• android:id="@+id/text_id"
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:text="@string/hello_world" />
• </LinearLayout>
2. String.xml
• <?xml version="1.0" encoding="utf-8"?>
• <resources>
• <string name="app_name">Examp1</string>
• <string name="action_settings">Settings</string>
• <string name="hello_world">Hello world!</string>
• <string name="button_small">Small Font</string>
• <string name="button_large">Large Font</string>
• </resources>
3. Ex.java(Java File)
• package com.examp1;
• import android.os.Bundle;
• import android.app.Activity;
• import android.view.Menu;
• import android.view.View;
• import android.view.View.OnClickListener;
• import android.widget.Button;
• import android.widget.TextView;
• @Override
• protected void onCreate(Bundle savedInstanceState) {
• super.onCreate(savedInstanceState);
• setContentView(R.layout.activity_ex1);
• //--- find both the buttons---
• Button sButton = (Button) findViewById(R.id.button_s);
• Button lButton = (Button) findViewById(R.id.button_l);
• // -- register click event with first button ---
• sButton.setOnClickListener(this);
• // -- register click event with second button ---
• lButton.setOnClickListener(this);
• }
•
• //--- Implement the OnClickListener callback
• public void onClick(View v) {
• if(v.getId() == R.id.button_s)
• {
• // --- find the text view --
• TextView txtView = (TextView) findViewById(R.id.text_id);
• // -- change text size --
• txtView.setTextSize(14);
• return;
• }
• if(v.getId() == R.id.button_l)
• {
• // --- find the text view --
• TextView txtView = (TextView) findViewById(R.id.text_id);
• // -- change text size --
• txtView.setTextSize(24);
• return;
• }
• }
• @Override
• public boolean onCreateOptionsMenu(Menu menu) {
• // Inflate the menu; this adds items to the action bar if it is
present.
• getMenuInflater().inflate(R.menu.ex1, menu);
• return true;
• }
Example for Using Layout file activity_main.xml to
specify event handler directly
1. Main.xml
• <?xml version="1.0" encoding="utf-8"?>
• <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/androi
d"
• android:layout_width="fill_parent"
• android:layout_height="fill_parent"
• android:orientation="vertical" >
• <Button
• android:id="@+id/button_s"
• android:layout_height="wrap_content"
• android:layout_width="match_parent"
• android:text="@string/button_small"
• android:onClick="doSmall"/>
• <Button
• android:id="@+id/button_l"
• android:layout_height="wrap_content"
• android:layout_width="match_parent"
• android:text="@string/button_large"
• android:onClick="doLarge"/>
• <TextView
• android:id="@+id/text_id"
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:text="@string/hello_world" />
• </LinearLayout>
2. String.xml
• ?xml version="1.0" encoding="utf-8"?>
• <resources>
• <string name="app_name">Examp2</string>
• <string name="action_settings">Settings</string>
• <string name="hello_world">Hello
world!</string>
• <string name="button_small">Small
Font</string>
• <string name="button_large">Large Font</string>
• </resources>
3. MainActivity.Java
• package com.examp2;
• import android.os.Bundle;
• import android.app.Activity;
• import android.view.Menu;
• import android.view.View;
• import android.widget.TextView;
• @Override
• protected void onCreate(Bundle savedInstanceState) {
• super.onCreate(savedInstanceState);
• setContentView(R.layout.activity_main);
• }
• //--- Implement the event handler for the first button.
• public void doSmall(View v) {
• // --- find the text view --
• TextView txtView = (TextView) findViewById(R.id.text_id);
• // -- change text size --
• txtView.setTextSize(14);
• return;
• }
• //--- Implement the event handler for the second button.
• public void doLarge(View v) {
• // --- find the text view --
• TextView txtView = (TextView) findViewById(R.id.text_id);
• // -- change text size --
• txtView.setTextSize(24);
• return;
• }
• @Override
• public boolean onCreateOptionsMenu(Menu
menu) {
• // Inflate the menu; this adds items to the
action bar if it is present.
• getMenuInflater().inflate(R.menu.main,
menu);
• return true;
• }
•
• }
CheckBox