1. Linear Layout, Screen Support, and Events

2. Linear Layout Supports 2 orientations:
Horizontal
Vertical
I often get confused with how each orientation is laid out.

3. Horizontal Orientation
One row, many columns
Items placed beside each other
# # # # # # # # # #

4. Vertical Orientation One column, many rows
Items stacked on top of each other #

5. Gravity Two types of Gravity in Android
layout_gravity
A lot of people get confused with the appropriate usage of each one.

6. android:gravity
Positions the contents of the view (what is inside the view)
Has several values:
top
bottom
left
right
center (horizontal and vertical)
center_vertical
center_horizontal

7. android:gravity Use bit masking to combine multiple values
android:gravity="center_horizontal|bottom“
android:gravity=“top|bottom”
android:gravity=“top|right”

8. android:layout_gravity
Positions the view with respect to its parent
Supports same values as android:gravity
Not all ViewGroups support this attribute.

9. gravity vs. layout_gravity
I still don’t understand the difference…
Using gravity on a ViewGroup will position all of its children a specific way.
Using a LinearLayout as the root view to encapsulate everything.
The LinearLayout has an attribute of
gravity with a value equal to center.
(That is why all the button are centered
in the screen.)

10. gravity vs. layout_gravity
Using layout_gravity, a child can override the gravity set on it by its parent.
Using a LinearLayout as the root view to encapsulate everything.
The blue button has an attribute of
layout_gravity with a value equal to right.
(That is why all the button are centered
in the screen, except the blue button which is on the right.)

11. What does this render?
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width=“match_parent" android:layout_height="match_parent" > <LinearLayout android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" > <TextView /> <ImageView /> </LinearLayout>

12. What does this render?
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width=“match_parent" android:layout_height="match_parent" > <LinearLayout android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" > <TextView /> <ImageView /> </LinearLayout>

13. Why isn’t the content centered?
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width=“match_parent" android:layout_height="match_parent" > <LinearLayout android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" > <TextView /> <ImageView /> </LinearLayout>

14. What is the width of the LinearLayout?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="
android:orientation="vertical"
android:layout_width=“match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
/>
<ImageView
/>
</LinearLayout>

15. What is the width of the LinearLayout?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="
android:orientation="vertical"
android:layout_width=“match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
/>
<ImageView
/>
</LinearLayout>
Because the parent LinearLayout has width “wrap_content”, it’s essentially “hugging” the two views inside and so they have no space to center themselves in.

16. Adjust LinearLayout Width
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width=“match_parent" android:layout_height="match_parent" > <LinearLayout android:orientation="horizontal" android:layout_height="wrap_content" android:gravity="center" > <TextView android:layout_width="wrap_content" /> <ImageView /> </LinearLayout>
A possible fix is to make the linearlayout as wide as its parent so use match_parent

17. Take 2: What does this render?
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width=“match_parent" android:layout_height=“match_parent" > <LinearLayout android:orientation="horizontal" android:layout_height="wrap_content" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left" /> <ImageView android:layout_gravity="right" /> </LinearLayout>

18. Take 2: What does this render?
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width=“match_parent" android:layout_height=“match_parent" > <LinearLayout android:orientation="horizontal" android:layout_height="wrap_content" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left" /> <ImageView android:layout_gravity="right" /> </LinearLayout>
Okay so my my parent fills the entire width and I tell the TextView to position itself with respect to its parent on the left, and I tell the ImageView to position itself with respect to its parent on the right, but how come it doesn’t work?

19. LinearLayouts and layout_gravity
Depending on the orientation of the LinearLayout, the LinearLayout’s children can only use certain values for layout_gravity.

20. layout_gravity with horizontal orientation
For a horizontal Linear Layout the following values make sense:
top
center
Bottom
That is because the children of a horizontal Linear Layout are laid out horizontally one after the other.
With horizontal orientation, the only thing can be controlled using the android:layout_gravity is how a child view is positioned vertically.

21. layout_gravity with vertical orientaiton
For a vertical Linear Layout the following values make sense:
left
center
Right
That is because the children of a vertical Linear Layout are laid out vertically one below the other.
With vertical orientation, the only thing can be controlled using the android:layout_gravity is how a child view is positioned horizontally.

22. layout_gravity & gravity Example

23. layout_weight Attribute only works for LinearLayout
Indicates how much of the extra space in the LinearLayout will be allocated to the view associated with this attribute.

24. layout_weight
The size of the View will be determined based on the relation of all sibling’s weights to each other.
If, for example, all views define the same weight, then the available space will be distributed equally among them.

25. layout_weight
Which axis (width or height) should be affected can be controlled by setting the respective size to a value of 0dp.
Weights don’t have to add up to 1, although it’s common to distribute layout weight over all children as fractions of 1 (percentage semantics).
The relation between all weights is what matters.

26. Problem
I have 4 Views whose width I want to be equally distributed inside their parent.
I want this to work on any device, and I don’t want to calculate the width each time the app runs.

27. layout_weight to the rescue
Using layout_weight we can assign an equal weight to each child view and at runtime the LinearLayout will equally distribute any remaining space to the children.

28. layout_weight to the rescue
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:background="#00F" > <View android:layout_width="0dp" android:layout_weight=".25" android:background="#0F0"/> android:background="#F00"/> android:background="#FC0"/> android:background="#FF0"/> </LinearLayout>

29. Screen Support Key Terms
Screen Density
Resolution
Orientation
Density-independent pixel

30. Screen Density
The quantity of pixels within a physical area of the screen.
Usually referred to as dpi
Android groups screen densities by: low, medium, high, extra high
A low density screen has fewer pixels within a given physical area than a “normal” or “high” density screen.

31. Orientation
The orientation of the screen from the user’s point of view
Either landscape or portrait
You can create specific layouts catered to your devices orientation

32. Density Independent Pixel (dp)
A virtual pixel unit
Should be used for defining UI layout that can be reused for multiple screen sizes.

33. How big is a dp? Use the AndroidPixels App
It shows for each device density type what 1dp is equivalent to in pixels.

34. Creating an emulator for a specific device
Use this article

35. Handling UI Events Topics Overview of UI Events
Implementing UI Event Listeners

36. UI Events Key Touch Click Long Click Focus Change Track ball
Drag and Drop

37. Key Events Called when a hardware key is dispatched to focused a view.
Event Listener Interface: View.OnKeyListener
Callback Method: onKey()

38. Touch Events
This is called when the user performs an action qualified as a touch event:
Press
Release
Movement (within the bounds of a view).
Event Listener Interface: View.OnTouchListener
Callback Method: onTouch()

39. onTouch(View v, MotionEvent event)
Takes 2 parameters
Returns true if the listener consumed the event, false otherwise.
Name
Description v
The view the touch event has been dispatched to
event
The MotionEvent object containing full information about the event.

40. MotionEvent Used to report movement for Mouse Pen Finger (Touch)
Trackball

41. MotionEvent for touch
Contains data about “pointers” aka active touch points on the device’s screen.
For each pointer you can receive
X/Y coordinates
Size
Pressure
Value describing what kind of motion occurred.

42. MotionEvent for single pointer
getAction() – return the action being performed (action_down/move/up/cancel).
getX() - returns the X coordinate of this event for a single pointer.
getY() - returns the Y coordinate of this event for the given pointer

43. getAction() ACTION_DOWN - A touch gesture has started.
ACTION_MOVE - A change has occurred between touch down and release.
ACTION_UP – A touch gesture has finished.
ACTION_CANCEL – A touch gesture has been aborted.

44. @Override
public boolean onTouchEvent(MotionEvent ev) {
final int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN: {
final float x = ev.getX();
final float y = ev.getY();
// Remember where we started
mLastTouchX = x;
mLastTouchY = y;
break; }
case MotionEvent.ACTION_MOVE: {
// Calculate the distance moved
final float dx = x - mLastTouchX;
final float dy = y - mLastTouchY;
// Move the object
mPosX += dx;
mPosY += dy;
// Remember this touch position for the next move event
// Invalidate to request a redraw
invalidate();
return true;

45. MotionEvent for multiple pointers
The MotionEvent class provides many methods to query the position and other properties of pointers:
getX(int) – returns X pos for given pointer index.
getY(int) – returns Y pos for given pointer index.
getPointerCount() – The number of pointers for this event

46. MotionEvent for multiple pointers
getPointerId(int) – pointer id associated with the pointer index for this event
findPointerIndex(int) – given a pointer id, find the index of its data.

47. New getAction() values
ACTION_POINTER_DOWN – fired when a secondary pointer goes down.
ACTION_POINTER_UP – fired when a secondary pointer goes up.

48. Pointer index
Each pointer index corresponds to a finger for the event.
The pointer index ranges from 0 to one less than the returned value of getPointerCount().
The order in which individual pointers appear is undefined; therefore you can’t rely on the pointer index to map to the same finger across touch events.

49. Multiple Pointers are hard!
When working with multiple pointers, android provides many methods that use the pointer index.
Pointer indices can change across events; therefore, we need another way to identify pointers.

50. Pointer ID
The pointer id of a finger is guaranteed to remain constant as long as the pointer remains active (until it ACTION_UPs)
When you want to keep track of a finger, save its ID on action down.
Retrieve the saved finger’s pointer index for the current event with findPointerIndex(int).

51. Multiple Pointers Example
@Override public boolean onTouchEvent(MotionEvent ev) {     final int action = ev.getAction();     switch (action & MotionEvent.ACTION_MASK) {     case MotionEvent.ACTION_DOWN: {         final float x = ev.getX();         final float y = ev.getY();                 mLastTouchX = x;         mLastTouchY = y;         // Save the ID of this pointer         mActivePointerId = ev.getPointerId(0);         break;     }             case MotionEvent.ACTION_MOVE: {         // Find the index of the active pointer and fetch its position         final int pointerIndex = ev.findPointerIndex(mActivePointerId);         final float x = ev.getX(pointerIndex);         final float y = ev.getY(pointerIndex);                 final float dx = x - mLastTouchX;         final float dy = y - mLastTouchY;                 mPosX += dx;         mPosY += dy;                 mLastTouchX = x;         mLastTouchY = y;                 invalidate();         break;     }             case MotionEvent.ACTION_UP: {         mActivePointerId = INVALID_POINTER_ID;         break;     }             case MotionEvent.ACTION_CANCEL: {         mActivePointerId = INVALID_POINTER_ID;         break;     }         case MotionEvent.ACTION_POINTER_UP: {         // Extract the index of the pointer that left the touch sensor         final int pointerIndex = (action & MotionEvent.ACTION_POINTER_INDEX_MASK)                 >> MotionEvent.ACTION_POINTER_INDEX_SHIFT;         final int pointerId = ev.getPointerId(pointerIndex);         if (pointerId == mActivePointerId) {             // This was our active pointer going up. Choose a new             // active pointer and adjust accordingly.             final int newPointerIndex = pointerIndex == 0 ? 1 : 0;             mLastTouchX = ev.getX(newPointerIndex);             mLastTouchY = ev.getY(newPointerIndex);             mActivePointerId = ev.getPointerId(newPointerIndex);         }         break;     }     }         return true; }
Multiple Pointers Example

52. Additional Info on Multitouch

53. Click Events
A Click is a pair of down/up events performed either with the keyboard, trackball, or touch screen.
If the view receives a down event but does not receive a following up event, then the click event does not occur.

54. Click Events
Event Listener Interface: View.OnClickListener Callback Method: onClick() Parameters: v The view that has been clicked

55. Long Click Events
Happens when a item is pressed and held (for one second).
Applies to touch, trackball, hard keys.

56. Long Click Events Event Listener Interface: View.OnLongClickListener
Callback Method: onLongClick()
Parameters:
v The view that has been clicked and held

57. Trackball events
To my knowledge, trackballs on devices have completely disappeared.
So don’t worry about them.

58. Focus Change events Focus Change applies to physical keyboards.
There are still a few devices that support a physical QWERTY keyboard.
However, BlueTooth keyboards are becoming more popular and will work with any BlueTooth enabled device.

59. What is Focus?
When using a physical keyboard, users can navigate through the UI using arrow keys.
If a view has focus, a focus ring/rectangle will appear around the view.
Focus also occurs with EditText views when they are selected.

60. Focus Example

61. Focus Tip
Unless you’re using a physical hard keyboard or soft/virtual keyboard don’t worry about focus.
Sometimes developers will try and use focus at inappropriate times so use the above tip.