Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Android xml-based layouts-chapter5

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 8 Anzeige

Android xml-based layouts-chapter5

Herunterladen, um offline zu lesen

While it is technically possible to create and attach widgets to your activity purely through Java code, the more common approach is to use an XML-based layout file. Dynamic instantiation of widgets is reserved for more complicated scenarios, where the widgets are not known at compile time (e.g., populating a column of radio buttons based on data retrieved from the Internet).
With that in mind, this chapter discuss the XML way to lay out Android activity views that way

While it is technically possible to create and attach widgets to your activity purely through Java code, the more common approach is to use an XML-based layout file. Dynamic instantiation of widgets is reserved for more complicated scenarios, where the widgets are not known at compile time (e.g., populating a column of radio buttons based on data retrieved from the Internet).
With that in mind, this chapter discuss the XML way to lay out Android activity views that way

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie Android xml-based layouts-chapter5 (20)

Anzeige

Weitere von Dr. Ramkumar Lakshminarayanan (20)

Aktuellste (20)

Anzeige

Android xml-based layouts-chapter5

  1. 1. Chapter 5 XML-Based Layouts By Dr. Ramkumar Lakshminarayanan Introduction While it is technically possible to create and attach widgets to your activity purely through Java code, the more common approach is to use an XML-based layout file. Dynamic instantiation of widgets is reserved for more complicated scenarios, where the widgets are not known at compile time (e.g., populating a column of radio buttons based on data retrieved from the Internet). With that in mind, this chapter discuss the XML way to lay out Android activity views that way. XML-Based Layout As the name suggests, an XML-based layout is a specification of widgets' relationships to each other—and to containers—encoded in XML format. Specifically, Android considers XML-based layouts to be resources, and as such, layout files are stored in the reslayout directory inside your Android project. Each XML file contains a tree of elements specifying a layout of widgets and containers that make up one View. The attributes of the XML elements are properties, describing how a widget should look or how a container should behave. For example, if a Button element has an attribute value of android:textStyle = "bold", that means that the text appearing on the face of the button should be rendered in a boldface font style. Android's SDK ships with a tool (aapt) that uses the layouts. This tool should be automatically invoked by your Android tool chain (e.g., Eclipse or Ant's build.xml). Of particular importance to you as a developer is that aapt generates the R.java source file within your project's gen directory, allowing you to access layouts and widgets within those layouts directly from your Java code. Here is the Button from the sample application, converted into an XML layout file, found in the reslayouts sample project <?xml version="1.0" encoding="utf-8"?> <Button xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/button" android:text="" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
  2. 2. The class name of the widget, Button, forms the name of the XML element. Since Button is an Android-supplied widget, we can just use the bare class name. If you create your own widgets as subclasses of android.view.View, you will need to provide a full package declaration as well (e.g., com.mjs.learnandroid.MyWidget). The root element needs to declare the Android XML namespace: All other elements will be children of the root and will inherit that namespace declaration. Because we want to reference this button from our Java code, we need to give it an identifier via the android:id attribute. The remaining attributes are properties of this Button instance:  android:text: Indicates the initial text to be displayed on the button face (in this case, an empty string)  android:layout_width and android:layout_height: Tell Android to have the button's width and height fill the parent, which in this case is the entire screen Since this single widget is the only content in our activity's view, we need only this single element. Complex views will require a whole tree of elements, representing the widgets and containers that control their positioning. @ Signs Many widgets and containers need to appear only in the XML layout file and do not need to be referenced in your Java code. For example, a static label (TextView) frequently needs to be in the layout file only to indicate where it should appear. These sorts of elements in the XML file do not need to have the android:id attribute to give them a name. Anything you to use in the Java source, though, needs an android:id. The convention is to use @+id/... as the id value, where the ... represents your locally unique name for the widget in question, for the first occurrence of a given id value in your layout file. In the XML layout example in the preceding section, @+id/button is the identifier for the Button widget. The second and subsequent occurrences in the same layout file should drop the + sign. Attach XML to Java Set up the widgets and containers for your view in an XML layout file named activity_main.xml stored in res/layout, all you need is one statement in your activity's onCreate() callback to use that layout: xmlns:android="http://schemas.android.com/apk/res/android" setContentView(R.layout.activity_main);
  3. 3. setContentView() is used passing it an instance of a View subclass The Android-built View, constructed from the layout, is accessed from that code-generated R class. All of the layouts are accessible under R.layout, keyed by the base name of the layout file; for example, res/layout/activity_main.xml results in R.layout.activity_main. To access your identified widgets, use findViewById(), passing it the numeric identifier of the widget in question. That numeric identifier was generated by Android in the R class as R.id.something (where something is the specific widget you are seeking). Those widgets are simply subclasses of View. Code for the Application We have set it reference the XML layout (setContentView(R.layout.activity_main)). The R.java source file will be updated when we rebuild this project to include a reference to our layout file (stored as activity_main.xml in our project's res/layout directory). We have used the findViewById() call. Since we identified our button as @+id/button, we can reference the button's identifier as R.id.button. Now, with the Button instance in hand, we can set the callback and set the label as needed. Here in this application, to have the button in the application we have used import.widget.Button. To display the time in the screen, java.util.Date is used. When the button is clicked the function updateTime() will be called. To handle the click event, MainActivity extends View.OnClickListener. package com.mjs.learnapp; import android.os.Bundle; import android.app.Activity; import android.view.View; import android.widget.Button; import java.util.Date; public class MainActivity extends Activity implements View.OnClickListener{ Button btn; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); btn=(Button)findViewById(R.id.button); btn.setOnClickListener(this); updateTime(); } public void updateTime(){ btn.setText(new Date().toString()); } }
  4. 4. Figure 5.1: Learnapp Sample Application. More about Layouts Here is a list of the most common layouts provided by Android: • Frame Layout: Arranges its children so they all start at the top left of the screen. This is used for tabbed views and image switchers. • Linear Layout: Arranges its children in a single column or row. This is the most common layout you will use. • Relative Layout: Arranges its children in relation to each other or to the parent. This is often used in forms. • Table Layout: Arranges its children in rows and columns, similar to an HTML table.
  5. 5. • Absolute Layout: Arranges its children by the ratio of X and Y coordinate pixels. It allows free design on the screen. Layouts and their child View controls have certain attributes that help control their behavior. For example, all layouts share the attributes android:layout_width and android:layout_height, which control how wide and high an item is. These attribute values can be dimensions, such as a number of pixels, or use a more flexible approach: fill_parent or wrap_content. Using fill_parent instructs a layout to scale to the size of the parent layout, and using wrap_content “shrink wraps” the child View control within the parent, giving it only the space of the child View control’s dimensions. A number of other interesting properties can be used to control specific layout behavior, including margin settings and type-specific layout attributes. Figure 5.2 Linear Layout Figure 5.3 Relative Layout
  6. 6. Figure 5.4 Web View Web View displays web page. In the learnapp application, we shall make the following code in activity_main.xml, strings.xml and in MainActivity.java and see the output in Figure 5.2 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingLeft="16dp" android:paddingRight="16dp" android:orientation="vertical" > <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="@string/to" /> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="@string/subject" /> <EditText android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" android:gravity="top" android:hint="@string/message" /> <Button android:layout_width="100dp" android:layout_height="wrap_content" android:layout_gravity="right" android:text="@string/send" /> </LinearLayout>
  7. 7. activity_main.xml strings.xml MainActivity.java Output of Application used with Linear Layout <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">LearnApp</string> <string name="hello_world">Learn Android App</string> <string name="menu_settings">Settings</string> <string name="to">To</string> <string name="subject">Subject</string> <string name="message">Message</string> <string name="send">Send</string> </resources> package com.mjs.learnapp; import android.os.Bundle; import android.app.Activity; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }
  8. 8. Figure 5.5 learnapp application using Linear Layout Chapter Summary In this chapter we have discussed how we can create layout using XML. The common layouts in Android are Frame Layout, Linear Layout, Relative Layout, Table Layout, Absolute Layout and Web View.In the next chapter we discuss the examples of Layouts and Web View.

×