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
5. Architecture of Android User
Interface Components Architecture
UI Layout
UI Elements
UI Elements
Viewgroup
View
View
View
Viewgroup
View
6. UI
• 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
action.
• 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.
• ImageButton – Absolute Layout enables you to specify the exact location of its
children.
• 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.
• 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.widget.Button
android:onClick="doSomething " attribute one way to respond events
public void doSomething(View v)
implements OnClickListener
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
Intent- messenger
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
view.
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.
28. 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
understand.
Here all child views are arranged in the form of a table. No. of rows and
columns of the table can be explicitly defined.
31. 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
34. 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.
35. 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.