1. App Customization

2. Introduction  Not all Android apps look the same  i.e. the default bland black and white look  Most have custom looks like  Background images  Coloured text  Image Icons/Buttons  Animation  Etc.

3. Basic Image Concepts

4. Images  Images are placed in the drawable folders of /res  There are three drawable folders, one for each category of screen size  drawable-hdpi  drawable-mdpi  drawable-ldpi  Each folder corresponds to resources to be used for a specific screen size category

5. Image Size Categories  Android defines 3 broad image size categories  hdpi, mdpi, ldpi  Each one should hold resources appropriate to the size  This is needed due to Android’s automatic resizing  Resizing smaller images results in lower quality on larger screens  Images should have the same name in each category  Supported image types are: PNG and JPG

6. Multiple Screen Support

7. ImageView  Images can be easily added to an existing View Hierarchy  An ImageView is a type of View used to hold an image  Used as a placeholder for images  E.g. for icons on a menu

8. Example  The image used is specified using the @drawable/  The name of the image is the image filename in the drawable folder  i.e. either icon.png or icon.jpg  Layouting parameters automatically stretch a smaller image to a larger space or shrink a larger image to a smaller space as needed <ImageView android:src="@drawable/icon" android:id="@+id/imageView1" android:layout_width=“wrap_content" android:layout_height="match_parent">

9. Customizations

10. Overview  Several aspects of the UI can be directly customized in XML  Widget Customization  Activity Customization  Styles  Themes

11. Basic widget customizations  Views have several properties that affect its look, for example:  Layouting  android:layout_width  android:layout_height  Background  android:background – used to specify a background image for the view  Text-based Views  android:textColor  android:typeface

12. Basic properties  There are dozens of basic properties to discuss all of them  Most of them you will have to do trial-and-error to discovery what they do (though their names are usually informative enough)  Use the Graphical Editor to see a listing of all the available properties per View or look at each View JavaDoc for a full list of all applicable attributes  For example TextView  file:///C:/android-sdk- windows/docs/reference/android/widget/TextView.html #lattrs file:///C:/android-sdk- windows/docs/reference/android/widget/TextView.html #lattrs

13. Styles

14. Styles  Android Styles ≈ Cascading Style Sheets (CSS) in HTML  Collection/combination of view properties grouped together as a logical entity  layout_width, layout_height, background, font size, font color, padding, …  A style is defined in an XML resource that is separate from the XML that specifies the layout  This can then be applied to specific Views/Layouts by specifying it as an attribute

15. Effect of styles  Reduces redundant configuration  Easier to globally replace this configuration consistently

16. Defining a style  To create a set of styles, save an XML file in the res/values/ directory of your project.  The name of the XML file is arbitrary, but it must use the.xml extension and be saved in the res/values/ folder.  The root node of the XML file must be  For each style you want to create, add a element to the file with a name that uniquely identifies the style (this attribute is required).  Then add an element for each property of that style, with a name that declares the style property and a value to go with it (this attribute is required).  The value for the can be a keyword string, a hex color, a reference to another resource type, or other value depending on the style property.

17. Example Save this XML file in /res/values/ fill_parent wrap_content #00FF00 monospace

18. Style inheritance  The parent attribute in the element lets you specify a style from which your style should inherit properties.  You can use this to inherit properties from an existing style and then define only the properties that you want to change or add. fill_parent wrap_content #00FF00 monospace

19. Platform styles  In addition to inheriting from styles you create, there are many available built- in styles defined in Android from which you can inherit and reuse  file:///C:/android-sdk- windows/docs/guide/topics/ui/themes.h tml#PlatformStyles file:///C:/android-sdk- windows/docs/guide/topics/ui/themes.h tml#PlatformStyles

20. Styles and Activity  Activities can also be “styled” to a degree  By styling the outermost Layout holding the rest of the View hierarchy  The most common styling that is applied to a background are  Changing the background color  Supplying a backgroud image

21. Example  Setting the background image of an activity <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent“ android:background="@drawable/bg" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" />

22. Example  Setting the background color of an activity using the hex color value <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent“ android:background="#FF0000" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" />

23. More to come  More activity customizations, menu customizations and themes  E.g. Fullscreen style apps, icons in menus  Customized Dialogs and Toasts  Specific widget customizations  Button – hover/select effects  ListView – hover/select effects