Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply



Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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!