1 / 166

Android 8: Layouts and Input Controls

Android 8: Layouts and Input Controls. Kirk Scott. These are the sections in this unit: 8.1 Introduction 8.2 Layouts (Taken from Resources Section of Tutorials) 8.3 Layouts (Taken from Layouts Section of Tutorials) 8.4 Linear Layout 8.5 Relative Layout 8.6 List View 8.7 Grid View.

galen
Download Presentation

Android 8: Layouts and Input Controls

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. Android 8: Layouts and Input Controls Kirk Scott

  2. These are the sections in this unit: • 8.1 Introduction • 8.2 Layouts (Taken from Resources Section of Tutorials) • 8.3 Layouts (Taken from Layouts Section of Tutorials) • 8.4 Linear Layout • 8.5 Relative Layout • 8.6 List View • 8.7 Grid View

  3. 8.1 Introduction

  4. As usual, the decision to present this material at this point is based partially on background ideas found in the book • The contents of the overheads consist largely of material taken from the online tutorials, with occasional commentary by me • The commentary will either be introduced as commentary or appear in square brackets • If not set off in this way, the content is taken from the tutorials

  5. As mentioned before, what you’re getting is an idiosyncratic path through some of the various topics covered in the tutorials • The goal is to cover enough of the items involved in sufficient depth so that the perceptive learner could pick up more when needed

  6. 8.2 Layouts (Taken from Resources Section of Tutorials)

  7. Layout Resource • A layout resource defines the architecture for the UI in an Activity or a component of a UI. • file location: • res/layout/filename.xml • The filename will be used as the resource ID. • compiled resource datatype: • Resource pointer to a View (or subclass) resource. • resource reference: • In Java: R.layout.filename • In XML: @[package:]layout/filename

  8. syntax: • <?xml version="1.0" encoding="utf-8"?><ViewGroupxmlns:android="http://schemas.android.com/apk/res/android"android:id="@[+][package:]id/resource_name"android:layout_height=["dimension" | "fill_parent" | "wrap_content"]android:layout_width=["dimension" | "fill_parent" | "wrap_content"]    [ViewGroup-specific attributes] >    <Viewandroid:id="@[+][package:]id/resource_name"android:layout_height=["dimension" | "fill_parent" | "wrap_content"]android:layout_width=["dimension" | "fill_parent" | "wrap_content"]        [View-specific attributes] >        <requestFocus/>    </View>    <ViewGroup >        <View />    </ViewGroup>    <include layout="@layout/layout_resource"/></ViewGroup>

  9. Note: • The root element can be either a ViewGroup, a View, or a <merge> element, but there must be only one root element and it must contain the xmlns:android attribute with the android namespace as shown.

  10. elements: • <ViewGroup> • A container for other View elements. • There are many different kinds of ViewGroup objects and each one lets you specify the layout of the child elements in different ways. • Different kinds of ViewGroup objects include LinearLayout, RelativeLayout, and FrameLayout. • You should not assume that any derivation of ViewGroup will accept nested Views.

  11. Some ViewGroups are implementations of the AdapterView class, which determines its children only from an Adapter. • [This is not the same as an adapter class in the Java API. • It has more in common with the adapter design pattern of CSCE 202. • More information will be given later in this unit.]

  12. attributes: • android:id • Resource ID. • A unique resource name for the element, which you can use to obtain a reference to the ViewGroup from your application. • See more about the value for android:id below.

  13. android:layout_height • Dimension or keyword. Required. • The height for the group, as a dimension value (or dimension resource) or a keyword ("fill_parent" or "wrap_content"). • See the valid values below.

  14. android:layout_width • Dimension or keyword. Required. • The width for the group, as a dimension value (or dimension resource) or a keyword ("fill_parent" or "wrap_content"). • See the valid values below.

  15. More attributes are supported by the ViewGroup base class, and many more are supported by each implementation of ViewGroup. • For a reference of all available attributes, see the corresponding reference documentation for the ViewGroup class (for example, the LinearLayout XML attributes).

  16. <View> • An individual UI component, generally referred to as a "widget". • Different kinds of View objects include TextView, Button, and CheckBox. • attributes: • android:id • Resource ID. • A unique resource name for the element, which you can use to obtain a reference to the View from your application. • See more about the value for android:id below.

  17. android:layout_height • Dimension or keyword. Required. • The height for the element, as a dimension value (or dimension resource) or a keyword ("fill_parent" or "wrap_content"). • See the valid values below.

  18. android:layout_width • Dimension or keyword. Required. • The width for the element, as a dimension value (or dimension resource) or a keyword ("fill_parent" or "wrap_content"). • See the valid values below.

  19. More attributes are supported by the View base class, and many more are supported by each implementation of View. • Read Layouts for more information. • For a reference of all available attributes, see the corresponding reference documentation (for example, the TextView XML attributes).

  20. <requestFocus> • Any element representing a View object can include this empty element, which gives its parent initial focus on the screen. • You can have only one of these elements per file.

  21. <include> • Includes a layout file into this layout. • attributes: • layout • Layout resource. Required. • Reference to a layout resource.

  22. android:id • Resource ID. • Overrides the ID given to the root view in the included layout. • android:layout_height • Dimension or keyword. • Overrides the height given to the root view in the included layout. • Only effective if android:layout_width is also declared.

  23. android:layout_width • Dimension or keyword. • Overrides the width given to the root view in the included layout. • Only effective if android:layout_height is also declared. • You can include any other layout attributes in the <include> that are supported by the root element in the included layout and they will override those defined in the root element.

  24. Caution: • If you want to override layout attributes using the <include> tag, you must override both android:layout_height and android:layout_width in order for other layout attributes to take effect.

  25. Another way to include a layout is to use ViewStub. • It is a lightweight View that consumes no layout space until you explicitly inflate it, at which point, it includes a layout file defined by its android:layout attribute. • For more information about using ViewStub, read Loading Views On Demand.

  26. <merge> • An alternative root element that is not drawn in the layout hierarchy. • Using this as the root element is useful when you know that this layout will be placed into a layout that already contains the appropriate parent View to contain the children of the <merge> element. • This is particularly useful when you plan to include this layout in another layout file using <include> and this layout doesn't require a different ViewGroup container. • For more information about merging layouts, read Re-using Layouts with <include/>.

  27. Value for android:id • For the ID value, you should usually use this syntax form: "@+id/name". • The plus symbol, +, indicates that this is a new resource ID and the aapt tool will create a new resource integer in the R.java class, if it doesn't already exist. For example: • <TextViewandroid:id="@+id/nameTextbox"/>

  28. The nameTextbox name is now a resource ID attached to this element. • You can then refer to the TextView to which the ID is associated in Java: • findViewById(R.id.nameTextbox); • This code returns the TextView object. • However, if you have already defined an ID resource (and it is not already used), then you can apply that ID to a View element by excluding the plus symbol in the android:id value.

  29. Value for android:layout_height and android:layout_width: • The height and width value can be expressed using any of the dimension units supported by Android (px, dp, sp, pt, in, mm) or with the following keywords:

  30. Custom View elements • You can create your own custom View and ViewGroup elements and apply them to your layout the same as a standard layout element. • You can also specify the attributes supported in the XML element. • To learn more, see the Custom Components developer guide.

  31. example: • XML file saved at res/layout/main_activity.xml: <?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>

  32. This application code will load the layout for an Activity, in the onCreate() method: • public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main_activity);} • [Read it again for the second time… • The point is that the onCreate() method starts with a setContentView() call. • This is what connects a Java app file to its layout file.]

  33. 8.3 Layouts (Taken from Layouts Section of Tutorials)

  34. 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: • [1] Declare UI elements in XML. • Android provides a straightforward XML vocabulary that corresponds to the View classes and subclasses, such as those for widgets and layouts.

  35. [2] Instantiate layout elements at runtime. • Your application can create View and ViewGroup objects (and manipulate their properties) programmatically.

  36. The Android framework gives you the flexibility to use either or both of these methods for declaring and managing your application's UI. • For example, you could declare your application's default layouts in XML, including the screen elements that will appear in them and their properties. • You could then add code in your application that would modify the state of the screen objects, including those declared in XML, at run time.

  37. The advantage to declaring your UI in XML is that it enables you to better separate the presentation of your application from the code that controls its behavior. • Your UI descriptions are external to your application code, which means that you can modify or adapt it without having to modify your source code and recompile.

  38. For example, you can create XML layouts for different screen orientations, different device screen sizes, and different languages. • Additionally, declaring the layout in XML makes it easier to visualize the structure of your UI, so it's easier to debug problems. • As such, this document focuses on teaching you how to declare your layout in XML.

  39. If you're interested in instantiating View objects at runtime, refer to the ViewGroup and View class references.

  40. In general, the XML vocabulary for declaring UI elements closely follows the structure and naming of the classes and methods, where element names correspond to class names and attribute names correspond to methods. • In fact, the correspondence is often so direct that you can guess what XML attribute corresponds to a class method, or guess what class corresponds to a given xml element.

  41. However, note that not all vocabulary is identical. • In some cases, there are slight naming differences.

  42. For example, the EditText element has a text attribute that corresponds to EditText.setText(). • [They got their explanations slightly out of order. • The text attribute and setText() method are an example of correspondence. • The are not intended as an example of a case with a slight difference.]

  43. Tip: • Learn more about different layout types in Common Layout Objects. • There are also a collection of tutorials on building various layouts in the Hello Views tutorial guide.

  44. Write the XML • Using Android's XML vocabulary, you can quickly design UI layouts and the screen elements they contain, in the same way you create web pages in HTML — with a series of nested elements. • Each layout file must contain exactly one root element, which must be a View or ViewGroup object.

  45. Once you've defined the root element, you can add additional layout objects or widgets as child elements to gradually build a View hierarchy that defines your layout. • For example, here's an XML layout that uses a vertical LinearLayout to hold a TextView and a Button:

  46. <?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>

  47. After you've declared your layout in XML, save the file with the .xml extension, in your Android project's res/layout/ directory, so it will properly compile. • More information about the syntax for a layout XML file is available in the Layout Resources document.

  48. Load the XML Resource • When you compile your application, each XML layout file is compiled into a View resource. • You should load the layout resource from your application code, in your Activity.onCreate() callback implementation.

More Related