Comp 194-MA
Widgets and Containers? <ul><li>The UIs of Android applications are composed of a series of widgets contained inside conta...
How it works <ul><li>The Android UI is described using XML where the tags represent layouts and widgets. </li></ul><ul><li...
Android Containers <ul><li>Android ships with five core layouts: </li></ul><ul><ul><li>FrameLayout – simplest layout syste...
The LinearLayout <ul><li>Default layout for Android applications. </li></ul><ul><li>It provides the best compromise betwee...
More info <ul><li>Layouts are nestable – you can nest several layouts to design your UI as you please. </li></ul><ul><li>W...
Widgets <ul><li>Android ships with a default set of around a dozen widgets. </li></ul><ul><li>They range from everything f...
Widgets and Strings <ul><li>Easy to embed string in widget </li></ul><ul><ul><li><TextView xmlns:android=&quot;http://sche...
Widgets and Strings Better <ul><li>Separate the string text into different xml file, strings.xml </li></ul><ul><ul><li><Te...
The UI Editor Canvas Add/Remove Widgets Edit the XML
Events and such <ul><li>Widgets expose the customary events to Android developers.  </li></ul><ul><li>Handlers can be atta...
Project <ul><li>Build a weather report app using as many widgets as possible.  </li></ul>
Screenshots
Snippets! <ul><li>Using the autocompleter: </li></ul><ul><ul><li>ArrayAdapter<String> adapter =  </li></ul></ul><ul><ul><l...
Snippets! <ul><li>Add event listener to a button: </li></ul><ul><li>ImageButton button = (ImageButton) </li></ul><ul><li>t...
Snippets! <ul><li>Access the R resources from a activity: </li></ul><ul><li>Activity.  getResources() </li></ul>
Screen Shots Part Deux
How’s it done? <ul><li>ListAdapter </li></ul><ul><ul><li>Allows for a list much like the contact list on the iPhone </li><...
Almost There <ul><li>You need to listen to the adapter for an item to get clicked so create an OnItemClickListener </li></...
Finishing Step <ul><li>You can retrieve the ImageView from the layout file </li></ul><ul><ul><li>ImageView img=(ImageView)...
Upcoming SlideShare
Loading in...5
×

Notes

737

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
737
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Notes

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

    Clipping is a handy way to collect important slides you want to go back to later.

×