Upcoming SlideShare
Loading in...5

Like this? Share it with your network








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 Presentation Transcript

  • 1. Comp 194-MA
  • 2. 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
  • 3. 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.
  • 4. 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.
  • 5. 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.
  • 6. 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:
  • 7. 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:
  • 8. Widgets and Strings
    • Easy to embed string in widget
      • <TextView xmlns: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
  • 9. Widgets and Strings Better
    • Separate the string text into different xml file, strings.xml
      • <TextView xmlns: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
  • 10. The UI Editor Canvas Add/Remove Widgets Edit the XML
  • 11. 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.
  • 12. Project
    • Build a weather report app using as many widgets as possible.
  • 13. Screenshots
  • 14. Snippets!
    • Using the autocompleter:
      • ArrayAdapter<String> adapter =
      • new ArrayAdapter<String>(this, android.R.layout. simple_dropdown_item_1line, CITIES);
      • AutoCompleteTextView textView = (AutoCompleteTextView) findViewById( zipcode);
    • textView.setAdapter(adapter);
  • 15. Snippets!
    • Add event listener to a button:
    • ImageButton button = (ImageButton)
    • this.findViewById( fetchWeather);
    • button.setOnClickListener(onButtonClick);
    • private OnClickListener onButtonClick = new OnClickListener() {
    • public void onClick(View v) { … }
    • }
  • 16. Snippets!
    • Access the R resources from a activity:
    • Activity. getResources()
  • 17. Screen Shots Part Deux
  • 18. 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”…};
  • 19. 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);
  • 20. Finishing Step
    • You can retrieve the ImageView from the layout file
      • ImageView img=(ImageView)findViewById(
    • Once you have this you can update the weather image by changing the background resource
      • Img.setBackgroundResource(R.drawable.image)
    • Done!