Android Training (Android UI)
Download as PPTX, PDF4 likes3,323 views
This document provides an overview of layouts and user interface design in Android. It discusses the basic building blocks of Android UIs which are Views and ViewGroups. It describes common layout types like LinearLayout, RelativeLayout and TableLayout that can be used to position Views. It also covers attributes like id, width/height, padding etc. that can customize View properties. The document demonstrates how to declare layouts in XML and set View attributes. It emphasizes keeping layout hierarchies shallow to optimize performance.
Android Training (Android UI)
- 1. Layout Android Training By Khaled Anaqwa
- 2. As if a device can function if it has no style. As if a device can be called stylish that does not function superbly.... Yes, beauty matters. Boy, does it matter. It is not surface, it is not an extra, it is the thing itself. —STEPHEN FRY, THE GUARDIAN (OCTOBER 27, 2007)
- 3. User Interface All user interface elements in an Android app are built using View and ViewGroup objects. A View is an object that draws something on the screen that the user can interact with. A ViewGroup is an object that holds other View (and ViewGroup) objects in order to define the layout of the interface. The user interface for each component of your app is defined using a hierarchy of View and ViewGroup objects.
- 4. This hierarchy tree can be as simple or complex as you need it to be.
- 5. Layouts A layout defines the visual structure for a user interface, such as the UI for an activity or app widget. You can declare a layout in two ways: Declare UI elements in XML. Instantiate layout elements at runtime The Android framework gives you the flexibility to use either or both . The advantage to declaring your UI in XML is that it enables you to better separate the presentation from the code that controls its behavior.
- 6. Using Eclipse to Design Layout Resources Use the Outline pane to Add and Remove controls to your layout resource. Select a specific control (either in the Preview or the Outline) and use the Property pane to adjust a specific control’s attributes. Use the XML tab to edit the XML definition directly.
- 7. Write the XML Each layout file must contain exactly one root element. XML vocabulary for declaring UI elements closely follows the structure and naming of the classes and methods. For example, the EditText element has a text attribute that corresponds to EditText.setText().
- 8. Attributes Overview Every View and ViewGroup object supports their own variety of XML attributes. Some attributes are specific (e.g. TextView supports the textSize attribute) These attributes are also inherited by any View objects that may extend this class. Some are common to all View objects, because they are inherited from the root View class (like the id attribute).
- 9. Attributes Examples ID (Any View object may have an integer ID associated with it, to uniquely identify the View within the tree.) android:id="@+id/my_button” The at-symbol (@) at the beginning of the string indicates that the XML parser should parse and expand the rest of the ID string and identify it as an ID resource. The plus-symbol (+) means that this is a new resource name that must be created and added to our resources (in the R.java file) android:id="@android:id/empty” (from android.R)
- 10. Demo Create View in xml Create the same view in code
- 11. Question? If I Instantiate view at runtime how I can assign ID to it ?
- 12. Attributes Examples Layout Parameters (XML layout attributes named layout_something ) for the View that are appropriate for the ViewGroup in which it resides. All view groups include a width and height (layout_width and layout_height), and each view is required to define them. wrap_content tells your view to size itself to the dimensions required by its content fill_parent (renamed match_parent in API Level 8) tells your view to become as big as its parent view group will allow.
- 14. Every LayoutParams subclass has its own syntax for setting values. Each child element must define LayoutParams that are appropriate for its parent, though it may also define different LayoutParams for its own children.
- 15. Note (not Galaxy Note) specifying a layout width and height using absolute units such as pixels is not recommended. Instead, using relative measurements such as densityindependent pixel units (dp), wrap_content, or fill_parent, is a better approach, because it helps ensure that your application will display properly across a variety of device screen sizes.
- 16. Demo !! XML Code
- 17. Try !!! Create XML layout that uses a vertical LinearLayout to hold a TextView and a Button TextView id = text Text= “Hello, I am a TextView” Button id=button text="Hello, I am a Button"
- 18. Attributes Examples Size, Padding and Margins The accepted measurement types: Px, dp(Density-independent Pixels), sp(Scaleindependent Pixels), pt, in, mm. We can define it in Dimension Values.
- 19. Note Although you can nest one or more layouts within another layout to achieve your UI design, you should strive to keep your layout hierarchy as shallow as possible. Your layout draws faster if it has fewer nested layouts (a wide view hierarchy is better than a deep view hierarchy).Why?
- 21. As you can see, the code can rapidly grow in size as more controls are added to the screen, making screen contents more difficult to maintain or reuse.
- 22. Exploring Various Layout Types
- 23. FrameLayout designed to display a stack of child View controls. This can be used to show multiple controls within the same screen space
- 24. LinearLayout designed to display child View controls in a single row or column.(Orientation= vertically or horizontally.) This is a very handy layout method for creating forms.
- 25. Note To create a linear layout in which each child uses the same amount of space on the screen, set the android:layout_height of each view to "0dp" (for a vertical layout) or the android:layout_width of each view to "0dp" (for a horizontal layout). Then set the android:layout_weight of each view to "1".
- 26. Try to make it !!
- 27. Hint if there are three text fields and two of them declare a weight of 1, while the other is given no weight, the third text field without weight will not grow and will only occupy the area required by its content. The other two will expand equally to fill the space remaining after all three fields are measured. If the third field is then given a weight of 2 (instead of 0), then it is now declared more important than both the others, so it gets half the total remaining space, while the first two share the rest equally.
- 28. RelativeLayout designed to display child View controls in relation to each other. You can also align child View controls relative to the parent edges. Is a very powerful utility for designing a user interface because it can eliminate nested view groups and keep your layout hierarchy flat, which improves performance.
- 29. Positioning Views android:layout_alignParentTop If "true", makes the top edge of this view match the top edge of the parent. android:layout_centerVertical If "true", centers this child vertically within its parent. android:layout_below Positions the top edge of this view below the view specified with a resource ID. android:layout_toRightOf Positions the left edge of this view to the right of the view specified with a resource ID.
- 30. Try To make it !!
- 31. TableLayout designed to organize child View controls into rows and columns. designed to organize child View controls into rows and columns.
- 32. Create From First Name Second Name Job Email Submit OnClick (Print All of them)
- 33. Combining Layouts This means that layout controls can be nested
- 34. Event Listeners onClick() onLongClick() onFocusChange() onTouch() onKey()
- 35. How to Handle Listeners Implement My Listener Let Class Implement it
Editor's Notes
- #12: Create an ids.xml file and place all your required ids in it as below<?xml version="1.0" encoding="utf-8"?><resources> <item type="id" name="layout1" /> <item type="id" name="layout2" /> <item type="id" name="layout3" /></resources>Now for your dynamically created layouts or views you can use these ids as belownew_layout1.setId(R.id.layout1);new_view2.setId(R.id.layout2);new_layout3.setId(R.id.layout3);
- #18: <?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextViewandroid:id="@+id/text"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Hello, I am a TextView" /> <Button android:id="@+id/button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Hello, I am a Button" /></LinearLayout>
- #20: One View May Cause Bottle Neck …
- #27: <?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><EditTextandroid:id="@+id/editText1"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:text="editText1" /><EditTextandroid:id="@+id/editText2"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="2"android:gravity="center" android:text="editText2" /><EditTextandroid:id="@+id/editText3"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:text="editText3" /><EditTextandroid:id="@+id/editText4"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="3"android:gravity="center"android:text="editText4" /></LinearLayout>
- #31: <?xml version="1.0" encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:paddingLeft="16dp"android:paddingRight="16dp" > <EditTextandroid:id="@+id/name"android:layout_width="fill_parent"android:layout_height="wrap_content"android:hint="@string/reminder" /> <Spinnerandroid:id="@+id/dates"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_below="@id/name"android:layout_alignParentLeft="true"android:layout_toLeftOf="@+id/times" /> <Spinnerandroid:id="@id/times"android:layout_width="96dp"android:layout_height="wrap_content"android:layout_below="@id/name"android:layout_alignParentRight="true" /> <Buttonandroid:layout_width="96dp"android:layout_height="wrap_content"android:layout_below="@id/times"android:layout_alignParentRight="true"android:text="@string/done" /></RelativeLayout>