More App Customizations

1. More App Customizations

2. Overview Application/ Activity Customizations: Themes Menu Customizations Custom Dialogs Custom Toasts Custom Buttons Custom ListView

3. Themes

4. Recap: Styles Styles are collections of properties used in Views Styles, however, are targetted. They only affect the View specified even a Layout which could have multiple Views inside it will not pass the style values to these

5. Theme Styles can be applied globally across a whole application by styling an Application or Activity Used in this way a style is called a theme Styling an Activity will affect all Views in the activity Styling an Application will affect all Activities and Views in those activities Themes can also contain properties that are not usable by Views

6. Theme-specific properties Some style properties, however, are not supported by any View elements and can only be applied as part of a theme. These style properties apply to the entire window and not to any type of View. For example, style properties for a theme can hide the application title, hide the status bar, or change the window's background. android:windowNoTitle android:windowFullscreen android:windowBackground 

7. Example more windowXXX attributes can be found in file:///C:/android-sdk-windows/docs/reference/android/R.attr <style name="sampleTheme"> <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> <!-- Window-specific properties: try changing them --> <item name="android:windowNoTitle">true</item> <item name="android:windowFullscreen">true</item> <item name="android:windowBackground">@drawable/bg</item> </style>

8. Example If you want the theme applied only to a specific activity add the android:theme attribute to the <activity> tag instead <application android:icon="@drawable/icon" android:theme="@style/sampleTheme" android:label="@string/app_name"> <activity android:name=".AppCustomizationActivity" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application>

9. Menu Customization

10. Custom Menus Options menus options can have icons associated to them Context menus cannot take icons

11. Custom Menu via XML Adding icons to options menus is easy simply add an android:icon attribute with the image id <?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <item android:id="@+id/new_game"          android:icon="@drawable/ic_new_game"          android:title="@string/new_game" />    <item android:id="@+id/help"          android:icon="@drawable/ic_help"          android:title="@string/help" /></menu>

12. Custom Toasts

13. Custom Toasts Toasts do not have to look like plain text on black They can be fully customized like an Activity Simply define a layout using the GraphicalEditor or XML Attach this to the Toast

14. Example Save this as toast_layout.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:id="@+id/toast_layout_root"              android:orientation="horizontal"              android:layout_width="fill_parent"              android:layout_height="fill_parent"              android:padding="10dp"              android:background="#DAAA"              >    <ImageView android:id="@+id/image"               android:layout_width="wrap_content"               android:layout_height="fill_parent"               android:layout_marginRight="10dp"               />    <TextView android:id="@+id/text"              android:layout_width="wrap_content"              android:layout_height="fill_parent"              android:textColor="#FFF"              /></LinearLayout>

15. Example Load the layout and initialize the views Create a Toast Attach the layout to a Toast and provide other initializations show() LayoutInflater inflater = getLayoutInflater();View layout = inflater.inflate(R.layout.toast_layout,                               (ViewGroup) findViewById(R.id.toast_layout_root));ImageView image = (ImageView) layout.findViewById(R.id.image);image.setImageResource(R.drawable.android);TextView text = (TextView) layout.findViewById(R.id.text);text.setText("Hello! This is a custom toast!");Toast toast = new Toast(getApplicationContext());toast.setGravity(Gravity.CENTER_VERTICAL, 0, 0);toast.setDuration(Toast.LENGTH_LONG);toast.setView(layout);toast.show();

16. Note Do not use the public constructor for a Toast unless you are going to define the layout with setView(View). If you do not have a custom layout to use, you must use makeText(Context, int, int) to create the Toast as before

17. Custom Dialogs

18. Custom Dialogs • Generally AlertDialog is all you will need for most Dialog requirements • If you can get away with AlertDialog use it • If AlertDialog does not provide what you need, it is possible to define your own Dialog layout • The process is similar to defining an Activity layout

19. Example <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:id="@+id/layout_root"              android:orientation="horizontal"              android:layout_width="fill_parent"              android:layout_height="fill_parent"              android:padding="10dp"              >    <ImageView android:id="@+id/image"               android:layout_width="wrap_content"               android:layout_height="fill_parent"               android:layout_marginRight="10dp"               />    <TextView android:id="@+id/text"              android:layout_width="wrap_content"              android:layout_height="fill_parent"              android:textColor="#FFF"              /></LinearLayout>

20. Example Create the Dialog object manually and initialize using the layout specified Note: this code would be part of showDialog(int i) as one of the cases Context mContext = getApplicationContext();Dialog dialog = new Dialog(mContext);dialog.setContentView(R.layout.custom_dialog);dialog.setTitle("Custom Dialog");TextView text = (TextView) dialog.findViewById(R.id.text);text.setText("Hello, this is a custom dialog!");ImageView image = (ImageView) dialog.findViewById(R.id.image);image.setImageResource(R.drawable.android);

21. Special widget customization

22. Specific widget customization Many widgets have specific customization options E.g. Buttons Icons Animated (hover image change) Background image

23. Button customization • To change the look of a button is done via XML and supplying replacement images for the button • Requires defining a selector resource and passing this as the button’s background • The selector defines the different button states and how it will look in each state

24. Example <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="false" android:drawable="@drawable/button_normal" /> <item android:state_pressed="true" android:state_enabled="true" android:drawable="@drawable/button_pressed" /> <item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/button_focused" /> <item android:state_enabled="true" android:drawable="@drawable/button_normal" /> </selector>

25. Example <Button android:background="@drawable/custom_button_states" android:text="Button" android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>

26. ListView customization works similar to Button customization Define a selector with the different selection states For more information: http://stackoverflow.com/questions/2562051/listview-item-background-via-custom-selector ListView customization