• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content







Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Notes Notes Presentation Transcript

    • Comp 194-MA
    • Widgets and Containers?
      • The UIs of Android applications are composed of a series of widgets contained inside containers.
      • The general philosophy is similar to Swing/AWT
      • The Eclipse plugin provides a easy to use GUI to construct Android UIs
    • How it works
      • The Android UI is described using XML where the tags represent layouts and widgets.
      • UI elements can also be added programmatically at runtime.
      • The Eclipse plugin provides a GUI to manipulate the XML.
    • Android Containers
      • Android ships with five core layouts:
        • FrameLayout – simplest layout system. Provides a blank space that can be filled by a widget.
        • LinearLayout – default layout. Everything is laid out linearly either horizontally or vertically.
        • TableLayout – positions elements in a table like grid.
        • AbsoluteLayout – allows elements to be absolutely positioned.
    • The LinearLayout
      • Default layout for Android applications.
      • It provides the best compromise between flexibility and usability.
      • Layouts using the LinearLayout should render uniformly across Android devices.
      • Google recommends using the LinearLayout whenever possible.
    • More info
      • Layouts are nestable – you can nest several layouts to design your UI as you please.
      • Widgets can not exist in a View without a layout parent.
      • More information is available here: http://code.google.com/android/devel/ui/layout.html
    • Widgets
      • Android ships with a default set of around a dozen widgets.
      • They range from everything from textboxes to embeddable Google Maps.
      • Widgets are Java classes so they can be easily extended and modified.
      • List of standard widgets: http://code.google.com/android/reference/view-gallery.html
    • Widgets and Strings
      • Easy to embed string in widget
        • <TextView xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:layout_width=&quot;fill_parent&quot; android:layout_height=&quot;fill_parent&quot; android:text=“Hello World&quot;/>
      • This can get cluttered and difficult to easy switch out strings. It should be separated much more
    • Widgets and Strings Better
      • Separate the string text into different xml file, strings.xml
        • <TextView xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:layout_width=&quot;fill_parent&quot; android:layout_height=&quot;fill_parent&quot; android:text=&quot;@string/hello&quot;/>
      • In strings.xml now place:
        • <string name=&quot;hello&quot;>Hello, I am a string resource!</string>
      • Much cleaner, easier to read and to update. You can also reference the strings in the application so you do not have to code them in the app itself
    • The UI Editor Canvas Add/Remove Widgets Edit the XML
    • Events and such
      • Widgets expose the customary events to Android developers.
      • Handlers can be attached using anonymous classes that deal with the various events (see later slide)
      • Events also “bubble” up in Android from lower widgets to their parents.
    • Project
      • Build a weather report app using as many widgets as possible.
    • Screenshots
    • Snippets!
      • Using the autocompleter:
        • ArrayAdapter<String> adapter =
        • new ArrayAdapter<String>(this, android.R.layout. simple_dropdown_item_1line, CITIES);
        • AutoCompleteTextView textView = (AutoCompleteTextView) findViewById(R.id. zipcode);
      • textView.setAdapter(adapter);
    • Snippets!
      • Add event listener to a button:
      • ImageButton button = (ImageButton)
      • this.findViewById(R.id. fetchWeather);
      • button.setOnClickListener(onButtonClick);
      • private OnClickListener onButtonClick = new OnClickListener() {
      • public void onClick(View v) { … }
      • }
    • Snippets!
      • Access the R resources from a activity:
      • Activity. getResources()
    • Screen Shots Part Deux
    • How’s it done?
      • ListAdapter
        • Allows for a list much like the contact list on the iPhone
        • Change your main class to extend ListActivity
        • Create an ArrayAdapter: myAdapter new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, StringArray)
          • The string array is the list of items in a single dimensional array ie String[] x={“earthquake”…};
    • Almost There
      • You need to listen to the adapter for an item to get clicked so create an OnItemClickListener
        • private OnItemClickListener bClick=new OnItemClickListener(){….}
      • Set the listView to have the itemListener(bClick)
        • getListView().setOnItemClickListener(bClick);
    • Finishing Step
      • You can retrieve the ImageView from the layout file
        • ImageView img=(ImageView)findViewById(R.id.imageviewid)
      • Once you have this you can update the weather image by changing the background resource
        • Img.setBackgroundResource(R.drawable.image)
      • Done!