User Interface

1. User Interface Android Applications

2. Activities • An activity presents a visual user interface. • Each activity is given a default window to draw in. • The visual content of the window is provided by a hierarchy of views. • Each view controls a particular rectangular space within the window.

3. Hierarchy of Views • Parent views contain and organize the layout of their children. • Leaf views (those at the bottom of the hierarchy) draw in the rectangles they control and respond to user actions directed at that space.

4. View Hierarchy • A view hierarchy is placed within an activity's window by the Activity.setContentView() method.

5. View Group • A ViewGroup is a special view that can contain other views (called children.) • The view group is the base class for layouts and views container • Some layout paramemeters: fill_parent, match_parent, wrap_content

6. Widgets • The View class serves as the base for subclasses called "widgets," which offer fully implemented UI objects, like text fields and buttons. • A widget is a View object that serves as an interface for interaction with the user.

7. Widgets:Ready-made views in Android • buttons, • text fields, • scroll bars, • menu items, • check boxes, • more

8. src/[package name]/[activity name].java package com.example.helloandroid; import android.app.Activity; import android.os.Bundle; public class HelloAndroid extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } } Notice that the class is based on the Activity class.

9. The onCreate() method will be called by the Android system when your Activity starts — it is where you should perform all initialization and UI setup. • In there you will usually call setContentView(int) with a layout resource defining your UI

10. Declaring Layout • Your layout is the architecture for the user interface in an Activity. It defines the layout structure and holds all the elements that appear to the user. • You can declare your layout in two ways: • Declare UI elements in XML • Instantiate layout elements at runtime

11. 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. <?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout>

12. res/values/strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">Hello World, HelloAndroid!</string> <string name="app_name">Hello, Android</string> </resources>

13. Hello World, HelloAndroid!

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

15. src/[package name]/[activity name].java package com.example.helloandroid;import android.app.Activity;import android.os.Bundle;import android.widget.TextView;public class HelloAndroid extends Activity {   /** Called when the activity is first created. */   @Override   public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);TextViewtv = new TextView(this);tv.setText("Hello World, HelloAndroid!");setContentView(tv);   }}

16. Application Resources • Common files in res/ directory: • drawable/icon.png: Icon for the program in launcher • layout/main.xml: User interface for main Activity • values/strings.xml: Any Strings appearing in UI • Resources –separate program logic from “other stuff” Strings, images, UI layouts

17. res/layout/main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout>

18. Hello Android

19. XML files • 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.

20. Modified main.xml (1) <?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent">  <LinearLayoutandroid:orientation="horizontal"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1">      <TextViewandroid:text="red"android:gravity="center_horizontal"android:background="#aa0000"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/>      <TextViewandroid:text="green"android:gravity="center_horizontal"android:background="#00aa00"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/>      <TextViewandroid:text="blue"android:gravity="center_horizontal"android:background="#0000aa"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/>      <TextViewandroid:text="yellow"android:gravity="center_horizontal"android:background="#aaaa00"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/>  </LinearLayout>

21. Modified main.xml (2) <LinearLayoutandroid:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1">    <TextViewandroid:text="row one"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/>    <TextViewandroid:text="row two"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/>    <TextViewandroid:text="row three"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/>    <TextViewandroid:text="row four"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/>  </LinearLayout></LinearLayout>

22. Linear Layout

23. Identify the changes in main.xml

24. Modified main.xml <?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation=“horizontal"android:layout_width="fill_parent"android:layout_height="fill_parent">  <LinearLayoutandroid:orientation="horizontal"android:layout_width="fill_parent“ …

25. Identify changes in original main.xml

26. ID • Any View object may have an integer ID associated with it, to uniquely identify the View within the tree. When the application is compiled, this ID is referenced as an integer, but the ID is typically assigned in the layout XML file as a string, in the id attribute. android:id="@+id/my_button"

27. Vertical LinearLayout to hold a TextView and a Button • <?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>

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

31. Loading the XML Resource public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView.(R.layout.main_layout);}

32. R.java • Eclipse combs through res/ directory, generating Java class to access resources in code. • Examples:R.string.<string_name>, R.layout.<layout_name> • Accessing resources through the R class lets Android determine the right resource to use

33. gen/ [Generated Java Files]/R.java /* AUTO-GENERATED FILE. DO NOT MODIFY. * * This class was automatically generated by the * aapt tool from the resource data it found. It * should not be modified by hand. */ package com.example.helloandroid3; public final class R { public static final class attr { } public static final class drawable { public static final int icon=0x7f020000; } public static final class layout { public static final int main=0x7f030000; } public static final class string { public static final intapp_name=0x7f040001; public static final int hello=0x7f040000; } }