Linear Layout, Screen Support, and Events

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

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

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

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

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

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

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

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.)

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.)

What does this render? <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/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 android:text="@string/hello" /> <ImageView android:src="@drawable/icon" /> </LinearLayout>

What does this render? <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/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 android:text="@string/hello" /> <ImageView android:src="@drawable/icon" /> </LinearLayout>

Why isn’t the content centered? <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/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 android:text="@string/hello" /> <ImageView android:src="@drawable/icon" /> </LinearLayout>

What is the width of the LinearLayout? <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/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 android:text="@string/hello" /> <ImageView android:src="@drawable/icon" /> </LinearLayout>

What is the width of the LinearLayout? <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/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 android:text="@string/hello" /> <ImageView android:src="@drawable/icon" /> </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.

Adjust LinearLayout Width <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/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" android:text="@string/hello" /> <ImageView android:src="@drawable/icon" /> </LinearLayout> A possible fix is to make the linearlayout as wide as its parent so use match_parent

Take 2: What does this render? <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/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" android:text="@string/hello" /> <ImageView android:layout_gravity="right" android:src="@drawable/icon" /> </LinearLayout>

Take 2: What does this render? <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/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" android:text="@string/hello" /> <ImageView android:layout_gravity="right" android:src="@drawable/icon" /> </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?

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

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.

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.

layout_gravity & gravity Example

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.

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.

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.

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.

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.

layout_weight to the rescue <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/pink" 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>

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

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.

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

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

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

Creating an emulator for a specific device Use this article

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

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

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

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()

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.

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

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.

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

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.

@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;

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

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.

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

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.

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.

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).

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

Additional Info on Multitouch http://android-developers.blogspot.com/2010/06/making-sense-of-multitouch.html

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.

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

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

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

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

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.

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.

Focus Example

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.