1. Mobile Computing I
Lab session 3
Department of Computer Science
2. Last session
Hello world application…
3. This session
Creating User Interfaces
• Fundamental Android UI Design
• Introducing Views
• Introducing Layouts
• Creating New Views
• Drawable Resources
• Resolution and Density Independence
• Creating and Using Menus
4. Fundamental Android UI Design
2. View Groups
5. Architecture of Android User
Interface Components Architecture
• A View is an object that draws something on the screen that the
user can interact with.
• A View is an object that you can put on your layout such as a
TextView, EditText, ListView, or ImageView. It is the basic building
block for user interface components.
• A ViewGroup is an object that holds other View (and ViewGroup)
objects in order to define the layout of the interface.
• Each view group is an invisible container that organizes child
views, while the child views may be input controls or other widgets
that draw some part of the UI.
• ViewGroup (LinearLayout) View (TextView)
7. Android Views
Button - A push-button that can be pressed, or clicked, by the user to perform an
• TextView - This control is used to display text to the user.
• EditText - EditText is a predefined subclass of TextView that includes rich
• 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.
• ImageButton – Absolute Layout enables you to specify the exact location of its
• 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
• ToggleButton - An on/off button with a light indicator.
• RadioButton - The RadioButton has two states: either checked or unchecked.
• Spinner - A drop-down list that allows users to select one value from a set.
• DatePicker - The DatePicker view enables users to select a date of the day.
And others you check in the Eclipse IDE
8. Button and Events
Click button-> Event triggered->received by android os->interested one listens
android:onClick="doSomething " attribute one way to respond events
public void doSomething(View v)
link xml and java(findViewById)
refer code in java by saying that this particular class implements the listener.
Step 1: Tell android you are interested in listening to a button clickimplements OnClickListener
Step 2: Bring xml inside java
Step 3: Tell your java button who is responding when it is clicked
Step 4: Tell what should happen when clicked
9. Button and Events
1.Activity implements OnClickListener
2.Separate class which implements OnClickListener
create an object in the main class for the class which handles it
3.Using interface variable(anonymous inner class)
Activities - user interacts
Services - runs in main thread, users cannot see them, even activity
off it will run, background e.g., downloading a file
Broadcast receivers- sleeps all the time e,g., battery is low
notification will be thrown
use an intent to start a new activity(e,g., going to a different page)
18. Values used
wrap_content – The component just want to display big enough to
enclose its content only.
fill_parent – The component want to display as big as its parent, and fill
in the remaining spaces.
19. Linear Layout
• Linear layout arranges all the children widgets in one direction like
vertical or horizontal as shown in the image.
23. Relative Layout
Position of each view(e.g, Textview, Radiobutton) is decided with respect to another
Relative layout arranges the children widgets relative to the parent layout or relative
to each other. Best way to understand it, look at the image.
27. Table Layout
Table layouts in Android works in the same way HTML table layouts work.
You can divide your layouts into rows and columns. Its very easy to
Here all child views are arranged in the form of a table. No. of rows and
columns of the table can be explicitly defined.
30. Frame Layout
FrameLayout is designed to display a single item at a time. You can have multiple
elements within a FrameLayout but each element will be positioned based on the top
left of the screen. Elements that overlap will be displayed overlapping. I have created
a simple XML layout using FrameLayout that shows how this works.
Since Frame Layout is only able to display single UI element at a time or multiple UI
elements but each of them is overlapping on each others, so you can see that
33. Grid View and Grid Layout
• A GridView is a ViewGroup that displays items in twodimensional scrolling grid. The items in the grid come from
the ListAdapter associated with this view.
• This is what you'd want to use (keep using). Because a
GridView gets its data from a ListAdapter, the only data
loaded in memory will be the one displayed on screen.
GridViews, much like ListViews reuse and recycle their views
for better performance.
• Whereas a GridLayout is a layout that places its children in
a rectangular grid.
• It was introduced in API level 14, and was recently backported
in the Support Library. Its main purpose is to solve alignment
and performance problems in other layouts.
34. Grid Layout
• GridLayout was introduced with Android 4.0. This
layout allows you to organize a view into a Grid.
GridLayout separates its drawing area into:
rows, columns, and cells.
• You can specify how many columns you want for
define for each View in which row and column it
should be placed and how many columns and rows
it should use. If not specified GridLayout uses
defaults, e.g. one column, one row and the position
of a View depends on the order of the declaration
of the Views.