Your SlideShare is downloading. ×
0
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
Notes
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

Notes

732

Published on

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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Comp 194-MA
  • 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. 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. 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. 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. 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. 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. 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. 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. The UI Editor Canvas Add/Remove Widgets Edit the XML
  • 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. Project <ul><li>Build a weather report app using as many widgets as possible. </li></ul>
  • 13. Screenshots
  • 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. 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. Snippets! <ul><li>Access the R resources from a activity: </li></ul><ul><li>Activity. getResources() </li></ul>
  • 17. Screen Shots Part Deux
  • 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. 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. 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>

×