Lecture 6

Transcript

1. Indrek Kõue indrek.koue@itcollege.ee MOBILE SOFTWARE DEVELOPMENT FOR ANDROID Lecture 6 i397 www.applaud.ee 2015 kevad
2. STYLES Style = collection of properties that specify the look <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#00FF00" android:typeface="monospace" android:text="@string/hello" /> <TextView style="@style/CodeFont" android:text="@string/hello" />
3. STYLES Requirements: • res/values/ • *.xml • root: resources <?xml version="1.0" encoding="utf-8"?> <resources> <style name="CodeFont"> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:textColor">#00FF00</item> <item name="android:typeface">monospace</item> </style> </resources>
4. STYLES What properties can I style? http://developer.android.com/reference <EditText android:inputType="number" ... /> <style name="Numbers"> <item name="android:inputType">number</item> ... </style> <EditText style="@style/Numbers" ... />
5. STYLES INHERITANCE <style name="GreenText" parent="@android:style/TextAppearance"> <item name="android:textColor">#00FF00</item> </style> Defined yourself = do not have to use the parent attribute. <style name="CodeFont.Red"> <item name="android:textColor">#FF0000</item> </style> <style name="CodeFont.Red.Big"> <item name="android:textSize">30sp</item> </style>
6. THEMES VS STYLES Style vs theme Style = apply to a single View (applies to single View) Theme = apply as a theme to activity or application (applies to all View elements).
7. THEMES <activity android:theme="@android:style/Theme.Dialog"> <style name="CustomTheme" parent="android:Theme.Light"> <item name="android:windowBackground">@color/color</item> </style> <activity android:theme="@style/CustomTheme">
8. MATERIAL DESIGN Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. Guideline != rule Using on pre lollipop: <application android:theme="@style/Theme.AppCompat" > compile 'com.android.support:appcompat-v7:21.0.3' Using on lollipop: <application android:theme="@android:style/Theme.Material”>
9. MATERIAL DESIGN Color = unexpected and vibrant
10. MATERIAL DESIGN All objects have X, Y, and Z dimensions.
11. MATERIAL DESIGN Each material has uniform thickness (1dp).
12. MATERIAL DESIGN Input events cannot pass through material
13. MATERIAL DESIGN Multiple material can’t occupy same point in Z axis
14. MATERIAL DESIGN Z axis components: • Elevation: static component. • Translation: dynamic component used for animations. <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/next" android:elevation="5dp" /> or View.setElevation() View.setTranslationZ()
15. MATERIAL DESIGN Floating action button = primary action in an application. Note: not for every screen!
16. MATERIAL DESIGN Android 5.0: status bar and navigation bar color changeable. <resources> <style name="AppTheme" parent="android:Theme.Material"> <item name="android:colorPrimary">@color/primary</item> <item name="android:colorPrimaryDark">@color/dark</item> <item name="android:colorAccent">@color/accent</item> </style> </resources> Navigation bar color: <item name="android:navigationBarColor">...</item> Window.setNavigationBarColor(int color)
17. MATERIAL DESIGN IN PRE LOLLIPOP compile 'com.android.support:appcompat-v7:21.0.+' Note: Can’t use all functionality of material design. If you do not use any of the new XML attributes, will work on previous versions of Android. Alternative Layouts For lollipop use res/layout-v21/ and for other res/layout/.
18. ACTIONBAR • Gives your app identity • Indicates user's location in the app. • Makes important actions prominent and accessible Available in the Support Library
19. ACTIONBAR <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/action_search" android:icon="@drawable/ic_action_search" android:title="@string/action_search" android:showAction="ifRoom"/> </menu> @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.main_activity_actions, menu); return super.onCreateOptionsMenu(menu); }
20. ACTIONBAR @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle presses on the action bar items switch (item.getItemId()) { case R.id.action_search: openSearch(); return true; case R.id.action_compose: composeMessage(); return true; default: return super.onOptionsItemSelected(item); } }
21. SPLIT ACTIONBAR
22. SPLIT ACTIONBAR <manifest ...> <activity uiOptions="splitActionBarWhenNarrow" ... > <meta-data android:name="android.support.UI_OPTIONS" android:value="splitActionBarWhenNarrow" /> </activity> </manifest>
23. ACTIONBAR NAVIGATION TABS actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); actionBar.setDisplayShowTitleEnabled(false); Tab tab = actionBar.newTab().setText(R.string.artist).setTabListener(new TabListener<ArtistFragment>(this, "artist", ArtistFragment.class)); actionBar.addTab(tab);
24. TOOLBAR Actionbar can be replaced with toolbar Generalization of the Action Bar pattern that gives you more control and flexibility Released with Android 5.0, available in support library
25. NAVIGATION DRAWER
26. NAVIGATION DRAWER <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- The main content view --> <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" /> <!-- The navigation drawer --> <ListView android:id="@+id/left_drawer" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start"/> </android.support.v4.widget.DrawerLayout>
27. ACCESSIBILITY android:contentDescription for describing layout elements Test for Focus navigation Avoid audio only notifications SP (scale-independent pixel) for text not DP
28. NOTIFICATIONS Message you can display outside of your application's UI Appears as an icon in the status bar. For details open the notification drawer.
29. NOTIFICATION EXPANDING
30. NOTIFICATION ACTIONS Optional actions for notifications.
31. NOTIFICATION PRIORITY
32. NOTIFICATION CATEGORIES CATEGORY_MESSAGE Incoming direct message (SMS etc.) CATEGORY_EMAIL Asynchronous bulk message (email) CATEGORY_PROMO Promotion or advertisement CATEGORY_PROGRESS Progress of a operation CATEGORY_SOCIAL Social network or sharing update CATEGORY_ERROR Error in background operation CATEGORY_RECOMMENDATION A specific, timely recommendation for a single thing. etc.
33. LOCK SCREEN NOTIFICATIONS Since Android 5.0 Sensitive content can still be hidden VISIBILITY_PUBLIC shows the notification's full content. VISIBILITY_SECRET doesn't show any part on the lock screen. VISIBILITY_PRIVATE shows basic information, but hides the full content.
34. HEADS-UP NOTIFICATIONS Since Android 5.0 Appears when user is in full screen mode Includes action buttons
35. NOTIFICATION SORTING When there are multiple notifications from multiple apps, who gets to be on top? OS will decide Takes into account: • Timestamp • Application's stated priority • Has sound or vibration • Any people attached to the notification and are they starred contacts.
36. DIALOGS Prompt the user for decisions or additional information.
37. DIALOGS AlertDialog.Builder builder = new AlertDialog.Builder(getActivity()); builder.setMessage(R.string.dialog_message).setTitle(R.string.dialog_title); builder.setPositiveButton(R.string.ok, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { // User clicked OK button } }); builder.setNegativeButton(R.string.cancel, new DialogInterface. OnClickListener() { public void onClick(DialogInterface dialog, int id) { // User cancelled the dialog } }); AlertDialog dialog = builder.create(); dialog.show()
38. SETTINGS
39. SETTINGS Preference APIs for build consistent user experience CheckBoxPreference Item with a checkbox that is either enabled or disabled. ListPreference Dialog with a list of selections. EditTextPreference Dialog with EditText widget. + custom preference
40. SETTINGS <?xml version="1.0" encoding="utf-8"?> <PreferenceScreen xmlns:android="http://schemas.android. com/apk/res/android"> <CheckBoxPreference android:key="pref_sync" android:title="@string/pref_sync" android:summary="@string/pref_sync_summ" android:defaultValue="true" /> <ListPreference android:dependency="pref_sync" android:key="pref_syncConnectionType" android:title="@string/pref_syncConnectionType" android:dialogTitle="@string/pref_syncConnectionType" android:entries="@array/pref_syncConnectionTypes_entries" android:entryValues="@array/pref_syncConnectionTypes_values" android:defaultValue="@string/pref_syncConnectionTypes_default" /> </PreferenceScreen>
41. SETTINGS SharedPreferences sharedPref = PreferenceManager. getDefaultSharedPreferences(this); String syncConnPref = sharedPref.getString(SettingsActivity. KEY_PREF_SYNC_CONN, "")
42. WEBVIEW Two ways to deliver an application: • client-side application (developed using the Android SDK) • as a web application (developed using web standards and accessed through a web browser). <?xml version="1.0" encoding="utf-8"?> <WebView android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent"/> WebView myWebView = (WebView) findViewById(R.id.webview); myWebView.loadUrl("http://www.example.com");
43. WEBVIEW JAVASCRIPT BINDING Bridge between JavaScript and client-side Android code Binding on Android: • Use @JavascriptInterface annotation • add JavascriptInterface to WebView with key “Android”
44. WEBVIEW JAVASCRIPT BINDING public class WebAppInterface { Context mContext; /** Instantiate the interface and set the context */ WebAppInterface(Context c) { mContext = c; } /** Show a toast from the web page */ @JavascriptInterface public void showToast(String toast) { Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); } }
45. WEBVIEW JAVASCRIPT BINDING WebView webView = (WebView) findViewById(R.id.webview); webView.addJavascriptInterface(new WebAppInterface(this), "Android"); <input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" /> <script type="text/javascript"> function showAndroidToast(toast) { Android.showToast(toast); } </script>
46. TOPICS Themes and styles Material design Actionbar Navigation drawer Accessibility Notifications Dialogs Settings Webview
47. ?