UI Design for Settings - eecs.yorku.ca€¦ · UI Design for Settings ... Put in Action Bar menu Do...
Transcript of UI Design for Settings - eecs.yorku.ca€¦ · UI Design for Settings ... Put in Action Bar menu Do...
![Page 1: UI Design for Settings - eecs.yorku.ca€¦ · UI Design for Settings ... Put in Action Bar menu Do Not Put as button in Action Bar Developers > Design > Patterns > Settings ...](https://reader034.fdocuments.in/reader034/viewer/2022043001/5f7a6e3d1183bd2f136b30bd/html5/thumbnails/1.jpg)
UI Design for Settings
• Settings are…– Not frequently used
• In a UI, they should be…– Low in prominence
• So…
42© Scott MacKenzie
DoPut in Action Bar menu
Do NotPut as button in Action Bar
Developers > Design > Patterns > Settings
![Page 2: UI Design for Settings - eecs.yorku.ca€¦ · UI Design for Settings ... Put in Action Bar menu Do Not Put as button in Action Bar Developers > Design > Patterns > Settings ...](https://reader034.fdocuments.in/reader034/viewer/2022043001/5f7a6e3d1183bd2f136b30bd/html5/thumbnails/2.jpg)
Furthermore…
• Place at end of menu, just above Help
43© Scott MacKenzie
Developers > Design > Patterns > Settings Chrome
![Page 3: UI Design for Settings - eecs.yorku.ca€¦ · UI Design for Settings ... Put in Action Bar menu Do Not Put as button in Action Bar Developers > Design > Patterns > Settings ...](https://reader034.fdocuments.in/reader034/viewer/2022043001/5f7a6e3d1183bd2f136b30bd/html5/thumbnails/3.jpg)
Demo_Settings
44© Scott MacKenzie
Next three slides summarize the code
Launch Options menu Settings menu UI to change Min
![Page 4: UI Design for Settings - eecs.yorku.ca€¦ · UI Design for Settings ... Put in Action Bar menu Do Not Put as button in Action Bar Developers > Design > Patterns > Settings ...](https://reader034.fdocuments.in/reader034/viewer/2022043001/5f7a6e3d1183bd2f136b30bd/html5/thumbnails/4.jpg)
DemoSettingsActivity.java
DemoSettingsActivity.java
45© Scott MacKenzie
1. Create an Options Menu for the Action Bar:
2. Implement onOptionsItemSelected to respond to the user selecting “Settings”:
![Page 5: UI Design for Settings - eecs.yorku.ca€¦ · UI Design for Settings ... Put in Action Bar menu Do Not Put as button in Action Bar Developers > Design > Patterns > Settings ...](https://reader034.fdocuments.in/reader034/viewer/2022043001/5f7a6e3d1183bd2f136b30bd/html5/thumbnails/5.jpg)
MyPreferenceFragment.java
46© Scott MacKenzie
3. Implement an activity that creates the Settings UI:SettingsActivity.java
4. Implement a PreferenceFragment to load the UI from an XML resource.
(consult source code for details of the change listener)
![Page 6: UI Design for Settings - eecs.yorku.ca€¦ · UI Design for Settings ... Put in Action Bar menu Do Not Put as button in Action Bar Developers > Design > Patterns > Settings ...](https://reader034.fdocuments.in/reader034/viewer/2022043001/5f7a6e3d1183bd2f136b30bd/html5/thumbnails/6.jpg)
res/xml/preferences.xml
47© Scott MacKenzie
5. Implement the XML resources for the PreferenceFragment
res/values/string.xml
![Page 7: UI Design for Settings - eecs.yorku.ca€¦ · UI Design for Settings ... Put in Action Bar menu Do Not Put as button in Action Bar Developers > Design > Patterns > Settings ...](https://reader034.fdocuments.in/reader034/viewer/2022043001/5f7a6e3d1183bd2f136b30bd/html5/thumbnails/7.jpg)
Map
• Save/Restore an Object• Forcing Portrait or Landscape Orientation• Handling a Configuration Change Yourself• Activity to Activity Transitions• Activity to Activity Transitions (with Results)• Settings• Fragments
48© Scott MacKenzie
![Page 8: UI Design for Settings - eecs.yorku.ca€¦ · UI Design for Settings ... Put in Action Bar menu Do Not Put as button in Action Bar Developers > Design > Patterns > Settings ...](https://reader034.fdocuments.in/reader034/viewer/2022043001/5f7a6e3d1183bd2f136b30bd/html5/thumbnails/8.jpg)
What is a Fragment?• Added in API level 11 (Honeycomb)• A Fragment is
– A portion of user interface in an Activity• Features
– Use multiple fragments in a single activity– Build multi‐pane UIs– Reuse in multiple activities– A modular section of an activity– Its own lifecycle, and input events– Add or remove while the activity is running – Like a "sub activity"
49© Scott MacKenzie
![Page 9: UI Design for Settings - eecs.yorku.ca€¦ · UI Design for Settings ... Put in Action Bar menu Do Not Put as button in Action Bar Developers > Design > Patterns > Settings ...](https://reader034.fdocuments.in/reader034/viewer/2022043001/5f7a6e3d1183bd2f136b30bd/html5/thumbnails/9.jpg)
Demo_Settings
50© Scott MacKenzie
SettingsActivity.java
MyPreferenceFragment.java
Justdiscussed!
NOTE: There is no setContentViewmethod in onCreate. The fragment is the activity’s main content!
Predefined resource content of the activity
![Page 10: UI Design for Settings - eecs.yorku.ca€¦ · UI Design for Settings ... Put in Action Bar menu Do Not Put as button in Action Bar Developers > Design > Patterns > Settings ...](https://reader034.fdocuments.in/reader034/viewer/2022043001/5f7a6e3d1183bd2f136b30bd/html5/thumbnails/10.jpg)
Demo_CardAnimation
51© Scott MacKenzie
onCreate
![Page 11: UI Design for Settings - eecs.yorku.ca€¦ · UI Design for Settings ... Put in Action Bar menu Do Not Put as button in Action Bar Developers > Design > Patterns > Settings ...](https://reader034.fdocuments.in/reader034/viewer/2022043001/5f7a6e3d1183bd2f136b30bd/html5/thumbnails/11.jpg)
52© Scott MacKenzie
DemoCardAnimationActivity.java
main.xml
Add a fragment to the activity state
The container into which the fragment is placed
The fragment to be added
![Page 12: UI Design for Settings - eecs.yorku.ca€¦ · UI Design for Settings ... Put in Action Bar menu Do Not Put as button in Action Bar Developers > Design > Patterns > Settings ...](https://reader034.fdocuments.in/reader034/viewer/2022043001/5f7a6e3d1183bd2f136b30bd/html5/thumbnails/12.jpg)
Demo_Quotation
53© Scott MacKenzie
Fragment
Fragment
onCreate
![Page 13: UI Design for Settings - eecs.yorku.ca€¦ · UI Design for Settings ... Put in Action Bar menu Do Not Put as button in Action Bar Developers > Design > Patterns > Settings ...](https://reader034.fdocuments.in/reader034/viewer/2022043001/5f7a6e3d1183bd2f136b30bd/html5/thumbnails/13.jpg)
54© Scott MacKenzie
main.xml
DemoQuotationActivity.java
(abbreviated)
![Page 14: UI Design for Settings - eecs.yorku.ca€¦ · UI Design for Settings ... Put in Action Bar menu Do Not Put as button in Action Bar Developers > Design > Patterns > Settings ...](https://reader034.fdocuments.in/reader034/viewer/2022043001/5f7a6e3d1183bd2f136b30bd/html5/thumbnails/14.jpg)
Homework
• Download all the “demo” programs from these slides
• Import into Android projects• Connect your device and click “Run”• Observe UI behaviour• Ready the APIs (and links within)• Study source code
© Scott MacKenzie 55
![Page 15: UI Design for Settings - eecs.yorku.ca€¦ · UI Design for Settings ... Put in Action Bar menu Do Not Put as button in Action Bar Developers > Design > Patterns > Settings ...](https://reader034.fdocuments.in/reader034/viewer/2022043001/5f7a6e3d1183bd2f136b30bd/html5/thumbnails/15.jpg)
Thank You
56© Scott MacKenzie