1 / 63

Linear Layout, Screen Support, and Events

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.

shubha
Download Presentation

Linear Layout, Screen Support, and Events

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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 • gravity • 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"?> <LinearLayoutxmlns: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:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon" /> </LinearLayout> </LinearLayout>

  12. What does this render? <?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns: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:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon" /> </LinearLayout> </LinearLayout>

  13. Why isn’t the content centered? <?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns: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:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon" /> </LinearLayout> </LinearLayout>

  14. What is the width of the LinearLayout? <?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns: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:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon" /> </LinearLayout> </LinearLayout>

  15. What is the width of the LinearLayout? <?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns: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:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon" /> </LinearLayout> </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"?> <LinearLayoutxmlns: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=“match_parent" android:layout_height="wrap_content" android:gravity="center" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon" /> </LinearLayout> </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"?> <LinearLayoutxmlns: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=“match_parent" 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_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:src="@drawable/icon" /> </LinearLayout> </LinearLayout>

  18. Take 2: What does this render? <?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns: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=“match_parent" 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_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:src="@drawable/icon" /> </LinearLayout> </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"?> <LinearLayoutxmlns: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_height="match_parent" android:layout_weight=".25" android:background="#0F0"/> <View android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight=".25" android:background="#F00"/> <View android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight=".25" android:background="#FC0"/> <View android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight=".25" 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. Resolution • The total number of pixels on a screen • Use the resolution to manage layouts for your application based on available screen width/height. • Create layouts that are configured for • Smallest width • Available screen width • Available screen height

  32. Resolution • If you want to create layouts for specific resolutions, find more information here.

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

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

  35. How big is a dp? • See my Android Display Metric Cheat Sheet.

  36. Creating an emulator for a specific device • Use this article

  37. Handling UI Events Topics • Overview of UI Events • Implementing UI Event Listeners

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

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

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

  41. onTouch(View v, MotionEvent event) • Takes 2 parameters • Returnstrue if the listener consumed the event, false otherwise.

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

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

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

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

  46. @Override publicbooleanonTouchEvent(MotionEventev){ finalint action =ev.getAction(); switch(action){ caseMotionEvent.ACTION_DOWN:{ finalfloat x =ev.getX(); finalfloat y =ev.getY(); // Remember where we started mLastTouchX= x; mLastTouchY= y; break; } caseMotionEvent.ACTION_MOVE:{ finalfloat x =ev.getX(); finalfloat y =ev.getY(); // Calculate the distance moved finalfloat dx = x -mLastTouchX; finalfloatdy= y -mLastTouchY; // Move the object mPosX+= dx; mPosY+=dy; // Remember this touch position for the next move event mLastTouchX= x; mLastTouchY= y; // Invalidate to request a redraw invalidate(); break; } } returntrue; }

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

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

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

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

More Related